自分のWordPressブログでPageSpeed Insights点数を改善してみたよ

ある日ふと思いついた。

「自分のブログのPSI(PageSpeed Insights)っていくつなんだろう？」

と。もし低いのなら、今の会社の開発で経験したPSI改善ノウハウをバリバリ活かしてSEOに強くしておこうと思ったのだ。

うわっ…私のPSI、低すぎ…

思い立ったが吉日。さっそく https://masyus.work/ のPSIを調べてみた(PSIはこちらから調査可能)。

まずはモバイル：

続いてパソコン：

低っ、、、特にモバイルが。

モバイルファーストと言われるようになった昨今で、この数字はSEO的にもエンジニアとしても明らかにまずい。ってことで原因調査してみる。

First Contentful Paint(FCP)に時間がかかっていた

PSIのレポート結果を下へ下へ辿ると、具体的に何が原因でモバイルorパソコンの点数が低いのかを教えてくれている。↑の結果を見ると、FCP(First Contentful Paint)に時間かかっていることが判明。

この場合、たいていは外部ファイル(特にjs)の読み込みが原因となっていることが多い。jsが読み込まれている間はHTMLレンダリングが一時的に止まってしまうからだ。レポート結果をさらに下へ辿り、改善できる項目を確認してみる：

cssか。minifyしたり1ファイルに統合したりすれば改善の余地ありそう。ただ、特定のテーマを使っているWordPressでminifyやファイル統合をどうやったらできるかが未調査なので、ちょっと後回し。さらに下を見てみよう：

ううむ、やはり想像の通りだった。特にjqueryの読み込みが時間食っている。

ということで、今回は手っ取り早くできそうなjsファイルの読み込みタイミングを</body>付近へずらすことを試みる。

wp_enqueue_script()で、jsファイルの読み込みタイミングを</body>直前にずらす

当ブログでは特定のcssやjsを直接いじってデザインや動きを変えることが多かったため、下記記事を参考にしてfunctions.phpに外部ファイル読み込み時にタイムスタンプを付与するプログラムを入れていた。

WordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更箇所をすぐに反映させる方法。

そのため、タイムスタンプ付与機能を活かしつつ、jsファイルの読み込みタイミングをずらす必要があったが、結果としては下記のようなプログラムを組んだ：

/**
 * タイムスタンプ付与 & 読み込みを</body>直前に変更
 */
function add_files(){
    define("TEMPLATE_DIRE", get_template_directory_uri());
    define("TEMPLATE_PATH", get_template_directory());

    // theme関連のjs読み込み
    function wp_script($script_name, $file_path, $bool = true){
        wp_enqueue_script($script_name, TEMPLATE_DIRE.$file_path, array(), date('YmdGis', filemtime(TEMPLATE_PATH.$file_path)), $bool);
    }
    // theme以外のjs読み込み
    function wp_free_script($script_name, $absolute_file_path, $absolute_file_dir, $bool = true){
        wp_enqueue_script($script_name, $absolute_file_path, array(), date('YmdGis', filemtime($absolute_file_dir)), $bool);
    }

    wp_deregister_script('jquery');
    wp_free_script(
        'jquery',
        'https://masyus.work/wp-includes/js/jquery/jquery.js',
        '/{ここは各自で任意のファイルパスに書き換えてください}/wp-includes/js/jquery/jquery.js'
    );
    wp_free_script(
        'crayon_js',
        'https://masyus.work/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js',
        '/{ここは各自で任意のファイルパスに書き換えてください}/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js'
    );
    wp_script('owl-carousel', '/js/owl.carousel.min.js');
    wp_script('bootstrap', '/js/bootstrap.min.js');
    wp_script('jquery-text-rotator', '/js/jquery.simple-text-rotator.min.js');
    wp_script('jquery-sticky', '/js/jquery.sticky.js');
    wp_script('wow-min', '/js/wow.min.js');
    wp_script('specia-service-component', '/js/component.js');
    wp_script('specia-service-modernizr-custom', '/js/modernizr.custom.js');
    wp_script('specia-custom-js', '/js/custom.js');
    wp_script('specia-dropdown', '/js/dropdown.js');
    wp_script('skip-link-focus-fix', '/js/skip-link-focus-fix.js');
}
add_action('wp_enqueue_scripts', 'add_files',1);

/**

* タイムスタンプ付与 & 読み込みを</body>直前に変更

function add_files(){

define("TEMPLATE_DIRE", get_template_directory_uri());

define("TEMPLATE_PATH", get_template_directory());

// theme関連のjs読み込み

function wp_script($script_name, $file_path, $bool = true){

wp_enqueue_script($script_name, TEMPLATE_DIRE.$file_path, array(), date('YmdGis', filemtime(TEMPLATE_PATH.$file_path)), $bool);

}

// theme以外のjs読み込み

function wp_free_script($script_name, $absolute_file_path, $absolute_file_dir, $bool = true){

wp_enqueue_script($script_name, $absolute_file_path, array(), date('YmdGis', filemtime($absolute_file_dir)), $bool);

}

wp_deregister_script('jquery');

wp_free_script(

'jquery',

'https://masyus.work/wp-includes/js/jquery/jquery.js',

'/{ここは各自で任意のファイルパスに書き換えてください}/wp-includes/js/jquery/jquery.js'

);

wp_free_script(

'crayon_js',

'https://masyus.work/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js',

'/{ここは各自で任意のファイルパスに書き換えてください}/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js'

);

wp_script('owl-carousel', '/js/owl.carousel.min.js');

wp_script('bootstrap', '/js/bootstrap.min.js');

wp_script('jquery-text-rotator', '/js/jquery.simple-text-rotator.min.js');

wp_script('jquery-sticky', '/js/jquery.sticky.js');

wp_script('wow-min', '/js/wow.min.js');

wp_script('specia-service-component', '/js/component.js');

wp_script('specia-service-modernizr-custom', '/js/modernizr.custom.js');

wp_script('specia-custom-js', '/js/custom.js');

wp_script('specia-dropdown', '/js/dropdown.js');

wp_script('skip-link-focus-fix', '/js/skip-link-focus-fix.js');

}

add_action('wp_enqueue_scripts', 'add_files',1);

wp_enqueue_script()の第5引数にtrueを渡すと自動的に、wp_header()ではなくwp_footer()を呼び出している箇所でjsファイルを読み込むようになってくれるので、それを活用。参考記事はこちら：

WordPressでJavascriptの読み込み位置を調整する

そのほか、実際にはいくつか乗り越えないといけない壁があったので下記に解説する。

各種jsファイルのハンドル名($handle)が分からなくて苦戦した

cssのハンドル名はソースコードの

<link rel='stylesheet' id="XXXXX" href="..." />

1	<link rel='stylesheet' id="XXXXX" href="..." />

のXXXXXなので分かりやすいが、jsファイルにはidの記述が見当たらなかった(参考までに当方、WPのテーマにSpeciaを使用)。ハンドル名がないと、wp_enqueue_script()もwp_deregister_script()もできないので困った。

これについては下記記事が大変参考になったので、ぜひ試してみていただきたい：

プラグインで追加されるJavaScriptやCSSのハンドル名を調べる方法

jqueryの読み込み直し時にだけ、wp_deregister_script()を事前に記述する必要があった

wp_includes配下にあるjquery.jsはどうやらWP側で必ず読み込むようにデフォで設定されているらしく、単にwp_enqueue_script()に渡すだけでは読み込み位置を変えられなかった。

そのため、jquery.jsだけ先にwp_reregister_script()でデフォの読み込み設定を解除してからwp_enqueue_script()にて読み込み直させることで解決。下記記事を参考にした：

wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは

PSI改善結果

モバイルの改善結果はこちら：

パソコンの改善結果はこちら：

モバイルの改善具合は24→42で概ね期待通り。パソコン画面では70→75であまり効果がなかったが微増はした。

これがどれくらいSEOに寄与するかは定かではないが、こういう積み重ねは結構大事なので、SEOやUXのことを考慮して今後もPSI改善の取り組みは続けていこうと思う。仕事で身につけたスキルを定着&別のシーンで活かすためにも。

※言わずもがなですが、functions.phpの編集は慎重に行いましょう