Google Chrome 88 の DevTools に Web Vitals (ウェブバイタル) 情報の表示オプションが追加される

Google Chrome 88 では、Google がユーザーエクスペリエンス測定の重要な指標として採用している 「Core Web Vitals」 をデベロッパーツールの 「パフォーマンス」 パネルに表示するオプションが追加されました。

昨年の 4月末でしたか、Google は Web における優れたユーザー・エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドとして、「Web Vitals」 (ウェブバイタル) という考え方を導入したというアナウンスを行いました。

その中で、重要な 3つの指標として 「Core Web Vitals」 (コアウェブバイタル / 下記参照) についても発表され、これら指標を確認するためのツールも順次提供していくとされていました。

すでに、PageSpeed InsightsLighthouse、あるいは Chrome User Experience Report (CrUX) といったパフォーマンス計測ツールでコアウェブバイタルは確認可能になっていますが、先日リリースされた最新安定版の Google Chrome 88 からは、DevTools (デベロッパーツール) 上でも確認可能になっています。

具体的には デベロッパーツールの、「Performance (パフォーマンス)」 パネルで、「Web Vitals」 チェックボックスにチェックを入れることで、下記のように 「First Contentful Paint (FCP)」、「Largest Contentful Paint (LCP)」、「Layout Shift (LS)」 といった指標が数値として表示されます。

Google Chrome 88 の DevTools で Web Vitals 情報を表示した例

なお、このバージョンの Google Chrome では、「Mixed content」 (混在コンテンツ) のブロックが有効になった他、拡張機能の仕様として新たに 「Manifest V3」 の導入、CSS の aspect-ratio プロパティへの対応、target="_blank" が指定されたリンクに対する rel="noopener" がデフォルトとなるといった変更も行われています。

関連エントリー

Social Share