ツイート埋め込みページの読み込みを高速化する方法【JSを遅延読込させる】

WordPress（ワードプレス）にツイートを埋め込むとページの表示が遅くなってしまうことがあります。

ページ表示速度が遅いと、いい記事を書いても読まれない可能性が高いので改善が必要です。

この記事の前半では、表示が遅くなってしまう原因を、後半ではページの読み込みを高速化する方法を解説します。

ツイートを埋め込む方法とページ読み込みが遅くなる原因

WordPressにツイッター（正確にはツイート）を埋め込む方法は2つあります。

一つはツイートのURLを貼り付ける方法です。

この方法だと、URLから画像や表示方法などを解析しないといけないので、ページ表示速度が遅くなります。

もう一つが、ツイートの埋め込みタグを使う方法です。

URLを使うよりは速いのですが、画像や見た目をJS（javascript）から読み込むため、埋め込みが多いとページ読み込みが遅くなってしまいます。

これを解消する方法が「JS（javascript）を削除する方法」と「遅延読込させる方法」です。

埋め込みタグのJS（javascript）を削除して高速化する

ツイート埋め込みタグのJS（javascript）を削除するだけでも、高速化できます。

やり方は簡単でJS部分（下記の赤字部分）を削除してWordPressに貼り付けるだけです。

この場合のデメリットは、テキスト表示だけになってしまうことです。画像などは表示されません。

埋め込みタグのJS（javascript）を遅延読込にして高速化する方法

少し手間ですが、埋め込みタグのJS（javascript）を遅延読込設定して高速化する方法があります。

下記の手順で子テーマを使って設定します。

lazyload-twitter.jsを作成

まず下記のJS（javascript）を作成して「lazyload-twitter.js」という名前でファイルを保存します。

ファイルは、子テーマフォルダの中にJSフォルダを作成してその中にFTPでアップロードします。

//<![CDATA[
//lazy load twitter
var lazyloadtw = false;
window.addEventListener("scroll", function() {
  if ((document.documentElement.scrollTop != 0 && lazyloadtw === false) || (document.body.scrollTop != 0 && lazyloadtw === false)) {
    (function() {
      var tw = document.createElement('script');
      tw.type = 'text/javascript';
      tw.async = true;
      tw.src = 'https://platform.twitter.com/widgets.js';
      var sc = document.getElementsByTagName('script')[0];
      sc.parentNode.insertBefore(tw, sc);
    })();

    lazyloadtw = true;
  }
}, true)
//]]>

Googleアドセンスの遅延読込でも利用する遅延読込スクリプトです。

変数名（lazyloadtw）を変えることでGoogleアドセンスの遅延読込とは別に起動させることができます。

functions.phpを修正

次に作成したJS（javascript）を読み込ませるために、functions.phpに下記のコードを追加します。

add_action('wp_footer', function() {

  wp_enqueue_script( 'lazeload_twitter', get_stylesheet_directory_uri() .'/js/lazyload-twitter.js', [], 'v1.0.0' );

}, 11);

フッターで読み込ませれば、このJS（javascript）による読み込み速度低下を防止できます。

ファイルをFTPでアップロードすれば、遅延読込の準備完了です。

ツイート埋め込みタグからJSを削除して貼り付ける

最後にツイートの埋め込みタグのJS部分（下記の赤字部分）を削除して、WordPressの投稿画面に貼り付ければ、遅延読込ができます。

正常に動けば、埋め込んだツイートにデザインが適用されます。

遅延読込の注意点

この遅延読込の注意点は、ファーストビューにあると効果がないという点です。

※ファーストビューとは、パソコンやスマホ画面に最初に表示されるページの先頭エリアのことです。

ファーストビューにある場合は、文字だけが表示されスクロールしたタイミングで画像などが読み込まれます。

そのためレイアウトシフトも発生するので、ファーストビューに入らないように埋め込んだ方がいいです。

まとめ

まとめると、ツイートをWordPressに埋め込む時は、埋め込みタグのJS部分を削除して使うことでページ読み込みを高速化できます。

JS部分を削除しただけだと、文字だけの表示になってしまうので、遅延読込の設定をすることでデザインも適用できます。