ページ読み込み速度向上させてみた（ツイート読み込み遅延編）

2021年4月16日2021年11月21日

測定結果（対策前）

これは何とかしたいですね…

functions.phpに下記処理を追加します。（私の場合SnowMonkeyカスタマイズ用のプラグイン「my-snow-monkey」を使っているのでそちらに記載しています。）

function lazyload_twitter_instagram_async( $content ) {
	$content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','',$content);
	$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','',$content);
	return $content;
}
add_filter('the_content','lazyload_twitter_instagram_async', 11);

これでwidgets.jsやembed.jsを読み込むscript文が消えたのでツイート等の埋め込みはただの引用のように表示されます。

JSファイルには下記のように記述します。

(function(window, document) {
  function main1() {
    // ツイート JS 読み込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://platform.twitter.com/widgets.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }
  
  function main2() {
    // インスタグラム JS 読み込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://www.instagram.com/embed.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }
  
  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);
 
      main1(); // ツイート JS 読み込み
      main2(); // インスタグラム JS 読み込み
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中（更新時 or ページ内リンク）
    if (window.pageYOffset) {
      onLazyLoad();
    }
  });
})(window, document);

すると「スクール、マウス操作、キー操作、ドキュメント途中での読み込み」の際にwidgets.jsやembed.jsを読み込みに行きます。

wp_enqueue_scriptでのJSファイル読み込み処理もお忘れなく。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

以上の対応でちゃんと表示できました！！