Core Web Vitals ビジュアライザー

Core Web Vitals ビジュアライザーのご紹介

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

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を使わないのか？

Core Web Vitals ビジュアライザーをお試しください！

Chrome Storeにアクセスして、Core Web Vitals ビジュアライザーをインストールしてください。もし気に入っていただけたら...レビューを残していただけると嬉しいです。