コアWeb Vital Tooling

Googleによって開始されたコアWebバイタルは非常に実用的です。最初にパフォーマンスに焦点を合わせたとき、私たちは次のことに焦点を合わせました：リクエストを削減します！コンテンツをキャッシュ！ファイルサイズを削減します！これらはWebページのパフォーマンスに密接に関連していますが、抽象的です。ユーザーの場合、実際のWebページのパフォーマンスが反映されています。ページのコンテンツを見るのにどれくらい時間がかかりますか？実際にページとやり取りできるのにどれくらい時間がかかりますか（たとえば、フォームにコンテンツを入力したり、リンクをクリックしたりします）。アクションを実行しようとすると、ページコンテンツは迷惑にジャンプしますか？これは、コアWebメトリックの賢さです。これらの側面を測定します。

Chrome Devtoolsの灯台タブには、これらのメトリックが含まれています。

これらのメトリックに注意することが重要です。なぜなら、ユーザーがあなたのウェブサイトにアクセスしたら直接利益を得るこれらの数値に加えて、ユーザーがあなたのウェブサイトにアクセスするかどうかにも影響を与える可能性があることを忘れないでください。コアWebメトリックは、以前はAMPページのみに予約されていたSEOおよび新しいCarousel要件に組み込まれています。

1回限りの監査のためにこれらのメトリックを追跡することは有用ですが、さらに重要なことは、パフォーマンスの劣化を防ぐためにそれらを長期にわたって観察することです。キャリバーなどのパフォーマンスツールは、これらのメトリックをカバーしています。新しい遺物にはこれらのメトリックも含まれています。 SpeedCurveはこれらのメトリックを追跡します。

累積レイアウトオフセット（CLS）は難しい問題です。たとえば、ウェブサイトには記事の上部に広告があります。この広告のリクエストは非同期であるため、広告は発生を遅らせて記事のコンテンツを押し下げる可能性があります。これは迷惑であるだけでなく、パフォーマンスメトリックに深刻な影響を与え、最終的にSEOに影響を与える可能性があります。

Nic Jansmaの「実際のアプリケーションでの累積レイアウトオフセット」は、詳細な議論を提供します。

CLSは単なる「ページはこれをしますか？」以上のものです。上の写真に示されているように、スコアがあります。 0は良い目標だと思います。なぜなら、CLSのバージョンは誰にとっても良いことはないからです。これには、「統合」（例えば、ヘッドレスブラウザー、特にパフォーマンスツールで）や実際のユーザー（RUMまたは実際のユーザーメトリックと呼ばれる）の追跡など、多くのニュアンスがあります。どちらも便利です。

CLSの問題を修正する必要がある場合は、これは難しい場合があります。 SpeedCurveいくつかの新しいツールが役立つ：

各レイアウトオフセットについて、オフセットの前後に2つのフレームを備えたフィルムを表示します。次に、移動要素の周りに赤い箱を描き、オフセットを引き起こした正確な要素を強調します。各オフセットのレイアウトオフセットスコアは、そのオフセットの影響と累積スコアに追加される方法を理解するのにも役立ちます。

これが問題を非常に簡単に根絶し、修正することを願っています。特にそれらの難しい質問。私はこれを以前は知りませんでしたが、CLSはより微妙な問題によって引き起こされる可能性があり、マークゼマンはこの記事で指摘しています。例えば：

• 水平に動く絵のカルーセルのみがCLをトリガーします。それはまさに彼らがすべきことだから気分が悪いですが、明らかに、CSS変換モバイルカルーセルを使用するだけでこれを修正できます。
• あなたが非常に大きな領域を持っている場合、その領域を移動するリスクが高くなります。それが少し動くと、CLSに深刻な影響を与えます。
• スタイルテキストの点滅（FOUT）がCLSの理由です。これが他の理由でパフォーマンスに有益であっても！矛盾！これは、完璧なフォントで落ちるのは良い言い訳です。

難しいが重要な質問。パフォーマンステストをCI/CDに組み込む必要があります。これは、この問題を解決するのに大いに役立つでしょう。 Webパフォーマンスは、Web開発の完全なキャリアサブカテゴリであるとますます感じられています。フロントエンドのWeb開発者はこれを理解し、ある程度支援する必要がありますが、すでにやるべきことがたくさんあります。

以上がコアWeb Vital Toolingの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。