このウェブサイトはWordPressで作られていますが、投稿ページのパフォーマンスを上げるべくパフォーマンス改善プラグインのWP Rocketで諸々調整した結果、PageSpeed Insightsのスコアを約20点程度改善することができました。
WP Rocketは表示速度やパフォーマンスを改善することのできる有料のプラグインとなりますが、細かい調整ができ、かゆいところに手が届く設計になっていて、何年も利用している非常におすすめのプラグインです。
WordPressのテーマ、利用しているプラグイン、サーバー環境などにより、同じように設定したからといって同程度の改善が見込まれるということではありません。あくまで参考としてご了承ください。
目次
結論から。パフォーマンススコアが約20点程度上昇
まずは結論からお伝えすると、実施前はPageSpeed Insightsのスコアは65点程度でした。
これが85点（3回測定の平均）まで上昇しました。
何をどのようにして改善したのか、詳しく見ていきましょう。
PageSpeed Insightsの診断結果を見ながら対応していく
まずはPageSpeed Insightsの結果から、特に気になる箇所は以下の3点です。
- First Contentful Paint(FCP): 3.7秒
- Largest Contentful Paint(LCP): 6.5秒
- Speed Index: 4.8秒
FCPはページが最初にコンテンツを描画するまでの時間。ユーザーに読み込みが始まったことを示します。FCPが遅いとページに何も表示されていない時間が長いため、ユーザー体験が悪くなり、離脱してしまう可能性が高くなります。
次にLCPはページの主要なコンテンツが完全に表示されるまでの時間。ユーザーにとって主要なコンテンツが表示されたことを示します。PageSpeed Insightsでは「最大コンテンツの描画」と示されています。
そして、Speed Indexはページの見えている部分がどれだけ早く表示されるかを示す指標。この値が高いと、ページが完全に表示されるまでの時間が長く感じてしまいます。
改善箇所を確認
次に、PageSpeed Insightsで現在どこがボトルネックになっているかを確認しました。
- レンダリングを妨げるリソースの除外
- 「最大コンテンツの描画」要素
- CSS の最小化
- 使用していない CSS の削減
- 使用していない JavaScript の削減
- メインスレッド処理の最小化
- 最新ブラウザに従来の JavaScript を配信しないようにしてください
- 画像要素で
widthとheightが明示的に指定されていない - 次世代フォーマットでの画像の配信
- 静的なアセットと効率的なキャッシュ ポリシーの配信
- スクロール パフォーマンスを高める受動的なリスナーが使用されていません
- オフスクリーン画像の遅延読み込み
こんな感じで、優先度の高い赤マークが7個、できればやったほうがいい黄色マークが5個、合計12個の診断結果となりました。たくさんあって、正直改善できる気がしませんでした……。
「レンダリングを妨げるリソースの除外」の多くはWP Rocketの設定で対応可能
効果が大きい対策から順に並んでいるため、上から対応していくのが正しいです。まずは「レンダリングを妨げるリソースの除外」を確認しました。
ズラッと多くのファイルが書いてあります。実際の転送サイズと、対応することでこのくらいは減らせるだろう、というファイルサイズが書いてあります。
上部にWP Rocketの「Remove Unused CSS」と「Load JavaScript deferred」を有効にすることでこの問題に対応できる、と書いてあるため、管理画面からWP Rocketの設定画面を見てみます。
ちなみに、すべての作業はテスト環境で行って問題ないことを確認した上で、本番環境へ反映しています。テスト環境がない場合は是非構築することをおすすめします。
「Remove Unused CSS」で使っていないCSSを削除してくれる
この機能が素晴らしい。使われていないCSSとスタイルシートを削除し、各ページで使用されているCSSのみを保持してくれるという機能です。
Remove Unused CSS – WP Rocket Knowledge Base
設定箇所はWP Rocket→File Optimization→Optimize CSS deliveryにあります。
今回は特に設定しませんでしたが、「CSS safelist」に記述することで特定のcssファイル、classやid等を指定することで、取り除かないよう除外設定することも可能です。
「Load JavaScript deferred」でJavaScriptを遅延読み込みできる
その名の通り、JavaScriptを遅延読み込みしてくれる機能。これにより、ブラウザはページをレンダリングし、後でスクリプトを読み込むようになります。
Load JavaScript deferred – WP Rocket Knowledge Base
チェックして保存したところ、トップページの上部に設定している動きのある箇所でエラーが発生しました。
よって、該当するJavaScriptを除外しています。また、トップページのURLも一緒に設定することで、エラーが発生しないことを確認できました。
「最大コンテンツの描画」要素はローディング画像を調整することで対応
LCPを示す指標は、レンダリング遅延が原因となっていることがわかります。
最大コンテンツが見出しテキストであることからも、読み込み時間はさほど問題ではなさそうです。レンダリングのどの部分で問題が起きているのかを探っていきます。
原因はローディング
ページ読み込み時にローディングを表示させ、すべてのコンテンツが読み込み終わった後にコンテンツを表示させる、という機能をカスタマイズしていました。結果、これが原因でレンダリング遅延が起きていることが判明しました。
ローディングをなくすのは避け、CSSで設定していた箇所を調整しました。
- コンテンツは見せる
- 透明度を0.1に設定し限りなく透明に近い表示に変更
これにより、LCP改善に繋がりました。
opacityが0だとLCPに影響が出るようです。以下のブログが大変参考になりました。
その他WP Rocketの対応箇所
WP Rocketの管理画面からいくつか対応しました。
CSSファイルをミニファイ化
「Minify CSS files」は、ファイルサイズを小さくするために空白とコメントを削除します。
基本的には全CSSファイルをミニファイするのが望ましいと言えますが、もしミニファイしないCSSファイルがある場合、除外設定に追加します。
JavaScriptファイルをミニファイ化
「Minify JavaScript files」も同様に、ファイルサイズを小さくするために空白とコメントを削除します。
全部のJavaScriptファイルをミニファイしたところ、Consoleエラーとなったファイルがあったため、除外設定に追加しました。直接ファイルのパスを設定したり、外部JSの場合はドメインを指定しても除外できます。
JavaScriptの読み込み遅延
「Delay JavaScript execution」はスクロールやクリックといったユーザー側の操作があるまでJavaScriptファイルの読み込みを遅延させることで、パフォーマンスを向上させる機能です。
こちらも先程同様、エラーとなったJavaScriptを指定し、遅延読み込みを実施しないように設定しました。
対応した結果、診断は3項目まで減少
これでWP Rocket側を保存し、キャッシュをクリアして再度PageSpeed Insightsで診断します。
- レンダリングを妨げるリソースの除外
- 「最大コンテンツの描画」要素
- 画像要素で
widthとheightが明示的に指定されていない
優先度の高い赤マークは7個→2個、できればやったほうがいい黄色マークは5個→1個で、合計12個→3個まで改善されました！
そしてパフォーマンススコアは3回診断した結果、
- 1回目: 84点
- 2回目: 85点
- 3回目: 88点
ということで平均85点（小数点切り捨て）となりました。
あと2点で緑色になるのに……悔しい。
ローディング効果を変更したため見た目に若干影響
今まではレンダリングが全部完了→コンテンツを表示 としていましたが、ご紹介の通りスコア改善のためローディングの挙動を変えました。これにより、ローディング中にコンテンツ領域が薄く見えるようになり、特にモバイルのメニュー箇所が見えてしまっています。
対象サイトや判断は異なると思いますが、この程度であれば許容できる範囲としました。
テーマを変えてみてわかることもある
試しに、テスト環境で現在のテーマからWordPress公式のTwenty Twenty-fourに変えて、PageSpeed Insightsを診断してみました。
もちろんこのまま利用できないため調整は必要ですが、LCP以外ですべていい数字を叩き出しています。テーマ変更も視野に入れようかと思うほどですね。
まとめ
現在のテーマのCSS、JavaScriptを最適化するだけでも20点程スコアアップにつながる事例としてご紹介しました。
本来ならば、不要なファイルがないか調査して、テーマを整理した後で、このような最適化を行うのが望ましいと言えます。
今回はWP Rocketプラグインを利用することで、除外を使って比較的簡単に管理画面から最適化が行えるというのがおわかりいただけたかと思います。PageSpeed Insightsで高得点をマークすることだけが目的ではないですが、ウェブページのパフォーマンスを示す上で一つの指標として利用されているのも事実。表示速度最適化のための参考になれば幸いです。
少し前の記事ですが、100点をスコアしたときの記事もご参考ください。
パフォーマンス改善の結果PageSpeed Insightsで97点をマーク
コメントを残す