こんにちは！
この新機能について、本当に興奮しています。このようなソリューションをずっと待っていたのですが、Tecnoblogの読者からの最初のフィードバックも素晴らしいものでした。コミュニティが統合されていることを非常に喜んでいます。
しかし、実際のテストを経て、これを本当にネイティブなコメントシステムのように感じさせ、さらに重要なのは、高トラフィックのサイトでも持続可能にするために克服すべきいくつかの技術的な課題を発見しました。
以下は、これまでの発見です：
1. パフォーマンスとサーバー負荷
フルアプリを埋め込んだ後、サーバー負荷が大幅に増加しました。Cloudflareを確認すると、リクエスト数が10倍に増えました。これを最適化するためのいくつかのアイデアがあります：
- Lazy Loading: JSのlazy loadを実装すると、かなり改善します（すでにこれを回避するためのワークアラウンドを使用しています）。
<script type="text/javascript">
DiscourseEmbed = {
discourseUrl: '<?php echo esc_url($discourse_url); ?>',
<?php if ($use_topic_id): ?>
// IDモード: トピックがデータベースに保存され、URLの変更には影響を受けません
topicId: <?php echo intval($topic_id); ?>,
<?php else: ?>
// URLモード: API経由での作成が失敗した場合のフォールバック
discourseEmbedUrl: '<?php echo esc_url($permalink); ?>',
<?php endif; ?>
fullApp: true,
embedHeight: '800px',
};
(function() {
var container = document.getElementById('discourse-comments');
// ブラウザがIntersectionObserverをサポートしているか確認
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// divが画面に入ったときにスクリプトを読み込む
loadDiscourse();
observer.unobserve(entry.target);
}
});
}, { rootMargin: "1500px" }); // divに到達する1500px前に読み込む
observer.observe(container);
} else {
// 古いブラウザ向けのフォールバック
loadDiscourse();
}
function loadDiscourse() {
var d = document.createElement('script');
d.type = 'text/javascript';
d.async = true;
d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
}
})();
</script>
ここでは、Lazy Loadが実装された後のリクエスト数の減少を確認できます（また、ウェブサイトの一部はまだキャッシュされていたため、これは最終結果ではありません）：
-
ペイロードの削減: 埋め込み内で読み込まれるリソースを減らすことは可能ですか？例えば、チャットURLやAIクレジットチェックのクエリに気づきましたが、これらは埋め込みビューに必要ですか？
-
リクエスト頻度: リアルタイムのPOSTリクエストは少し過激です。埋め込み版のポーリング頻度を少し下げることはできますか？
-
キャッシュ: トラフィックの急増に対応するための埋め込みトピックのキャッシュ管理を改善します。
2. アナリティクスの問題
現在、埋め込みはGoogle Analytics/GTMスクリプトを発火しています。これにより、ページビューが2倍になります（投稿用とiframe用でそれぞれ1回ずつ）。これはデータを混乱させます。システムがiframe内であることを検出し、自動的にすべてのトラッキングスクリプト（Discourseのアナリティクスも含む）を停止することが理想的です。
3. iFrameの高さの問題
これはおそらくUXにおける最大の課題です。コメントがない投稿の場合、奇妙な空白スペースができてしまいます。長いスレッドがある場合、iframeは最初の2〜3つのコメントで切り捨てられ、「スクロールの中のスクロール」を強制します。これはモバイルデバイスでは特に問題です。
Disqusのようなものと競争するためには、高さを動的に（コメントの数に応じて）し、一定数の返信後にスレッドを展開する「もっと読む」ボタンが必要です。
4. プラグインの競合
埋め込みがすべてのアクティブなプラグインを読み込むため、いくつかの奇妙な挙動が見られます。例えば、「Google One Tap」がブログ投稿内に表示されます。ユーザーがログインすると、iframeが更新され、コミュニティのホーム画面に飛ばされます。埋め込みビューで特定のプラグインを手動で無効にできることは、本当に助かります。
5. ログインの摩擦
現在のフローは少しコンバージョンを妨げています：ユーザーがログインをクリック → 新しいタブが開く → ログインが行われる → ユーザーはコミュニティのホーム画面に残る。ブログ投稿に戻ると、iframeはまだログアウト状態のままです。ユーザーが手動でページ全体を更新するまで、ログイン状態にはなりません。これは混乱を招くループで、コメントする前にユーザーが諦めて去ってしまいます。
新しい埋め込みを有効にして以来、毎日の登録数が2倍以上に増加しました。これは素晴らしいことです。しかし、エンゲージメント指標は全く動きませんでした。実際、DAU/MAUは低下しました。ログインしたユーザーは増えたものの、彼らは相互作用していません。「毎日アクティブなユーザー」、「新しい貢献者」、「投稿数」などの指標は増加していません。
これは、人々が会話に参加したいと思っているが、ログインループで迷子になり、実際にコメントする前に投稿を放棄していることを証明しています。
6. モバイルUI
モバイルでは、返信ウィンドウが画面全体を占めるため、返信している会話の文脈が失われます。少し窮屈な感じがあります。これをよりコンパクトに保つための対策があれば、大きな勝利になります。
Tecnoblog（および所有する別のサイト）でこれがデフォルトのシステムになるようにしたいです。これらのポイントのいずれかについてさらに深く掘り下げたい場合は、お知らせください！
