TwitterとInstagramの読み込みは、サイト表示速度を低下させます。
これらの埋め込みがあるとPageSpeed Insightsで減点されてしまいます。
TwitterとInstagramの読み込みを遅らせることで、PageSpeed Insightsの点数を上げる方法を紹介します。
※PageSpeed Insightsの点数は上がりますが、体感的にはそこまで変わりません。
コードのコピペ場所
以下で紹介するコードは、子テーマの中にあるfunctions.phpに記述してください。
javascriptは新たにlazy-load-twitter.jsというファイルを作成する方法で行います。
functions.php
まずは、以下のコードをfunctions.phpに追加してください。
// Twitter・instagramの遅延読み込み
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'lazy-load-twitter', get_stylesheet_directory_uri() . '/lazy-load-twitter.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function lazyload_twitter_instagram( $content ) {
$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','', $content);
$content = str_replace('<script async="" src="//www.instagram.com/embed.js"></script>','', $content);
return $content;
}
add_filter( 'the_content', 'lazyload_twitter_instagram', 11 );
// Twitter・instagramの遅延読み込みここまで
lazy-load-twitter.js
次は、lazy-load-twitter.jsというファイルを子テーマフォルダの直下に作成し、以下のコードをコピペします。
function twitterLazyLoad(src) {
const scriptTag = document.createElement('script');
scriptTag.src = src;
scriptTag.async = true;
document.body.appendChild(scriptTag);
}
function doTwitterLazyLoad() {
const twitterEmbed = document.getElementsByClassName('twitter-tweet');
const instaEmbed = document.getElementsByClassName('instagram-media');
try {
if (twitterEmbed.length !== 0) twitterLazyLoad('https://platform.twitter.com/widgets.js');
if (instaEmbed.length !== 0) twitterLazyLoad('//www.instagram.com/embed.js');
} catch (error) {
console.log(error);
}
}
window.addEventListener('scroll', doTwitterLazyLoad, { once: true });
これで遅延読み込みできるはずです。
コードの解説
ここからはfunctions.phpとlazy-load-twitter.jsのコードの解説です。
functions.phpの解説
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'lazy-load-twitter', get_stylesheet_directory_uri() . '/lazy-load-twitter.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
これは新たに作成した「lazy-load-twitter.js」ファイルを読み込むための処理です。
function lazyload_twitter_instagram( $content ) {
$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
$content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','', $content);
$content = str_replace('<script async="" src="//www.instagram.com/embed.js"></script>','', $content);
return $content;
}
add_filter( 'the_content', 'lazyload_twitter_instagram', 11 );
この部分は、記事内のTwitter・Instagram埋め込みから、JSの読み込みを削除する処理です。
add_filterでthe_content関数が使われる際に処理を追加します。
the_content関数は記事のコンテンツを表示させるための関数です。
lazy-load-twitter.jsの解説
function twitterLazyLoad(src) {
const scriptTag = document.createElement('script');
scriptTag.src = src;
scriptTag.async = true;
document.body.appendChild(scriptTag);
}
これは、新たにscriptタグを生成し、bodyの下に挿入するためのコードです。
function doTwitterLazyLoad() {
const twitterEmbed = document.getElementsByClassName('twitter-tweet');
const instaEmbed = document.getElementsByClassName('instagram-media');
try {
if (twitterEmbed.length !== 0) twitterLazyLoad('https://platform.twitter.com/widgets.js');
if (instaEmbed.length !== 0) twitterLazyLoad('//www.instagram.com/embed.js');
} catch (error) {
console.log(error);
}
}
これは上のtwitterLazyLoad関数を実行するための関数です。
それぞれの埋め込みがあるかクラス名を取得して判定しています。
try{} catch{}
の形にしてるのは、何かしらのエラーで後のコードが実行されないのを防ぐためです。
window.addEventListener('scroll', doTwitterLazyLoad, { once: true });
これはスクロールが行われた際に、doTwitterLazyLoadを実行するための処理です。
第三引数の{ once: true }
は、一回だけ実行するための記述です。何度もコードが実行されるのを防ぐために書いています。
まとめ
今回の方法を使えば、PageSpeed Insightsの点数は上がるかと思います。
TwitterやInstagramの読み込みで減点されるのが気になるという方は、ぜひ参考にしてください。

【WordPress】front-page.phpとhome.phpとindex.phpの違いは…
今回はWordPressで開発する際に使用するテンプレートファイル、「front-page.php」…

WordPressでショートコードを自作する方法
今回は、WordPressのショートコードを自作する方法を紹介します。ショートコードにはいくつか使い…