WebライターのPageSpeed Insights対策：64→78に向上

PageSpeed Insightsを使ってWebサイトのパフォーマンスを改善する方法を解説。レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減、「最大コンテンツの描画」要素の改善、プラグインの最適化など、具体的な改善策と結果を紹介。サイトの高速化によるSEOとUXの向上を目指すための知見が満載。

wordweaverpro.com

2026.04.12

公開記事数が70を超え、一区切りついたところで、再びPageSpeed Insightsで分析した結果が次の画像である。

評価は45で、いずれの指標も真っ赤である。今回の調整では、この45を81に戻した。

評価45→81になった決定的な対策

評価を上げるべく、さまざまな思考と試行を繰り返した。振り返れば、大したことをやっていないが、PageSpeed Insightsから「ツリーマップ」を見れることに気づき、眺めていた。chromeの開発者ツールでも確認できる内容だが、たまたまの流れでツリーマップでボトルネックを探していた。

結論を言えば、wordpressのプラグインである「EWWW image optimizer」に頼り過ぎていた。wordpressに画像をアップロードする前に、Squooshで画像サイズを極限までおとした。また複雑な画像を削除し、幾何学的な画像を使うことで、画像サイズをおさえることにした。

「EWWW image optimizer」には有料版があり、さまざまなサイトでは無料版でも高機能ということだったが、圧縮率に限界があったようだ。Squooshは、元画像と圧縮後の画像を比較できるため、圧縮率をぎりぎりまで高められる。

この時点で、すでに対策済みの人にとっては興味がないかもしれない。しかし、同じような悩みを抱えている人向けに、私が行った手順を紹介しておく。

PageSpeed Insightsの評価を上げた施策

ここから紹介する施策は、Webサイト制作を専門とする人なら、おそらく必ずやっているであろうものばかりである。単に、私が軽視しており、また手間がかかるためやってこなかった。PageSpeed Insightsの対策で苦労している同志も多いと考えられるため、紹介しておく。

ツリーマップからGoogleタグの確認・修正

PageSpeed Insightsの診断結果の上に、「ツリーマップを見る」という箇所がある。ここをクリックすると、次のような画面に移行する。

上記はリソースのサイズと使用していないバイト、横棒で示しているカバレッジである。カバレッジの赤い部分が多いと、改善の余地がある。私の場合、GA4タグIDを使い、タグマネージャーIDを設定していなかったため、タグマネージャーIDを設定し、GA4タグIDを削除した。まず、これで少し改善された。

画像サイズの圧縮

以前からの課題で「最大コンテンツの描画」要素への対策があった。画像サイズをもっと減らせますよ、という忠告だが、手間がかかるため、「EWWW image optimizer」に頼っていた。今回、少し時間があったので、思い切って、次の手順で対策した。

◆　複雑なアイキャッチ画像を幾何学的な画像に変更する

1. 画像名も適当だったため、アイキャッチ画像をすべて削除し、いちから作成
2. アイキャッチ画像を1200 × 675に統一し、canvaで調整
3. canvaからダウンロードした画像を、Squooshでサイズ圧縮。特にQualityを極限まで下げた。

画像の右下に、「86%」とあり、これを画質を確認しながら、20まで90%以上圧縮した。Squooshはウェブ版もあるが、アプリを使用している。軽量でサクサク動くので、予想以上に簡単に圧縮できた。

このあと、wordpressにアップするが、「EWWW image optimizer」は有効にしている。「EWWW image optimizer」による圧縮率は低いが、webPが使えるので、様子見で使い続けている。

記事が少なかったので、面倒だったが、やり遂げた。これで評価が81まで復活したのである。

まとめ

PageSpeed Insightsの評価を上げるために、ツリーマップを活用してGoogleタグの修正と画像サイズの圧縮を行った。具体的には、タグマネージャーIDを設定してGA4タグIDを削除し、アイキャッチ画像を幾何学的な画像に変更してサイズを圧縮した。その結果、評価が45から81まで改善した。WordPressプラグインの「EWWW image optimizer」に頼り過ぎず、Squooshを使って画像サイズを極限まで減らすことが効果的であった。

PageSpeed Insightsの分析では、「実際のユーザーの環境で評価する（フィールドデータ）」と「パフォーマンスの問題を診断する（ラボデータ）」の２つあり、フィールドデータは実際のユーザーから匿名で集めているパフォーマンスデータで、ラボデータはシミュレートした環境によって読み込み・分析されたデータである。

ここでは私が取り組んだPageSpeed Insigtsの対策についてまとめる。

PageSpeed Insightsによるサイト高速化がSEOとUXに与える影響

PageSpeed Insightsは、Googleが提供するWebサイトのパフォーマンス分析ツールである。このツールは、Webページの読み込み速度を測定し、改善のためのポイントを特定することを目的としている。サイトの高速化は、SEOとユーザーエクスペリエンスに大きな影響を与える重要な要素である。

検索エンジンは、ページの読み込み速度を順位付けの指標の一つとして使用している。高速なサイトは、検索結果で上位に表示される可能性が高くなる。また、ユーザーにとっても、サイトの読み込み速度は重要である。読み込みに時間がかかるサイトは、ユーザーを離脱させる可能性が高くなる。したがって、サイトの高速化は、SEOとユーザーエクスペリエンスの両方を改善するために不可欠である。

本記事では、筆者が実際に取り組んだPageSpeed Insightsを使用したWebサイトのパフォーマンス改善について解説する。PageSpeed Insightsの主要な指標や改善方法を紹介し、プラグインの影響調査や最適化についても触れる。最後に、今回の改善による効果をまとめ、読者に実践的なアドバイスを提供する。

PageSpeed Insights のおもな指標

以下は、PageSpeed Insightsで使用される、おもな指標とその意味である。

1. First Contentful Paint (FCP):ページの最初のコンテンツが表示されるまでの時間を指す。画像、テキスト、非白色の領域などが対象となる。ユーザーが最初にページの変化を認識できるまでの時間を示す。
2. Speed Index:ページがどの程度スムーズに表示されるかを示す指標。ユーザーの視覚的体験を表し、値が低いほどよりスムーズにコンテンツが表示されることを意味する。
3. Largest Contentful Paint (LCP):メインコンテンツが表示されるまでの時間を指す。テキストブロック、画像、ビデオプレイヤーなど、ユーザーが最も関心のある大きな要素の読み込み時間。
4. Time to Interactive (TTI):ページがユーザーの入力に対して確実に応答できるようになるまでの時間を表す。最小限の JavaScript実行が完了することが条件である。
5. Total Blocking Time (TBT):メインスレッドがブロックされていた合計時間を計測する。スクロールや入力への応答が遅延する原因となる。
6. Cumulative Layout Shift (CLS):ページ読み込み中に予期せぬレイアウトシフトが生じた度合いを示す。ユーザーがリンクをクリックしたりフォームに入力したりする際に、ページレイアウトの変化が少ないほうが望ましい。

これらの指標により、Webサイトのパフォーマンスを包括的に分析し、改善が必要な領域を特定することができる。

初期診断結果と改善方針

初期のPageSpeed Insightsによる診断の結果、パフォーマンス評価は64点であった。この結果を基に、サイトの高速化のためのボトルネックを特定し、改善方針を立てることにした。

PageSpeed Insightsの診断結果では、レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減、「最大コンテンツの描画」要素の改善などが提案されている。これらの提案を参考に、具体的な改善策を実施していく。

レンダリングを妨げるリソースの除外については、重要なJavaScriptやCSSをインラインで配信し、その他のリソースの読み込みを遅らせることで、First Contentful Paint（FCP）やLargest Contentful Paint（LCP）の改善が期待できる。

使用していないJavaScriptの削減では、不要なスクリプトを取り除くことで、ネットワークの通信量を減らし、ページの読み込み速度を向上させることができる。また、「最大コンテンツの描画」要素の改善では、ページ上の主要なコンテンツの読み込みを優先することで、ユーザーエクスペリエンスを向上させることができる。

次に、プラグインが高速化の妨げになっていないかを確認する。各プラグインを「有効化」「無効化」「削除」しながら、評価の変化を比較することで、問題となるプラグインを特定する。この作業により、評価を下げているボトルネックを見つけ出せる。また、プラグインの機能の重複を避けることも重要である。類似した機能を持つプラグインを複数導入すると、パフォーマンスに悪影響を与える可能性がある。必要な機能を精査し、プラグインの整理を行うことで、サイトの効率化を図る。

ただし、PageSpeed Insightsの評価は目安であり、実際のユーザーエクスペリエンスとは異なる場合もあることを考慮する必要がある。評価の改善だけにとらわれるのではなく、ユーザーにとって快適なサイトを目指すことが肝要である。

以上の方針に基づき、具体的な改善策を実施していくことで、Webサイトのパフォーマンスを向上させていく。次章以降では、各改善策の詳細や、プラグインの影響調査について解説する。

▲ レンダリングを妨げるリソースの除外：FCP・LCPの改善 

問題点

PageSpeed Insightsの診断結果により、ページのFirst Paintをリソースがブロックしていることが明らかになった。First Paintとは、ページ上に初めてピクセルが表示されるまでの時間を指し、白い背景に最初のテキストや画像が表示された時点を指す。

原因

この問題の具体的な原因は、Google CDNやCloudflare CDNなどの外部リソースにあると考えられる。これらのリソースは、ページの読み込み速度に影響を与える可能性がある。

解決策：インライン化

PageSpeed Insightsのアドバイスに従い、重要なJavaScriptやCSSをインラインで配信し、それ以外のリソースは遅らせることを検討する。インライン化とは、HTMLファイル自体の中にCSSやJavaScriptのコードを直接記述する方法である。ただし、インライン化するコードが多すぎると転送量が増え、逆効果になる可能性があるため注意が必要である。

PageSpeed Insigtsの診断結果＆アドバイス

ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。

PageSpeed Insigts

ただ、使用しているcocoonの設定で、インライン化されているため、修正せず、様子を見ることにした。

解決策：テーマの変更

テーマを変えてみた。（　）内はPageSpeed Insightsの評価
テーマ：cocoon(67)　⇒　テーマ：twenty twenty-three(100)　⇒　テーマ：cocoon(67)
〇 テーマが原因の可能性はあるが、SEOに特化したテーマであるため、結論は保留

解決策：事前読み込み設定

色々探していたら、cocoonの設定で「事前読み込み設定」があり、Google CDN や Cloudflare CDNのURLを発見した。下記の二つを外して、再分析した。
・ajax.googleapis.com
・cdnjs.cloudflare.com
結果は変わらず、そのため元に戻し、事前に読み込むようにした。

まとめ

レンダリングを妨げるリソースの除外は、FCP・LCPの改善に役立つ可能性がある。重要なリソースのインライン化や、外部リソースの遅延読み込みなどの手法を検討することが重要である。ただし、過度のインライン化は逆効果になる可能性があるため、注意が必要である。また、テーマやプラグインの設定変更が評価に与える影響についても、継続的に調査していく必要があるだろう。

▲ 使用していない JavaScript の削減：LCPの改善

問題点

PageSpeed Insightsの診断結果から、使用していないJavaScriptが存在し、それがLargest Contentful Paint (LCP) の改善を妨げていることが判明した。LCPはメインコンテンツが表示されるまでの時間を指し、テキストブロック、画像、ビデオプレイヤーなど、ユーザーが最も関心のある大きな要素の読み込み時間を表す指標である。

原因

具体的な原因として、GoogleTagManagerが特定された。不要なJavaScriptは、ネットワークの通信量を増加させ、ページの読み込み速度に悪影響を与える可能性がある。

解決策

PageSpeed Insightsのアドバイスに従い、使用していないJavaScriptを削除し、必要になるまでスクリプトの読み込みを遅らせることを検討する。これにより、ネットワークの通信量を減らし、ページの読み込み速度を改善することができる。

具体的には、Cocoonの事前読み込み設定からGoogleTagManagerを削除し、再度PageSpeed Insightsで分析を行った。

PageSpeed Insigtsの診断結果＆アドバイス

使用していない JavaScript を削除して、必要になるまでスクリプトの読み込みを遅らせると、ネットワークの通信量を減らすことができます。

PageSpeed Insigts

結果

GoogleTagManagerを削除した結果、指摘は残ったままであったが、評価は上昇した。ただし、GoogleTagManagerは重要な機能を提供している可能性があるため、完全に削除するのではなく、必要に応じて読み込みを遅らせるなどの対策を検討する必要がある。

まとめ

使用していないJavaScriptの削減は、LCPの改善に有効である。特に、GoogleTagManagerなどの外部スクリプトが読み込み速度に影響を与えている場合、それらの読み込みを最適化することが重要である。ただし、機能性とのバランスを考慮し、適切な対策を講じる必要がある。サイトの目的や要件に応じて、JavaScriptの使用を見直し、不要なスクリプトを削減することが求められる。

▲ 「最大コンテンツの描画」要素：LCPの改善

問題点

PageSpeed Insightsの診断結果において、「最大コンテンツの描画」要素が指摘された。この要素は、ビューポート内で描画された最大のコンテンツ要素を表し、LCPに直接影響を与える。サイトのタイトル周辺には画像は配置していないが、タイトル自体が「要素」として認識されていた。

原因

タイトルが長すぎることが原因で、「最大コンテンツの描画」要素として認識されていると考えられる。LCPの改善のためには、この要素の最適化が必要である。

PageSpeed Insigtsの診断結果＆アドバイス

ビューポート内で描画された最大のコンテンツ要素です。

PageSpeed Insigts

解決策

タイトルを短くすることで、「最大コンテンツの描画」要素の問題を解決できる可能性がある。ただし、SEO対策上、タイトルを一気に短くしすぎると逆効果になる恐れがあるため、段階的に変更していくことが望ましい。

結果

タイトルを短くしたところ、「最大コンテンツの描画」要素の指摘は消えた。ただし、他のページで同様の指摘が表示されるようになったため、サイト全体のタイトル最適化が必要であると判断した。

まとめ

「最大コンテンツの描画」要素は、LCPの改善に直結する重要な要素である。タイトルの長さが原因で指摘されている場合、タイトルを適切な長さに調整することが有効な対策となる。ただし、SEOへの影響も考慮し、慎重に変更を行う必要がある。サイト全体の整合性を保ちつつ、ユーザーにとって最適なタイトルを設定することが求められる。

プラグインの影響調査

プラグイン：Mathjax-Latex

当サイトでは、数式の表示にMathJax-LaTeXプラグインを使用している。このプラグインの設定は、サイトのパフォーマンスとユーザビリティに大きな影響を与える。そこで、当サイトにおけるMathJax-LaTeXの設定についてまとめる。

1. Force Load：設定オフ。数式を使用するページでのみ、MathJaxのJavaScriptを読み込むように設定した。これにより、数式を使用しないページの読み込み速度を向上させている。
2. Default \(\) syntax attribute：\(\)ショートコードのデフォルトの動作は、インライン表示に設定している。これにより、数式がテキストの流れの中に自然に組み込まれる。ただし、一部のページでは、数式の性質に応じて、ディスプレイ表示を使用している場合もある。
3. Use wp-latex syntax?：設定オフ。$latex$ 構文の使用は、現在のところ無効にしている。これは、他のプラグインとの互換性を確保するためである。今後、必要に応じてこの設定を変更する可能性がある。
4. Use MathJax CDN Service?：設定オン。当サイトでは、MathJax CDNを使用しています。これにより、サーバーの負荷を減らし、安定したパフォーマンスを維持しています。
5. MathJax Configuration：MathJaxの詳細な設定は、デフォルトの状態である。これにより、ほとんどの状況で最適な数式表示が得られる。

これらの設定は、ユーザーの皆様に最適なエクスペリエンスを提供するために選択した。今後も、フィードバックを参考にしながら、設定の継続的な最適化を行う。

プラグイン：EWWW Image Optimizer

設定の「遅延読み込み：画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します。」を有効にしていたため、テーマ：cocoonのLazy Loadと競合してしまい、サムネイル画像が一切表示されなくなった。設定を解除した。

最新の結果と今後の継続的改善

ここまでの対策をした最新の結果である。コンテンツを増やしているため、定期的にチェックして、診断結果を掲載する。

この記事では、PageSpeed Insightsを使用したWebサイトのパフォーマンス改善について紹介した。レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減などの対策により、サイトのパフォーマンスが向上し、ユーザーにより良いエクスペリエンスを提供できるようになったと考えられる。今後も継続的な改善が必要であるが、現時点での最新の結果を紹介していきたい。

まとめ

本記事では、PageSpeed Insightsを使用したWebサイトのパフォーマンス改善について解説した。初期診断の結果を基に、レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減、「最大コンテンツの描画」要素の改善など、具体的な改善策を実施した。

また、プラグインの影響調査や最適化も行った。PageSpeed Insightsの評価は目安であるが、ユーザーにとって快適なサイトを目指すことが肝要である。今回の改善により、Webサイトのパフォーマンスが向上し、ユーザーエクスペリエンスの改善が期待される。

今後も継続的な改善とモニタリングが必要である。