はじめに
SNSの投稿をブログに埋め込むと、視覚的にわかりやすくなり、読者の興味を引きやすくなります。
特にX（旧Twitter）の埋め込みは、速報性や話題性のある記事にぴったりです。
しかし、実際にXの埋め込みを使ってみたところ、ページの表示速度が大幅に低下。
Xのソースが読み込まれるまで、ページ下部にスクロールできない状態になってしまいました。
Microsoft Clarityでユーザーの操作を確認したところ、その箇所が離脱ポイントになっていたのです。
この記事では、そんな問題を解決するために導入したWordPress公式プラグイン「Embed Optimizer」の効果と設定手順を紹介します。
🐢Xの埋め込みが重くなる理由
Xの埋め込みは、外部のJavaScriptやスタイルシートを読み込む必要があるため、ページ全体の表示がブロックされることがあります。
特に、埋め込みがページの上部にある場合、読み込みが終わるまでスクロールできない現象が起きやすくなります。
私のブログでも、Xの埋め込み直下にあるダウンロードリンクまでスクロールできず、ユーザーが離脱してしまう事例が発生しました。
Microsoft Clarityのセッションリプレイで確認したところ、何度もスクロールを試みた後に離脱する様子が記録されていました。
⚡解決策：WordPress公式プラグイン「Embed Optimizer」
Embed Optimizerとは？
「Embed Optimizer」は、WordPress公式のパフォーマンス改善プラグイン「Performance Lab」に含まれる機能のひとつです。
SNS埋め込み（X、Instagram、youtubeなど）のJavaScript読み込みを遅延させることで、ページ表示速度を改善します。
これにより、ユーザーがスクロール可能な状態を先に確保できるため、離脱リスクを減らすことができます。
🛠導入手順
- WordPress管理画面 → 「プラグイン」→「新規追加」
- 「Performance Lab」で検索し、インストール＆有効化
- 管理画面 → 「設定」→「Performance Lab」
- 「Embed Optimization」にチェックを入れて有効化
- 「変更を保存」をクリックして完了！
→ これだけで、Xの埋め込みが非同期読み込みに切り替わり、表示速度が改善されます。
✅改善後の効果
- ページ表示速度が向上し、スクロール不能問題が解消
- Microsoft Clarityで再確認したところ、離脱率が低下
- SNS埋め込みを使いつつ、ユーザー体験を損なわない運用が可能に
📝まとめ
- Xの埋め込みは便利ですが、表示速度の低下や離脱の原因になることがあります
- WordPress公式プラグイン「Embed Optimizer」を使えば、非同期読み込みで表示速度を改善可能
- Microsoft Clarityでの分析結果からも、導入の価値は十分にあると実感しました
SNS埋め込みを使っている方は、ぜひ「Embed Optimizer」を導入して、快適な表示とユーザー満足度の両立を目指してみてください！
