本記事は、PageSpeed Insightsを使用してWebサイトのパフォーマンスを改善する方法について解説するものである。
サイトの高速化がSEOとユーザーエクスペリエンスに与える影響を説明し、レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減、「最大コンテンツの描画」要素の改善など、具体的な改善策を提示する。
また、プラグインの影響調査や最適化の重要性についても言及する。記事を通して、継続的な改善とモニタリングの必要性を読者に理解してもらうことを目的とする。
PageSpeed Insightsは、Googleが提供するWebサイトのパフォーマンス分析ツールで、Webページの読み込み速度を測定し、改善のポイントを分析する。携帯電話（モバイル端末）とデスクトップ（PC）に分けて分析され、携帯電話（モバイル端末）のほうが低く評価されることが多く、携帯電話（モバイル端末）を中心に改善策を模索していく。
PageSpeed Insightsの分析では、「実際のユーザーの環境で評価する（フィールドデータ）」と「パフォーマンスの問題を診断する（ラボデータ）」の２つあり、フィールドデータは実際のユーザーから匿名で集めているパフォーマンスデータで、ラボデータはシミュレートした環境によって読み込み・分析されたデータである。
ここでは私が取り組んだPageSpeed Insigtsの対策についてまとめる。
PageSpeed Insightsによるサイト高速化がSEOとUXに与える影響
PageSpeed Insightsは、Googleが提供するWebサイトのパフォーマンス分析ツールである。このツールは、Webページの読み込み速度を測定し、改善のためのポイントを特定することを目的としている。サイトの高速化は、SEOとユーザーエクスペリエンスに大きな影響を与える重要な要素である。
検索エンジンは、ページの読み込み速度を順位付けの指標の一つとして使用している。高速なサイトは、検索結果で上位に表示される可能性が高くなる。また、ユーザーにとっても、サイトの読み込み速度は重要である。読み込みに時間がかかるサイトは、ユーザーを離脱させる可能性が高くなる。したがって、サイトの高速化は、SEOとユーザーエクスペリエンスの両方を改善するために不可欠である。
本記事では、筆者が実際に取り組んだPageSpeed Insightsを使用したWebサイトのパフォーマンス改善について解説する。PageSpeed Insightsの主要な指標や改善方法を紹介し、プラグインの影響調査や最適化についても触れる。最後に、今回の改善による効果をまとめ、読者に実践的なアドバイスを提供する。
PageSpeed Insights のおもな指標
以下は、PageSpeed Insightsで使用される、おもな指標とその意味である。
- First Contentful Paint (FCP):ページの最初のコンテンツが表示されるまでの時間を指す。画像、テキスト、非白色の領域などが対象となる。ユーザーが最初にページの変化を認識できるまでの時間を示す。
- Speed Index:ページがどの程度スムーズに表示されるかを示す指標。ユーザーの視覚的体験を表し、値が低いほどよりスムーズにコンテンツが表示されることを意味する。
- Largest Contentful Paint (LCP):メインコンテンツが表示されるまでの時間を指す。テキストブロック、画像、ビデオプレイヤーなど、ユーザーが最も関心のある大きな要素の読み込み時間。
- Time to Interactive (TTI):ページがユーザーの入力に対して確実に応答できるようになるまでの時間を表す。最小限の JavaScript実行が完了することが条件である。
- Total Blocking Time (TBT):メインスレッドがブロックされていた合計時間を計測する。スクロールや入力への応答が遅延する原因となる。
- 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などの外部リソースにあると考えられる。これらのリソースは、ページの読み込み速度に影響を与える可能性がある。
cssやjavascriptをhtmlファイルに直接記述する（インライン化という）。ただし、多すぎると転送量が増えて逆効果なので、ほどほどにする。
〇 具体的な原因
Google CDN や Cloudflare CDN
解決策：インライン化
PageSpeed Insightsのアドバイスに従い、重要なJavaScriptやCSSをインラインで配信し、それ以外のリソースは遅らせることを検討する。インライン化とは、HTMLファイル自体の中にCSSやJavaScriptのコードを直接記述する方法である。ただし、インライン化するコードが多すぎると転送量が増え、逆効果になる可能性があるため注意が必要である。
PageSpeed Insigtsの診断結果＆アドバイス
ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insigts
ただ、使用しているcocoonの設定で、インライン化されているため、修正せず、様子を見ることにした。
・First Paint とは? First Paintは、ページ上に初めてピクセルが表示されるまでの時間を指します。これは完全にページが読み込まれる前の、ページの表示が始まる最初の目印となります。白い背景に最初のテキストや画像が表示された時点がFirst Paintに該当します。
・インラインで配信とは? 通常、HTMLとは別のファイルとしてCSSやJavaScriptをサーバーから取得しますが、インラインで配信する場合は、HTMLファイル自体の中にCSSやJavaScriptのコードを直接記述する方法のことです。
解決策：テーマの変更
テーマを変えてみた。（ ）内は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は、ネットワークの通信量を増加させ、ページの読み込み速度に悪影響を与える可能性がある。
〇 具体的な原因
GoogleTagManager
解決策
PageSpeed Insightsのアドバイスに従い、使用していないJavaScriptを削除し、必要になるまでスクリプトの読み込みを遅らせることを検討する。これにより、ネットワークの通信量を減らし、ページの読み込み速度を改善することができる。
具体的には、Cocoonの事前読み込み設定からGoogleTagManagerを削除し、再度PageSpeed Insightsで分析を行った。
PageSpeed Insigtsの診断結果＆アドバイス
使用していない JavaScript を削除して、必要になるまでスクリプトの読み込みを遅らせると、ネットワークの通信量を減らすことができます。
PageSpeed Insigts
同じく、cocoonの事前読み込み設定に記載されていたので、削除した。
⇒ 指摘は残ったまま。評価はなぜか上がる。⇒ 元に戻した。
結果
GoogleTagManagerを削除した結果、指摘は残ったままであったが、評価は上昇した。ただし、GoogleTagManagerは重要な機能を提供している可能性があるため、完全に削除するのではなく、必要に応じて読み込みを遅らせるなどの対策を検討する必要がある。
まとめ
使用していないJavaScriptの削減は、LCPの改善に有効である。特に、GoogleTagManagerなどの外部スクリプトが読み込み速度に影響を与えている場合、それらの読み込みを最適化することが重要である。ただし、機能性とのバランスを考慮し、適切な対策を講じる必要がある。サイトの目的や要件に応じて、JavaScriptの使用を見直し、不要なスクリプトを削減することが求められる。
▲ 「最大コンテンツの描画」要素：LCPの改善
問題点
PageSpeed Insightsの診断結果において、「最大コンテンツの描画」要素が指摘された。この要素は、ビューポート内で描画された最大のコンテンツ要素を表し、LCPに直接影響を与える。サイトのタイトル周辺には画像は配置していないが、タイトル自体が「要素」として認識されていた。
原因
タイトルが長すぎることが原因で、「最大コンテンツの描画」要素として認識されていると考えられる。LCPの改善のためには、この要素の最適化が必要である。
サイトのタイトル周辺には画像はないが、タイトル周辺が「要素」として表示されていた。
PageSpeed Insigtsの診断結果＆アドバイス
ビューポート内で描画された最大のコンテンツ要素です。
PageSpeed Insigts
解決策
タイトルを短くすることで、「最大コンテンツの描画」要素の問題を解決できる可能性がある。ただし、SEO対策上、タイトルを一気に短くしすぎると逆効果になる恐れがあるため、段階的に変更していくことが望ましい。
結果
タイトルを短くしたところ、「最大コンテンツの描画」要素の指摘は消えた。ただし、他のページで同様の指摘が表示されるようになったため、サイト全体のタイトル最適化が必要であると判断した。
・タイトルを短くしたら、表示されなくなった。
・今度はほかのページが表示されたが、SEO対策上、一気に短くすると逆効果の可能性があるため、様子を見ることにした。
まとめ
「最大コンテンツの描画」要素は、LCPの改善に直結する重要な要素である。タイトルの長さが原因で指摘されている場合、タイトルを適切な長さに調整することが有効な対策となる。ただし、SEOへの影響も考慮し、慎重に変更を行う必要がある。サイト全体の整合性を保ちつつ、ユーザーにとって最適なタイトルを設定することが求められる。
プラグインの影響調査
PageSpeed Insigts の評価などに大きな悪影響を及ぼさないプラグインを一つひとつ確認し、有効化する。
EWWW Image Optimizer：有効化
XML Sitemap Generator for Google：有効化
Mathjax-Latex：JavaScriptライブラリのため、読み込み速度に影響を与える。ただし、必要なプラグインであるため、詳細設定でカバーする。
プラグイン：Mathjax-Latex
当サイトでは、数式の表示にMathJax-LaTeXプラグインを使用している。このプラグインの設定は、サイトのパフォーマンスとユーザビリティに大きな影響を与える。そこで、当サイトにおけるMathJax-LaTeXの設定についてまとめる。
- Force Load：設定オフ。数式を使用するページでのみ、MathJaxのJavaScriptを読み込むように設定した。これにより、数式を使用しないページの読み込み速度を向上させている。
- Default \(\) syntax attribute：\(\)ショートコードのデフォルトの動作は、インライン表示に設定している。これにより、数式がテキストの流れの中に自然に組み込まれる。ただし、一部のページでは、数式の性質に応じて、ディスプレイ表示を使用している場合もある。
- Use wp-latex syntax?：設定オフ。$latex$ 構文の使用は、現在のところ無効にしている。これは、他のプラグインとの互換性を確保するためである。今後、必要に応じてこの設定を変更する可能性がある。
- Use MathJax CDN Service?：設定オン。当サイトでは、MathJax CDNを使用しています。これにより、サーバーの負荷を減らし、安定したパフォーマンスを維持しています。
- MathJax Configuration：MathJaxの詳細な設定は、デフォルトの状態である。これにより、ほとんどの状況で最適な数式表示が得られる。
これらの設定は、ユーザーの皆様に最適なエクスペリエンスを提供するために選択した。今後も、フィードバックを参考にしながら、設定の継続的な最適化を行う。
プラグイン：EWWW Image Optimizer
設定の「遅延読み込み：画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します。」を有効にしていたため、テーマ：cocoonのLazy Loadと競合してしまい、サムネイル画像が一切表示されなくなった。設定を解除した。
最新の結果と今後の継続的改善
ここまでの対策をした最新の結果である。コンテンツを増やしているため、定期的にチェックして、診断結果を掲載する。
この記事では、PageSpeed Insightsを使用したWebサイトのパフォーマンス改善について紹介した。レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減などの対策により、サイトのパフォーマンスが向上し、ユーザーにより良いエクスペリエンスを提供できるようになったと考えられる。今後も継続的な改善が必要であるが、現時点での最新の結果を紹介していきたい。
まとめ
本記事では、PageSpeed Insightsを使用したWebサイトのパフォーマンス改善について解説した。初期診断の結果を基に、レンダリングを妨げるリソースの除外、使用していないJavaScriptの削減、「最大コンテンツの描画」要素の改善など、具体的な改善策を実施した。
また、プラグインの影響調査や最適化も行った。PageSpeed Insightsの評価は目安であるが、ユーザーにとって快適なサイトを目指すことが肝要である。今回の改善により、Webサイトのパフォーマンスが向上し、ユーザーエクスペリエンスの改善が期待される。
今後も継続的な改善とモニタリングが必要である。
コメント