コアWebバイタル：パフォーマンスのボトルネックを特定するための7つのツールとテクニック

Core Web Vitals（CWV）は、現時点でホットなトピックです。 ここでは、2021年5月に予定されているGoogleのランキング更新に備えて、ウェブサイトのパフォーマンスの問題を特定するために使用できるツールのいくつかを見ていきます。

Core Web Vitalsの復習が必要ですか？ Core Web Vitals Explainedの記事で、それらが何であるか、およびそれらを最適化する方法を学びます。

CWVメトリックの自動監視

テストの後に手動でテストを実行することなく、時間をかけて監視したい複数のWebサイトまたは主要なページがある場合は、DigitalInspirationによるこのスプレッドシートが適している可能性があります。 Lighthouse PageSpeed APIキーを取得し、いくつかのURLをプラグインするだけで、すぐに使用できます。

スプレッドシートは、主要なCWVインジケーターに関する潜在的なパフォーマンスの問題と、それらがいつ発生したかを特定するのに役立ちます。これにより、原因の手がかりが得られます。 また、Webサイトの成長に伴って、または基になるページ速度アルゴリズムに変更が加えられたときに、速度スコアが時間の経過とともに自然に変化する方法を示すためにも使用できます。

このスプレッドシートの修正版を数か月使用しており、多くのWebサイトのパフォーマンスを向上させる機会を特定するのに役立ちました。

PageSpeedインサイト

GoogleのPageSpeedInsightsは、モバイルデバイスとデスクトップデバイスの両方について、パフォーマンスとCWV関連の問題に関する最初のトップライン調査のための私の頼りになるツールです。 レポートには「フィールドデータ」が含まれます。 実際のユーザーが、ページの読み込みをシミュレートするLighthouseの「ラボ」データとともにWebサイトをどのように体験するか。これは、繰り返し可能で一貫性のあるテストに役立ちます。

コアWebVitalメトリックは、単純な色分けされたインジケーターで明確に強調表示されます。 悪い指標は赤で強調表示され、良い指標は緑で強調表示されます。 これらのメトリックを組み合わせて全体的な速度スコアを算出します。緑色の「パス」には90％以上が必要です。

これらのレポートには、節約できる合計秒数の観点から最も影響の大きい項目の順に一連の推奨事項と診断も示されています。

ChromeDevToolsパフォーマンスモニター

パフォーマンスとCWV関連の問題のより詳細な分析については、DevTools内のChromeのパフォーマンスモニターをよく使用します。使用する主要なCWVインジケーターのいくつかは、以下のスクリーンショットに番号が付けられています。

1. 最初に、LCP要素とCLS要素は異なる解像度で変更されることが多いため、パフォーマンスモニターを正しい解像度で実行していることを確認する必要があります。 PageSpeed Insightsモバイルビューを複製するために、350 x636ピクセルに設定しました。
2. レポートを実行する前に、モバイルデバイスの接続性と電力をシミュレートすることもできます。 私はよくFast3gと4xCPUの速度低下を選択します。
3. レポートが生成されたらLCPメトリックを選択すると、最大の要素が何であるかが識別されます。 これは、FCP（First Contentful Paint）にできるだけ近づける必要があります。 ギャップがある場合は、最大の要素の配信を特定して合理化する必要があります。
4. 長いCPUタスクは、灰色のバーの赤い対角線で強調表示されます。 これは多くの場合、黄色のバーで表されるより重いJavaScriptが原因で発生し、対話性メトリック（FID、TBT、およびTTI）に影響を与えます。 以下のバーをドリルダウンすると、通常、問題のあるJavaScriptファイルと関数が示されます。
5. レイアウトシフトはこれらの赤いバーで強調表示され、それらを選択すると通常、シフトされた要素が強調表示されます。 これらが大量にあると、CLS値が高くなります。
6. フレームビューは、コンテンツがどのように表示され、ロード時にレイアウトがシフトするかを視覚的に強調するための優れた方法です。CLS値が高い場合、フレームから原因が明らかであることがよくあります。 この例では、大きなCookieバナーにより、コンテンツが押し下げられるとレイアウトがシフトします。

Web VitalsChrome拡張機能

コアSERPバイタル

SERP Vitals拡張機能は、検索結果に直接、LCP、FID、およびCLSメトリックの便利なインジケーターを表示します。 これは競合他社の分析に最適であり、Webページにアクセスする前にWebページの速度をすばやく示すことができます。

データは、Chromeユーザーエクスペリエンスレポート（CrUX）によって実際のユーザーから匿名でコンパイルされます。 ただし、新しいサイトやトラフィックの少ないサイトでは十分なデータポイントが得られないため、すべてのサイトで利用できるわけではありません。

Webバイタル

便利なWebVitals拡張機能は、Chromeのデスクトップユーザーの3つの主要なCWVメトリックをリアルタイムで測定し、その信号の色は、Webサイトを閲覧するときにすばやくインジケーターを提供します。 外部で収集されたユーザーデータに依存しないため、ローカル環境で作業している開発者が問題を早期に発見するのに最適です。

灯台

Lighthouse Extensionsは、Chrome DevTools内で利用可能な同じレポート機能への迅速なルートを提供し、CrUXを介して実際のユーザーからフィールドデータではなく、LighthouseAPIを使用してラボデータを取得します。

パフォーマンスレポートはPageSpeedInsightsモバイル分析と非常によく似ており、同様の診断と推奨事項を提供します。 SEO、アクセシビリティ、ベストプラクティスに関する追加のレポートも生成されます。

Treo Site Speed Visualiser

https://treo.sh/sitespeedのビジュアライザーは、時間の経過に伴うCWVメトリックを表示し、デバイス、接続性、地理的地域でフィルタリングできます。 毎週更新され、CrUXレポートのデータを使用します。

以下のbbc.co.ukの例では、CLSメトリックが過去3か月で大幅に低下し、すべてのコアメトリックに緑色の「合格」の結果が得られていることがわかります。 これは、CWVメトリックのパフォーマンスを経時的に分析したり、競合他社の分析を実行したりするための優れた方法です。

サードパーティのリクエストの視覚化

FID、TTI、およびTBTの対話性メトリックは、トラブルシューティングが難しい場合があります。 PageSpeed Insightsは、最も重いサードパーティスクリプトのいくつかを識別するという点で役立ちますが、適切な視覚化によって、これらのスクリプトの影響をはるかに簡単に伝えることができる場合があります。

リクエストマッピングツールhttps://requestmap.herokuapp.com/はこれに最適です。 生成されたマップには、サードパーティのリクエストごとにノードが含まれ、ノードが大きいほど影響の大きいスクリプトを表します。 インタラクティブ性の指標が不十分な場合、このマップに多くのノードが表示される可能性があります。

これは、インタラクティブTTIまでの時間の測定基準がなんと26秒であるサイトの例です。 マップを一目見ると、ライブチャットウィジェットが表示されます。これは、上部にある多数の濃い青色のノードで表され、リクエスト全体の半分以上を占めています。

リクエストマップツールは、スクリプトやその他のアセットがどこからロードされているかを判断するための優れた方法でもあります。 この例では、黄色のGoogle TagManagerノードから直接取得されたいくつかのノードを以下に示します。

WebPageTestのウォーターフォール

WebPageTestレポートは、PageSpeed Insightsよりもはるかに詳細な情報を提供し、さまざまなデバイスや場所から生成できます。

このツールは、ページ上のすべてのアセットの読み込みシーケンスを視覚化するウォーターフォール分析によく使用します。 これは、重要な「フォールドより上の」コンテンツを合理化しようとするときに特に役立ちます。 たとえば、LCPを最適化していて、fold要素の上にある最大のものが画像またはタイポグラフィである場合、最大の画像ファイルとフォントファイルにプリロードを実装し、これらのプリロードされたアセットがウォーターフォールの上部に表示されていることを確認できます。 。

CWVがサイトにどのように影響するかわからない場合は、今すぐご連絡ください。