GoogleはWebVitalsHUDをChromeブラウザに統合します

GoogleはWebVitalsHUDをChromeブラウザに統合します

読み込みが遅いWebページは誰も好きではありません。開発者とデザイナーは、サイトが迅速に読み込まれるようにするためにできることを何時間も費やして、全体的なユーザーエクスペリエンスを良好なものにします。もちろん、これはエンドユーザーにメリットをもたらしますが、単なる幸せな視聴者以上のものがあります。 Googleは、ウェブページの速度と応答性を測定するツールを常に磨き、調整しています。これにより、ユーザーエクスペリエンスが向上するだけでなく、ウェブサイトの所有者がサイトをより適切に収益化できるようになります。ウェブサイトがカタツムリのペースで読み込まれるため、広告が表示されないようにするためだけにユーザーの前に立つために多額のお金を払うことを望んでいる広告主はいません。

開発者がユーザーのエクスペリエンスを向上させるのを支援するために、Googleの開発チームは、ページの読み込み速度や画像の最適化などに影響する主要な要素をウェブサイトでテストできるようにするために、一連の標準を維持しています。これらはWebサイトの必須事項ですが、より多くのベストプラクティスです。とはいえ、これらの基準の多くを満たしていない場合、ページのランキングとサイトの可視性が低下し、収益が確実に失われる可能性があることは間違いありません。テストとメトリクスはWebVitalsと呼ばれます。

この一連のベストプラクティスの下に、Core WebVitalsがあります。このサブセットは、すべてのWebサイトが測定し、特定の基準を満たすことを試みる必要がある3つのメトリックで構成されています。これらの3つのコアバイタルをチェックしておくと、サイトが許容可能な時間内に読み込まれるようになり、SEOとサイトのランキング力を和らげることができます。たとえば、2021年5月から、Googleは検索エンジンランキングアルゴリズムの一部としてCore WebVitalsの使用を開始します。スコアが低いサイトでは、これらの指標が業界標準を満たしていない場合、可視性が大幅に低下する可能性があります。

前述したように、コアWebバイタルは3つのメトリックで構成されています。これには、ページの最大要素の読み込み速度やレイアウトシフトなどの項目が含まれます。後者は、Webサイトで見つけることができる最も厄介なものの1つです。サイトをスクロールしているときに、コンテンツのセクションにカーソルを合わせるか、何かをクリックすると、読み込まれていないものが起動することを決定したため、コンテンツがシフトします。私を夢中にさせますが、それはあなたが思っているよりも頻繁に起こります。 Core Web Vitalsの3つの重要な要素と、それらの簡単な内訳を次に示します。

  • 最大のコンテンツフルペイント(LCP) : 対策 読み込み中 パフォーマンス。優れたユーザーエクスペリエンスを提供するには、LCPを 2.5秒 ページが最初にロードを開始したときの。
  • 最初の入力遅延(FID) : 対策 双方向性 。優れたユーザーエクスペリエンスを提供するには、ページのFIDが以下である必要があります 100ミリ秒
  • 累積レイアウトシフト(CLS) : 対策 視覚的安定性 。優れたユーザーエクスペリエンスを提供するには、ページはCLSを以下に維持する必要があります 0.1。

ユーザー側では、スクリプトや広告をブロックするツールを使用する以外に、Webサイトでこれらのバイタルを改善するためにできることは多くありません。残念ながら、このオプションはサイトの全体的なエクスペリエンスを大幅に低下させる可能性もあります。開発者向けに、これらのコアWebバイタルのヘッドアップディスプレイを提供する拡張機能をChromeウェブストアで見つけることができます。このHUDを使用すると、サイトのパフォーマンスをリアルタイムで確認できます。 ChromeとChromeOSのCanaryチャネルの最近の更新で、GoogleはこのHUDをChromeブラウザのコードに直接取り込むことを目指しています。

旗、 HUDでパフォーマンスメトリックを表示するTechdowsによって発見されました 数週間前のカナリアビルドでは、現在、拡張機能とまったく同じように機能しているようです。有効にすると、ナビゲートするすべてのWebサイトの右上隅に小さなポップアップが表示され、LCP、FID、CLSのアクティブなメトリック、およびドロップされた平均フレームが表示されます。この機能は、サイトで発生する可能性のある読み込みの遅い問題を修正しませんが、リソースを大量に消費する要素の追跡を開始したり、問題が解決した後もサイトが完全に機能していることを確認したりするための便利なテストツールになります。あなたはこれを今すぐ試してみることができます Web拡張機能 ただし、今後2〜3か月のいずれかの時点でベイクインバージョンが表示されると思います。