コアWebバイタル監査を改善するための4つのヒント
公開: 2022-05-10特に、考慮すべきさまざまなサードパーティツールを使用して、CoreWebVitalsを監査する方法についての厳格なルールはありません。 ワークフローに組み込むための速度監査の重要なヒントのいくつかを分析します。これには以下が含まれます。
- ページエクスペリエンスとGoogle検索コンソール
- PageSpeedInsightsの欠点
- 推奨されるサードパーティの監査ツール
- ウォーターフォールチャートを理解する
1.SearchConsoleを使用してCoreWebVitals監査ワークフローを開始します
Webサイトの速度とCoreWebVitalsの問題を監査するときは、アクセスが利用できる場合は、検索コンソール内の[エクスペリエンス]セクションを確認して、トラブルシューティングプロセスを開始することを常にお勧めします。 検索コンソールは、Chrome UXレポートから実際のユーザー（フィールド）データを集約するため、これは、LCP、CLS、またはFIDのどの問題がユーザーエクスペリエンスに影響を与えているか、そして最終的にはサイトのランキングの可能性に影響を与えているかを簡単に理解する方法です。
「PageExperience」>「CoreWebVitals」に移動すると、表示されるグラフに、Webサイトプロパティの「Good」、「Need Improvement」、または「Poor」のいずれかに分類されるURLの数が表示されます。 例えば：
上記のコアウェブバイタルのしきい値に関するGoogleのタイミングと指標については、以下のグラフをご覧ください。
| 良い | 改善が必要 | 貧しい | |
| LCP | <= 2.5s | <=4秒 | >4秒 |
| FID | <= 100ms | <= 300ms | >300ms |
| CLS | <= 0.1 | <= 0.25 | > 0.25 |
ここから、URLの大部分が「良好」に分類されているかどうか、つまり3つのコアWeb Vitalsメトリックすべてに合格しているかどうか、またはほとんどのページが「不良」または「改善が必要」であるかどうかを評価できます。これは、いくつかの未解決の技術的問題があることを示しています。それらが通過するために解決する必要があります。
役立つヒント：ページが「良好」ステータスに移行するには、3つのWebバイタルすべてに合格する必要があり、サイトのURLの大部分が「改善が必要」の範囲にあるだけでは不十分です。
次に、各セクションにドリルダウンして、速度の問題の影響を受け、監査が必要な特定のURLを見つけることができます。 これらは、テンプレートレベルで類似しているものによってグループ化されています。 したがって、サイトにある可能性のあるすべての異なるタイプのURL（ホームページ、カテゴリページ、製品ページ、ブログ投稿など）を監査しようとする代わりに、実際のユーザーがWebサイトにアクセスするときに直面する問題は1つまたは2つに集中する可能性があります。これらのうち、これらのテンプレートのみに注力できることを意味します。これにより、時間を大幅に節約できます。
2.PageSpeedInsightsを慎重に使用します
PageSpeed Insights（PSI）は、問題を修正する潜在的な機会のトップレベルの概要を提供するGoogleの便利な無料ツールですが、単独で使用した場合、サイトの速度を監査するための怠惰な方法です。 多くのSEOが推奨事項を、時には一言一句受け取り、その背後にある理由やコンテキストを実際に理解することなく、クライアントの開発者や技術チームに提示するのを見てきました。
残念ながら、これにより、特にツールが吐き出す機会や推奨事項をさらに深く掘り下げていない場合は、より多くの質問が返される可能性があります。
たとえば、LCP要素の読み込みを高速化するために、「レンダリングブロッキングリソースを削除する」という推奨事項について聞いたことはありますが、Cookieバナースクリプトなど、このリソースを最初のペイントに配置することが重要な場合はどうなりますか。または影響を受ける資産はサードパーティのリソースですか？ 開発者は、できることはあまりないので、これを真っ直ぐにノックバックする可能性があります。したがって、PSIから取得した技術的な推奨事項は、ほんの少しの塩で取得し、さらに調査してから、に中継することが非常に重要です。開発者。
PSIがLighthouseでセットエミュレートされたデバイス（Moto G4）を使用していることを知っておくと便利ですが、「ラボ」テストの場合のように、実際のユーザーが最も頻繁に使用するデバイスによって問題が大幅に異なる可能性があります。 Chrome UXレポートからサイトの実際のユーザーに問題があることがわかっていても、PSIがその特定のデバイスでテストするための問題や機会を返さないことを意味することがよくあります。
したがって、デバイスと接続の構成を適宜調整できる他の速度テストツールと組み合わせてPSIを使用することを常にお勧めします。
3.代替の速度監査ツールを探す
PageSpeedやその他のGoogleツールを使用するだけでなく、WebPageTest（WPT）やGTMetrixなどの他の無料およびフリーミアムの速度テストツールを検討することもお勧めします。
WebPageTestには、ページレベルでの速度テストを支援するさまざまな便利な機能と構成オプションがあります。 詳細設定では、ブラウザやデバイスタイプ、テスト場所などの重要なテスト設定を調整できます。 これにより、特にサイトのユーザーの大多数がどこにいるのか、デバイスの種類がわかっている場合は、監査を微調整できます。つまり、Googleの事前設定されたシミュレートされたデバイスだけに依存しているわけではありません。
ここでは、デフォルトの3G高速接続から接続設定を調整したり、厄介なスクリプトのパフォーマンスの向上をテストしたい場合は特定のURLをブロックしたりすることもできます。 リストしていない構成オプションは他にもたくさんありますが、コアWebバイタルを監査するときに最も役立つのは上記のオプションです。
テストが実行されたら、[コアWebバイタル]タブに移動して、フィルムストリップ、ビデオタイムライン、ウォーターフォールチャートなどの各メトリックのパフォーマンスの詳細な内訳と、イベントをトリガーした要素の詳細な内訳を取得します。これらはすべてさまざまな形式でエクスポートでき、何よりも無料です。
フィルムストリップビューは、ページの読み込みのどの時点で特定の要素が視覚的に表示されるかを理解するのに特に役立ちます。これは、どのアセットをより速く読み込むことができるかを優先するのに役立ちます。 それを引き起こしている要素を特定するのに役立つ重要な視覚的変化がある場合、それは非常に明確に表示されます。
GTMetrixにはWebPageTestと同様の機能がありますが、WPTで無料の高度なオプションの多くは、有料パッケージでのみ利用できます。
4.ウォーターフォールチャートを知る
基本的に、ウォーターフォールチャートは、ファイルまたはアセットが要求されたとき、ダウンロードにかかった時間、およびページに表示されたときのタイムラインです。
ウォーターフォールチャートを見ると、さまざまな意味を持つさまざまな行、バーの長さ、色がたくさんあるため、オフセットから少し気が遠くなるように思えるかもしれませんが、延期しないでください。 ウォーターフォールチャートについて学び、理解するために時間を費やすことは、技術的なSEOがスピード監査のために持つべき唯一の最も重要なスキルです。
Webバイタル監査にWebPageTestを使用することに慣れている場合は、ウォーターフォールチャートが最もユーザーフレンドリーであることがわかります。 WebPageTestは、接続情報、要求されているリソースタイプ、およびJS実行などの他のイベントを示すチャートの上に色分けされたキーを提供します。 また、レンダリングブロッキングリソースを視覚的に表示し、3xxまたは4xx応答のある要求されたリソースを強調表示します。
役立つヒント：ウォーターフォールの水平バーの明るい色と暗い色に注意してください。明るい色はブラウザによってリソースが要求されたことを示し、暗い色はリソースがダウンロードされていることを示します。
全体として、これはサイトのパフォーマンスの問題をより深く理解するのに役立ち、ひいてはそれらを修正するための推奨事項をより実用的にします。 詳細については、ウォーターフォールチャートの読み方に関するMattHobbsの詳細な記事をお勧めします。
ウェブサイトのパフォーマンスの問題を解決するための専門家のアドバイスをお探しの場合は、Semetricalがどのように役立つかについて詳しくは、お問い合わせいただくか、テクニカルSEOサービスのページをご覧ください。