初めに
2021年1月、このブログのトップページをPageSpeed Insightsで測ったところ、PCは49点、モバイルは8点でした。WordPressのプラグイン構成を変えた後はPCが72点、モバイルが22点でした。以下はそのときの設定と測定結果です。
対策方針
初回表示に必要なCSS・JavaScript・画像を先に扱い、画面下の画像は必要になるまで読み込みを遅らせる方針にしました。ブラウザーは最初の表示に関係するCSSやJavaScriptの処理で待たされることがあり、画面内の主要な表示要素として計測される画像（LCPの対象）まで遅らせると、かえって見えるのが遅くなります。
もう一つ試したのがキャッシュです。ページキャッシュは生成済みのHTMLを再利用し、ブラウザーキャッシュは訪問者の端末でCSSや画像などを再利用します。効く箇所が異なるため、表示が遅いときはHTMLの応答と、その後の描画を分けて確認します。
導入するプラグインの選定
- AutoptimizeでHTMLとCSSの最適化、画像の遅延読み込みを担当。
- Async JavaScriptでJavaScriptの実行を遅らせる設定を担当。
- W3 Total Cacheでページ・データベース・オブジェクト・ブラウザーのキャッシュを担当。
プラグイン導入
使っていなかったプラグインを無効化・削除し、上の3つを設定しました。複数の変更をまとめてから測り直したため、どの設定が何点分効いたかはこの記録からは分かりません。
Autoptimize
当時はHTMLとCSSの最適化を有効にし、対象のCSSをHTMLに埋め込みました。JavaScriptの最適化はオフにしてAsync JavaScriptに任せました。画像の遅延読み込みを有効にし、使っていなかったGoogle Fontsの読み込みも外しました。
いま同様の画像設定を試すなら、先にPageSpeed InsightsでLCPの対象を確認します。最初の画面のメイン画像が対象なら遅延読み込みの除外を確認し、画面下の画像だけを対象にします。GoogleのLCP最適化ガイド
Async JavaScript
当時の設定画面では、全体の方式は Async、jQueryとAutoptimize連携欄はそれぞれ Defer でした。async を指定したスクリプトは取得でき次第実行され、defer を指定した外部スクリプトはHTMLの解析後に実行されます。
いま試す場合は、先にテーマやプラグインがjQueryを呼ぶ場所を確認します。jQueryより後ろにあるインラインスクリプトが読み込み中に実行される場合、jQueryだけを defer にすると呼び出しが先行します。検証環境で設定を一つずつ変え、メニューや目次の開閉と、コンソールの jQuery is not defined を確認します。WordPressのスクリプト登録と依存関係
W3 TOTAL CACHE
ページキャッシュは「ディスク：拡張」、データベースとオブジェクトのキャッシュは「ディスク」に設定し、ブラウザーキャッシュも有効にしました。画像の遅延読み込みはAutoptimizeで設定済みだったため、W3 Total Cacheの完了画面では「なし」です。設定時のページキャッシュの試験では、最初の応答までの時間が未設定で約1.02秒、選んだ「ディスク：拡張」で約1.12秒でした。この画面だけでキャッシュが応答を速めたとは判断できません。
結果を測定
2021年1月のトップページを測り直したところ、PCは49点から72点、モバイルは当時の記録で8点から22点になりました。掲載した画像で確認できるのは、変更前のPC49点と、変更後のPC72点・モバイル22点です。変更後のモバイルでは、最初に何かが表示されるまでのFCPが1.4秒、画面内の主要コンテンツが表示されるまでのLCPが11.6秒でした。
スコアはLighthouseのラボ計測です。当時の試行回数、回線条件、キャッシュの状態は記録していません。掲載した結果画面では実ユーザーデータを取得できていません。PageSpeed Insightsの測定結果の読み方
