Core Web Vitals ビジュアライザー

Core Web Vitals ビジュアライザーを誇りを持ってご紹介します

Arjen Karel - linkedin

Last update: 2024-08-14

Core Web Vitals ビジュアライザーを誇りを持ってご紹介します。

本日、Chrome Web Storeで無料のCore Web Vitals ビジュアライザーをリリースしました。

Core Web Vitals ビジュアライザーは、ページのCore Web Vitalsを追跡・可視化するためのChromeプラグインです。これらの指標には、Largest Contentful Paint、First Input Delay、Cumulative Layout Shift、First Contentful Paint、Interaction to Next Paint、Time to First Byteが含まれます。このプラグインは、どの要素が視覚的な不安定性の原因となっているか、どのイベントが入力の遅延を引き起こしているかを示すオーバーレイを作成します。さらに、このプラグインはCore Web Vitalsを基本的な構成要素に分解し、ページのパフォーマンスをより詳細に理解できるようにします。このプラグインはChrome Web Storeで無料で利用できます。

Core Web Vitalsの専門家として、ページを操作した際にどのように反応し応答するかを確認するのに多くの時間を費やしています。それがCore Web Vitalsにどう影響するのか、モバイルエミュレーションに切り替えたりブラウザキャッシュを無効にした場合、Core Web Vitalsはどう変化するのでしょうか？

もちろんRUMトラッキングは使用しています。それによりページレベルでどの指標がCore Web Vitalsに合格し、どれが不合格かがわかります。しかし、なぜ不合格になるのでしょうか？それはページを実際に操作して初めて本当にわかることです。

大量の時間を節約するために、長いプロセスの一部を自動化し、面倒な作業を代わりにやってくれるChromeプラグインを作ることにしました。その結果がCore Web Vitals ビジュアライザーです。このプラグインを誰でも使えるようにすることにしました。ぜひChrome Web Storeでチェックしてみてください。

Core Web Vitals ビジュアライザーは何をするのか？

まず、ページとのインタラクションに基づいてCore Web Vitalsを記録します。 Largest Contentful Paint、 First Input Delay、 Cumulative Layout Shift、 First Contentful Paint、 Interaction to Next Paintおよび Time to First Byteを追跡します。

次に、これらすべての指標を可視化するオーバーレイを作成します。これにより、Largest Contentful Paintがどの要素であるか、どの要素が視覚的な不安定性を引き起こしているか、そしてページを操作した場合、どのイベントがFirst Input Delayを引き起こしたかがわかります。

最後に、いずれかの指標をクリックすると、Core Web Vitals ビジュアライザーがこれらの指標を最も基本的な構成要素に分解します。

なぜLighthouseを使わないのか？

この質問はよく受けます。私の答えはいつも「Lighthouseを使わないとは言っていません」です（実際にはそれほど頻繁にLighthouseを使っていませんが！）。Lighthouseは素晴らしいツールであり、使い方を覚えるべきです。

第一に：Lighthouseはラボテストであり、そのデータは実際の環境を代表していない可能性があります。だからこそ私のプラグインはブラウザの実データを使用します。
第二に：Lighthouseは実際のユーザーによる実際のインタラクション結果を提供しません。例えば、LighthouseはFIDやINPを測定しません。CLSの各段階を可視化することも、LCPを異なるサブパートに分解することもしません。