WordPressでTwitterとInstagramの埋め込みを遅延読み込みさせる方法

TwitterとInstagramの読み込みは、サイト表示速度を低下させます。

これらの埋め込みがあるとPageSpeed Insightsで減点されてしまいます。

TwitterとInstagramの読み込みを遅らせることで、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のショートコードを自作する方法を紹介します。ショートコードにはいくつか使い…