コアウェブバイタルビジュアライザー:任意のウェブページのコアウェブバイタルを視覚化する
RUM Visualizerは、MarketingTracerによって開発されたChrome拡張機能です。この拡張機能を使用すると、任意のウェブページのCore Web Vitalsを視覚化することができます。この拡張機能を使用すると、Largest Contentful Paint(LCP)、First Input Delay(FID)、Cumulative Layout Shift(CLS)、First Contentful Paint(FCP)、Interaction to Next Paint(INP)、およびTime To First Byte(TTFB)などの重要なメトリックに簡単にアクセスして理解することができます。
この拡張機能は、各メトリックごとにさまざまな機能を提供しています。LCPでは、RUM値を取得し、LCPを視覚化し、Time to First Byte、Resource Load Delay、Resource Load Time、およびElement Render Delayなどのコンポーネントに分解することができます。同様に、FIDでは、RUM値を取得し、FIDを視覚化し、その分解を探索することができます。
CLSの値を取得し、分解を表示およびアニメーション表示することができます。FCPの値もアクセスし、分解することができます。INPの値を視覚化し、分解を探索することができます。TTFBの値を取得し、分解して分析することができます。
これらの機能に加えて、この拡張機能は簡単なデバッグオプションも提供しています。現在のページに対して遅いネットワーク条件(3G)をエミュレートしたり、キャッシュを有効または無効にしたりすることができます。これらのオプションは、パフォーマンスの問題を特定し、解決するのに役立ちます。
この拡張機能は、いくつかのアップデートを経ており、バージョン1.2では詳細なLCP情報が追加され、バージョン1.4では左側のメニューとレンダリングブロッキングリソースに関する追加情報が導入され、バージョン1.5ではコードとレイアウトの改善とページ実験が含まれています。バージョン1.6では、より良いINPの分解とマイナーコードの改善が行われ、バージョン1.7ではINP分析中にイベント、長いタスク、および長いアニメーションフレームをコンソールにログすることができるようになりました。
Core Web Vitals Visualizerを使用すると、ウェブ開発者やパフォーマンス愛好家は、任意のウェブページのパフォーマンスに関する貴重な洞察を得て、ユーザーエクスペリエンスを向上させることができます。