Google PagesSpeed Insights：スコアとサイト機能のバランスをとるための初心者ガイド

1秒ごとにオンラインでカウントされ、Webページの速度はSEOのパフォーマンス、トラフィック、コンバージョンに直接影響します。サイトのパフォーマンスを明確に把握する最も簡単な方法は、Google PagesSpeed Insights（Google PSI）でテストすることです。

これは、パフォーマンスを向上させるための全体的なスコア（100のうち）と実用的なヒントを提供する無料のWebパフォーマンス分析ツールです。そして、ケーキのアイシングは、数秒で結果が得られることです！

一般的な神話： 「速いウェブサイトを持つために、PSIで100/100を獲得する必要があります。」

それは一般的な誤解です。ハイスコ​​アは優れていますが、最も重要なのはGoogle PSIでCore Web Vitals（CWV）評価を渡すことです。

しかし、なぜ？

Core Web Vitalsは、Googleによって作成された3つのメトリックのセットで、ページ上の実際のユーザーエクスペリエンスを測定します。これらのメトリックはGoogleのコアランキングシステムの一部になり、検索エンジンの視認性に直接影響します。

このガイドは、Webパフォーマンスのベストプラクティスを適用することと、訪問者にとって重要な機能とデザインを維持することとの適切なバランスを見つけるのに役立ちます。

Google PagesSpeed Insightsとは何ですか？

PageSpeed Insights（PSI）は、Webページのパフォーマンスを分析し、改善のための具体的な提案を提供するGoogleが作成した無料のツールです。灯台メトリックに基づいた詳細なフィードバックとともに、パフォーマンススコアを提供します。 Lighthouseは、Webページの品質とユーザーエクスペリエンスを向上させるために設計されたオープンソースツール（Googleも開発）です。

グローバルスコアの例と、Google PSIで見つけることができるいくつかの重要な指標を示します。

Google PageSpeed Insightsで使用される重要な灯台メトリック

Google Psiは灯台を使用してパフォーマンススコアを計算します。これらのスコアは、主にコアWebバイタルや、ユーザーエクスペリエンスと読み込み行動を評価するのに役立つその他の重要なメトリックに基づいています。

各KPIについて、次のスコアカラーが次のとおりです。

• 0〜49（赤）：貧しい

• 50〜89（オレンジ）：改善が必要です

• 90〜100（緑）：良い

そして、ここにメトリックがあります。

1. 最大のコンテンツペイント（LCP）は、メインのコンテンツの負荷速度を教えてくれます。

例：ブログ投稿のヒーローイメージとタイトルが画面に明確に表示されるとき。

2. 次のペイント（INP）への相互作用は、誰かがクリックまたはタップするとサイトがどれだけ速く反応するかを示します。

例： 「カートに追加」をタップすると、ボタンが即座に応答するか、小さな遅れがある可能性があります。

3. 累積レイアウトシフト（CLS） ロード中にページの安定性を測定します。

例：レイアウトがシフトしたときにリンクをクリックしようとしている（広告のように）、誤って他のものをタップします。

4. 最初のコンテンツペイント（FCP）は、コンテンツの最初のビットが表示されるまでの時間を計算します。

例：ページに着地した直後にロゴが表示されます。

5. 最初のバイト（TTFB）までの時間 サーバーが応答するのにかかる時間を示します。

例：リンクをクリックすると、ロードが開始される前に一時停止があります。

6. 合計ブロッキング時間（TBT）は、ブラウザが入力に応答するのにどれくらいの時間がかかるかを分析します。

例：ページはロードされているように見えますが、スクロールまたはクリックにすぐに反応しません。

7. Speed Index（SI）は、ページ上のすべてが視覚的に完了する速さを教えてくれます。

例：コンテンツは、チャンクをロードする代わりにスムーズに埋めます。

コアWebバイタル評価がパフォーマンススコアよりも重要な理由

Core Web Vitals（CWV）は、Googleのランキングシグナルの一部です。つまり、SEOとWebサイトがGoogleでどのようにランク付けされるかに影響を与える可能性があります。 CWV評価で「良い」スコアを達成するための取り組みは、サイトが訪問者に迅速で安定した応答性のあるエクスペリエンスを提供することを意味し、検索エンジンがあなたに報酬を与えます。

Core Web Vitalsの最適化は、WordPress機関にとっても重要です。それらのほとんどは、グリーンで得点するサイトの配信にコミットしています。たとえば、リヨンにAgence Knがある場合はそうです。創設者のトーマス・ボードリーは次のように説明しています。

コアWebバイタルは、品質アプローチの中心にあります。開発中に定期的にテストして、パフォーマンスとスムーズなユーザーエクスペリエンスを確保します。ライブになる直前に、WPロケットをアクティブにして結果を最大化します。私たちは常に、パフォーマンスとアクセシビリティの90以上のスコア、ベストプラクティスとSEOで100以上のパフォーマンス保証とともに、ページスピードの洞察スコアをクライアントと共有しています。

診断セクション：サイトのパフォーマンスを高めるための実用的なヒント

PageSpeed Insightsは、サイトのパフォーマンスを向上させるための特定のアクションをリストする詳細な診断セクションを提供します。それは問題にフラグを立て、彼らが重要な理由を説明し、それらを修正するために何をすべきかを提案します。 PSIは、サイトがWordPressに基づいて構築されたときに検出し、プラグインを使用して監査のいくつかの問題を簡単に修正することをお勧めします。

以下は、未使用のJavaScriptを削減し、レンダリングブロッキングリソースを排除し、テキスト圧縮を有効にするなど、実行すべきことのリストを備えたWebパフォーマンス診断セクションの例です。

問題を解決すると、合格した監査セクションに移動してグリーンになります。

バランスの取れたレンズを介してGoogle PSIを読む

Google PagesSpeed Insightsは、どの要素がパフォーマンスに影響し、それらを修正する方法を削除するのではなく、どのように修正するかを特定するのに役立ちます。

たとえば、チャットウィジェット、スライダー、埋め込みビデオなどの機能的な機能は、サイトに値を追加しますが、リソースが多いことが多く、適切に最適化されていないとパフォーマンスを損なう可能性があります。

PSIがホームページスライダーにフラグを立てることを想像してください。

次のような問題を強調するかもしれません：

• 画像は圧縮されていないか、適切に最適化されていません

• 画像は次世代形式で提供されていません（webpやavifなど）

• 未使用のCSSは負荷時間の増加です
  

psiは、スライダーを削除することを提案していません。代わりに、画像は、適切な形式、適切なサイズ、よく圧縮されているWebに対して、画像をより適切に準備する必要があることを指摘しています。

未使用のCSSは、不要なコードを削除するように特別に設計されたオンラインツールまたはWordPressプラグインを使用してクリーンアップできます。これらのWebパフォーマンスの最適化が完了したら、再度テストを実行します。問題が解決または改善されたことがわかります。

WPCHEF.FRのWordPressの専門家であるNicolas Richerは次のように述べています。

Google PSIで70または80を取得することはすでに良い兆候です。あなたはあなたの仕事をかなりうまくやったことを知っています！問題は、ラボデータとユーザーが実際にサイトを体験する方法との間には大きな違いがあるということです。単純なパンフレットサイトと比較して、複雑なWooCommerceストアやページビルダーが多いサイトなど、グリーンスコアを打つことははるかに難しくなる可能性があることに注意してください。したがって、スコアがオレンジ色になっている場合は、パニックに陥らないでください。物事を文脈に入れます。あなたのサイトが最適化されていないことを意味する可能性があります。そして最後のことは、モバイルパフォーマンスが最も重要なので、モバイルタブからテストを実行してください。デスクトップはセカンダリです。

Google PSIスコアに影響するもの

これらの5つの一般的な問題は、Google PSIスコアを傷つけることが多く、全体的なパフォーマンス結果に最大の影響を与えます。

1。キャッシュと圧縮の欠如

適切なキャッシングとテキスト圧縮がなければ、サイトは毎回すべてをゼロからリロードする必要があり、サーバーの負荷を増やし、ページ配信を遅くする必要があります。

例：ブラウザキャッシュのないサイトにより、すべての訪問者がすべてCSSファイルとJSファイル全体を再ダウンロードしても、変更していなくても、ファイルが変更されていない場合があります。それはあなたのサイトを遅くし、Google PSIは結果として改善の余地を特定します。

2。最適化されていないコード（CSSおよびJS）

肥大化または未使用のCSSおよびJavaScriptファイルは、メインコンテンツがどれだけ速く表示されるかを遅らせることができます。

例：600 kbの未使用のJavaScriptをロードするホームページは、可視コンテンツをモバイルで数秒ずつレンダリングします。 Google PSIは、おそらくJSを最適化し、代わりに必須のスクリプトに優先順位を付けるように求めます。

3。大きな画像とビデオ

重いメディアファイルは、特に遅い接続でのロードに時間がかかり、速度と視覚の安定性の両方に影響します。

例：JPG形式の3 MBヒーローイメージにより、最大のコンテンツが最後にロードされ、最大のコンテンツ型塗料（LCP）メトリックが失敗します。 Google PSIは、この画像を圧縮し、WebPやAvifなどの軽い形式に変換することをお勧めします。

4.外部HTTP要求が多すぎる（サードパーティスクリプトを含む）

各外部要求は、特に遅いサーバーまたは遠いサーバーでファイルがホストされている場合、ブラウザにより多くの作業を追加します。

例：広告、チャットウィジェット、ソーシャルフィードなどの複数のサードパーティスクリプトがレンダリングをブロックし、Google PSIスコアをドラッグします。

5.過剰または不十分に管理されていないプラグイン

あまりにも多くのプラグイン、特に時代遅れまたは非効率的なプラグインは、コードを膨らませ、互いに競合する可能性があり、パフォーマンスが低下します。

例：20を超えるアクティブなプラグインを備えたWooCommerceストアには、すべてのページの負荷を遅くする冗長なスクリプトとスタイルが含まれています。 Google PSIは、未使用のコードを削減したり、メインスレッドの作業を最小限に抑えるように頼むかもしれません。

Google PSIからの実用的な最適化は、平易な英語で

Google PagesSpeedの洞察はしばしばあなたに技術用語を投げますが、ここでそれらが本当に意味することと、2つのWordPressプラグインで簡単に修正する方法があります：WP Rocket and Imagify。これらのツールは協力してPSIによってフラグが付けられたほとんどの問題に対処し、グリーンスコアをより簡単にヒットするのに役立ちます。

WP Rocketは、Core Web Vitalsを即座に改善できるWordPressの最も強力でありながら最も簡単なパフォーマンスプラグインです。キャッシュ、圧縮、縮小、怠zyなロードなど、アクティベーション時にWebパフォーマンスのベストプラクティスの80％を適用します。コードの1行に触れる必要はありません。高度な調整の場合、繰延javaScriptの読み込みや未使用のCSSの削除などのパフォーマンス機能をワンクリックで有効にすることができます。

Imagifyは、WordPressの最も簡単な画像最適化プラグインです。品質の損失なしに画像を圧縮し、WebPやAvifなどの次世代形式に自動的に変換します。結果：指を持ち上げることなく、画像ファイルが小さく、読み込み時間が高く、ユーザーエクスペリエンスが滑らかになります。

両方のツールについてもっと知っているので、PSIの推奨事項の一部を修正および最適化するのに役立つ方法を見てみましょう。

1.キャッシュを実装します

Google PSIでのパフォーマンス警告：効率的なキャッシュポリシーで静的資産を提供します。

それが意味すること：ウェブサイトページのバージョンを保存して、繰り返し訪問者のためにより速く読み込まれます。

WPロケットは自動的に行います。プラグインをアクティブにすると、デスクトップとモバイルの両方で箱から出してキャッシュが有効になります。

2。圧縮を有効にします

Google PSIでのパフォーマンス警告：テキスト圧縮を有効にします。

それが意味すること：ブラウザに送信する前に、HTML、CSS、JavaScriptなどのShrinkファイル。

WPロケットにより、GZIP圧縮は自動的にファイルのサイズと読み込み時間を短縮できます。

3。コード縮小

Google PSIでのパフォーマンス警告： CSSとJSを縮小します。

それが意味すること：コードで不必要な文字（スペースやコメントなど）を削除して、軽くする。

WP RocketはCSSおよびJavaScriptファイルを自動的に模倣します。

4.レンダリングブロッキングリソースを排除します

Google PSIでのパフォーマンス警告：レンダリングブロッキングリソースを排除します。

それが意味すること：特定のスクリプトやスタイルがあなたのウェブサイトの目に見える部分を遅らせないようにします。

WPロケットは、このパフォーマンスの問題に「Load JS Deferred」、「Delay JS実行」、「未使用のCSSの削除」オプションで取り組んでいます。

5。怠zyなロードを実装します

Google PSIでのパフォーマンス警告：オフスクリーン画像を延期します。

それが意味すること：ユーザーがそれらにスクロールした場合にのみ、画像、ビデオ、IFRAMEをロードします。

WPロケットには、1回のクリックで有効にできるLazyload機能が含まれています。ユーザーがスクロールするまで画像、CSSの背景画像、ビデオ、IFRAMEなどの画面外要素のロードを延期することにより、負荷速度が向上します。

6.次世代形式で画像を提供します

Google PSIでのパフォーマンス警告：次世代形式で画像を提供します。

それが意味すること： JPGやPNGなどの古い、より重いものではなく、WebPやAVIFなどの最新の形式を使用します。

想像すると、画像を自動的にWebPに変換し、Avifに変換するオプションも提供します。プラグインは、視覚品質をそのままに保ちながら画像を圧縮するスマート圧縮モードを使用します。

あなたのウェブサイトにGoogle PSIを使用する方法

これらの6つのステップに従って、適切に準備し、批判的な目を保ち、ウェブサイトのパフォーマンスを改善するための段階的なアプローチを取ります。

1.ニーズとウェブサイトの種類を理解してください

サイトの目的から始めてください：コンテンツが多い、画像重視、eコマース、または簡単なブログですか？期待と要件は非常に異なります。いくつかの投稿を含む個人的なブログには、リスト、マップ統合、ユーザー生成コンテンツを備えた不動産プラットフォームと同じニーズがありません。パフォーマンスレポートに飛び込む前に、このコンテキストに留意してください。

2。GooglePsiに移動して、URLを入力します

PagesSpeed Insightsにアクセスして、サイトのURLを貼り付けて監査を開始します。

3.結果を慎重に解釈します

PSIを使用して改善のために領域を特定しますが、ビジネスに不可欠な機能を盲目的に削除しないでください。

例：不動産サイトを実行し、PSIがJavaScriptが多いものとしてマップ統合をフラグにした場合、それを削除する必要があるという意味ではありません。同じことが、チャットプラグインや販売用の高品質の画像にも当てはまります。それらを削除する代わりに、これらの機能を最適化します。

4.アクションを実行し、最適化を開始します

適切なツールとプラグインを使用すると、コアWebバイタルの改善とPSIの問題の修正がはるかに簡単になります。

レポートが「次世代形式で画像を提供する」、「効率的に画像をエンコードする」、「JSをマイニルする」、「静的資産を効率的なキャッシュポリシーで提供する」などの画像の問題を示している場合は、ImagifyとWP Rocketを使用してそれらを修正してみてください。

PagesSpeed Insightsによってフラグが付けられた各問題の手順を繰り返すと、Core Web Vitalsは確実に改善されます。

5.変更を監視します

数日または数週間後、別のPSIテストを実行して改善を追跡します。また、SEOの進捗状況を監視することもできます。コアWebバイタルがグリーンになって以来、ランキングが改善された場合は確認してください。

6.実際のユーザーとのテスト

数字を超えてください。あなたの訪問者や顧客に彼らの経験について尋ねてください：

• ポップアップが多すぎますか？

• 購入プロセスはスムーズですか？

• サイトは速く感じますか？

サイトが十分なトラフィックを収集した後、PSIはフィールドデータの表示も開始します。これは、実際のユーザー動作に基づいた実際のパフォーマンスメトリックを意味します。

後でこのチートシートを自由に保存してください。そうすれば、最初の監査を実行することにしたときに何をすべきかがわかります。

Google PSIテストを超える代替ツール

Google PagesSpeed Insightsは素晴らしい出発点ですが、他の2つのWebパフォーマンスツールは、より深いパフォーマンステストで際立っています。GTMetrixとWebPageTest。どちらも、Webパフォーマンス監視の観点からPSIが提供するものを超えるより詳細なデータとカスタマイズオプションを提供します。

GTMetrixでパフォーマンスをテストします

Gtmetrixは、灯台を搭載したフリーミアムツールです。各リソースがパフォーマンスにどのように影響し、サイトがさまざまな条件下で動作するかを理解するのに最適です。 Google PSIのように、コアWebバイタルを含むすべての主要なWebパフォーマンスメトリックを示していますが、さらに進んでいます。

GTMetrixは、秒単位で完全に読み込まれた時間、コンテンツタイプ（JavaScript、画像、CSSなど）の内訳を備えた合計ページ重量、および各要素がいつ、どのようにロードされるかを正確に確認できる視覚的な滝チャートなどの詳細な洞察を提供します。また、複数のURLを並べてテストして結果を比較し、40を超えるモバイルおよびデスクトップデバイスといくつかの接続タイプ（4G、LTEなど）をシミュレートすることもできます。

WebPageTestでパフォーマンスをテストします

WebPageTestは、詳細な分析用の高度な機能を提供する無料のツールであり、柔軟性と詳細な洞察について開発者の間でお気に入りです。滝のチャートと完全なコンテンツの内容を提供して、ページの読み込みを正確に理解するのに役立ちます。

複数のURLを視覚的に比較したり、パフォーマンスレポートをエクスポートしたりすることもできます。これにより、より深い分析やクライアントとの共有に最適です。 WebPageTestは、1か月あたり300の無料テストをサポートし、30を超えるグローバルテストの場所にアクセスできます。また、すべての主要なブラウザと接続速度でテストして、実際の条件をより正確にシミュレートすることができます（GTMetrixと同様）。

Google PSIの制限

要約すると、Google PSIには、GTMetrixとWebPagetestでカバーされている3つの主要な制限があります。

1. デバイスの特異性：テスト用に正確なデバイス（iPhone 12）を選択することはできません。

2. ロケーションコントロール：ユーザーのエクスペリエンスをシミュレートするために特定の場所を選択することはできません（パリなど）。

3. 不足しているKPI：PSIは、完全に読み込まれた時間、コンテンツの故障を伴う合計ページの重量を表示しない、または視覚的な滝チャートを提供しません。

これが3つのツールを比較する概要テーブルです。

Google PagesSpeed Insights FAQ

Google PSIはどのように機能しますか？

Google PageSpeed Insightsは、モバイルとデスクトップの両方でWebページがどれだけ速く安定しているかを評価する無料のツールです。 Lighthouse Technologyを使用してパフォーマンステストを実施し、読み込み速度や視覚安定性などの主要なパフォーマンスメトリックに基づいて、100のうち100のうち総合スコアを提供します。また、詳細な診断と提案を提供して、何が鈍化しているのか、それを修正する方法を理解するのに役立ちます。

Mobile OptimizationのためにGoogle PSIを活用するにはどうすればよいですか？

Google PSIをモバイル最適化に使用する最良の方法は、PSIテストを実行するときにモバイルタブをクリックするだけです。これは、接続が遅い、デバイスのパワーの低下など、実際のモバイル条件下でサイトのパフォーマンスをシミュレートします。これは、モバイル訪問者が実際に経験していることと、最初に最適化する場所を確認するための最良の方法です。

Google PSIスコアを改善するにはどうすればよいですか？

インパクトのある領域に焦点を当てます：ブラウザキャッシュ、未使用のJavaScriptとCSSの最小化、画像の圧縮とサイズ変更、サードパーティのスクリプトの削減。 WP RocketやImagifyなどのツールにより、コードに触れることなく、最も一般的な問題に簡単に取り組むことができます。

PagesSpeed Insightsレポートをダウンロードするにはどうすればよいですか？

PSIインターフェイスには、[ダウンロード]ボタンはありません。ただし、少しハイテクに精通している場合は、PagesSpeed Insights APIを使用して、ツールへのレポートまたは統合のためにJSON形式で結果を取得できます。毎日のユーザーにとって、あなたの最善の策は、スクリーンショットを取るか、結果を手動でコピーすることです。

なぜ私のPSIモバイルとデスクトップのスコアが違うのですか？

PageSpeed Insightsはモバイルとデスクトップを個別にテストしますが、結果は異なります。通常、モバイルスコアは、実際の条件をシミュレートする低いデバイスとネットワークスロットリングのために低くなります。モバイルビューは、さまざまなCSSルールをロードして、速度とレイアウトに影響を与える可能性があります。

パフォーマンススコアはどのように測定されますか？

PageSpeed Insightsは、最初のコンテンツ型ペイント、速度インデックス、最大のコンテンツ型ペイント、総ブロッキング時間、累積レイアウトシフトなど、いくつかの主要な灯台メトリックに基づいて、100のうち100枚のパフォーマンススコアを計算します。これらのそれぞれは、最終グレードで異なる役割を果たしています。 GoogleのLighthouse Scoring Calculatorは、最終グレードで最も体重が最も多いかを示しています。

Google PagesSpeed Insightsのラボデータとフィールドデータの違いは何ですか？

ラボデータは、固定条件（デバイス、ネットワーク）を備えた制御されたテスト環境で生成されるため、パフォーマンスの問題のデバッグと発見に役立ちます。一方、フィールドデータは、過去28日間の実際のユーザーエクスペリエンスを反映しており、現実の世界でサイトのパフォーマンスをより正確に見ていきます。

Google PSIがラボデータとフィールドデータで異なるスコアを表示するのはなぜですか？

ラボデータはプリセットデバイスと接続の読み込みをシミュレートするため、フィールドデータはさまざまなデバイス、場所、ネットワークを使用した実際の訪問に基づいているため、ユーザーが実際にサイトと対話する方法に応じて、PSIスコアは2つの間で異なる場合があります。

どちらがより重要ですか：ラボデータまたはフィールドデータ？

フィールドデータは一般に、実際のユーザーエクスペリエンスに基づいているため、より価値があります。ただし、開発中のパフォーマンスの問題のテストと修正には、ラボデータが依然として不可欠です。理想的には、両方を一緒に使用して改善を導きます。

まとめます

Google PageSpeed Insights（PSI）は、ウェブサイトのパフォーマンスを測定し、速度とユーザーエクスペリエンスに影響を与えるものを特定するための最も信頼性の高い無料ツールの1つです。主要なWebパフォーマンスメトリックとコアWebバイタルに焦点を当てており、SEOとランキングに直接結び付けられています。

この記事は、PSIの仕組み、レポートの読み方、デザインや機能を犠牲にすることなく、スコアを改善するために実行できる実用的な手順をよりよく理解するのに役立つはずです。

さあ、行動を起こす時が来ました：
Google PagesSpeed Insightsで監査を実行し、WP RocketでコアWebバイタルを最適化します。14日間の返金保証のおかげでリスクはありません。