X（旧Twitter）の埋め込み過ぎでページ表示速度が重い問題を解決する方法

WordPressサイトを運営していると、記事内にX（エックス）を埋め込む機会がありますよね。お客様のリアルタイムなポストや、口コミをそのままコンテンツに反映できて便利です。

とはいえ、一度に多くのポスト（ツイート）を埋め込みすぎるとページの読み込みが極端に遅く（重く）なることがあります。せっかくの反響をシェアしたくても、ページの読み込み前に離脱されてはもったいない。

そこで今回は、Xの埋め込み過ぎによってページ表示速度が重くなる問題を解決する方法をご紹介いたします。1ページ内で複数のポストを埋め込みたい場合に有効です。

XのJSを削除して、読み込むタイミングを変える
実際に表示速度を検証してみた
まとめ

WordPressテーマ「GLUE」

無料で高機能なWordPressテーマが手に入る。

デモサイト

ダウンロード

XのJSを削除して、読み込むタイミングを変える

対策はシンプルなのですが、いくつか前提知識が必要になります。手順通りに進めれば誰でも対応できるように、わかりやすく解説いたします。以下の流れで進めていきます。

ポストの埋め込み方を確認する
埋め込みコードからスクリプトを削除する
読み込むタイミングを変えたJSを追記する

1. ポストの埋め込み方を確認する

WordPressでポストを埋め込む際、URLをそのまま本文に貼り付ける方法もありますが、今回の対策を行うには専用の「埋め込みコード」が必要です。

公式のコード生成ツール「X Publish（旧Twitter Publish）」にアクセスし、埋め込みたいポストのURLを入力して埋め込みコード（HTML）を取得してください。

2017.01.01

2026.05.20

X（旧Twitter）のポスト・タイムラインをWordPressに埋め込む方法

WordPressでは、X（旧Twitter）のコンテンツを非常に簡単に表示させることができます。当記事では、Xの投稿やタイムラインを埋め込む方法について解説していきますので、参考にしてください。 Xで埋め込む代表的なコンテンツは2つサイト上にXを表示する場合は、下記の2つが一...

2. 埋め込みコードからスクリプトを削除する

1.の手順で埋め込み方法を変更したのは、ある特定のスクリプトを手動で削除するためです。例えば、下記のポストを表示するため埋め込みコードを「Twitter Publish」で取得した場合・・・

不動産ポータルサイトが作れるWordPressテーマを作りました。レインズのように自社サイトに物件掲載ができます。https://t.co/nw5cpOpYJJ

— WordPressテーマTCD (@tcd_jp) February 7, 2025

エディタには以下のように出力されます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">不動産ポータルサイトが作れるWordPressテーマを作りました。レインズのように自社サイトに物件掲載ができます。<a href="https://t.co/nw5cpOpYJJ">https://t.co/nw5cpOpYJJ</a></p>&mdash; WordPressテーマTCD (@tcd_jp) <a href="https://twitter.com/tcd_jp/status/1887813049425522717?ref_src=twsrc%5Etfw">February 7, 2025</a></blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一番下にある <script async src="https://platform.twitter.com/widgets.js" …></script> という記述が、表示を重くしている原因です。

記事内に貼り付けるすべてのポストから、この最後の1行（<script>〜</script>）を削除してください。

※このスクリプトを削除した状態では、一時的にXのデザイン（枠線やいいねボタンなど）が適用されず、ただのテキストとリンクとして表示されますが、次のステップで解決するので問題ありません。

スタイル無しのポスト

3. 読み込むタイミングを変えたJSを追記する

ページを開いた瞬間ではなく、ユーザーがスクロールなどの「操作」を開始した瞬間に、削除したスクリプトを1回だけ読み込ませるコードを設置します。

記事の最下部（または「カスタムHTML」「カスタムスクリプト」ブロックなど）に、以下のコードをコピペして貼り付けてください。

そこで、ページの表示速度に影響しないタイミングでJSを読み込む記述を追記します。

ポストを埋め込んでいるページのエディタを開き、クラシックエディタのテキストエディタにて下記の記述をコピペします。エディタの最下部に設置すればOKです。右上のボタンからコピーいただけます↓

<script>
(function(window, document) {
  function loadXWidget() {
    // X（Twitter）のJSを動的に1回だけ読み込み
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = 'https://platform.twitter.com/widgets.js';
    script.charset = 'utf-8';
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  }

  var isLazyLoaded = false;
  function triggerLazyLoad() {
    if (isLazyLoaded === false) {
      isLazyLoaded = true;
      
      // 複数回呼び出しを防ぐためイベントを解除
      window.removeEventListener('scroll', triggerLazyLoad);
      window.removeEventListener('mousemove', triggerLazyLoad);
      window.removeEventListener('mousedown', triggerLazyLoad);
      window.removeEventListener('touchstart', triggerLazyLoad);
      window.removeEventListener('keydown', triggerLazyLoad);
      
      loadXWidget(); // XのJSを実行
    }
  }

  // ユーザーの操作を検知するイベントリスナー
  window.addEventListener('scroll', triggerLazyLoad, { passive: true });
  window.addEventListener('mousemove', triggerLazyLoad, { passive: true });
  window.addEventListener('mousedown', triggerLazyLoad, { passive: true });
  window.addEventListener('touchstart', triggerLazyLoad, { passive: true });
  window.addEventListener('keydown', triggerLazyLoad);

  // ページ更新時やアンカー遷移で既にスクロールされている場合
  window.addEventListener('load', function() {
    if (window.pageYOffset > 0) {
      triggerLazyLoad();
    }
  });
})(window, document);
</script>

【コードの解説】
このスクリプトは、ユーザーがページを開いた後、以下のいずれかの操作を行った瞬間に初めてXのプログラム（widgets.js）を読み込みます。