Web表示スピード研究会

Chrome研究:最新Beta版とCanary版の違い。LCPのハイライト表示について

SpeedCurveにとって、2021年5月はとても忙しいものでした。Chromeの速いリリースサイクルとCore Web Vitals(コアウェブバイタル)の進化がおこりました。この記事では、新機能の内容や拡張機能についてお届けします。

  • Chrome Beta版とCanary版のサポート
  • LCP(Largest Contentful Paint)要素のハイライト表示
  • キーとなるレンダリング時間

Chrome Beta版とCanary版のサポート

Chromeのリリースサイクルは、速すぎて後れないようにするのは大変です。一方で、シンセティック(合成)モニタリングを安定提供させたいと考える一方で、お客様のアプリをスムーズに動作させるには、すばやく変更を察知して対応する必要があります。

今回、Chrome Beta版とCanary版の2つでカスタムブラウザのサポートを発表しました。

Chromeのリリースについて

Chromiumチームでは、全リリースの早期アクセスに関するコミュニティを提供していますが、シンセティック・テストのために3つのバージョンを用意しています。

  • Stable(安定版) – SpeedCuerveで安定性が確保されたサポート対象のChromeの最新バージョン。安定版は四半期ごとに更新されるため、現在のChromium安定版から1〜2バージョン遅れる可能性があります。
  • Beta(ベータ版) – 「次期バージョン」。1週間に1回程度ビルドがリリースされます。
  • Canary – 最新かつ最高のバージョン。日々の新しいビルドが提供され、開発が進んでいます。

はじめに

シンセティックテストの設定で、利用可能なブラウザのリストにBeta版やCanary版の追加は簡単です。チュートリアルについては、ガイドを参照してください

専門家のひと言:3バージョンすべてを比較したい場合は、カスタム安定版も設定してください。Chromeのデフォルトのデスクトップ版はすでに利用可能ですが、プロファイルで選択するほかの設定は、すべて同じにようにできます。作成した新しいプロファイルは、既存または今後のサイト構成に簡単に追加できます。

一般的な使用例

RUMで確認された変更の検証

リアルユーザーモニタリング(RUM)のメトリクスの変更は、さまざまな理由からいつでも必要になる場合があります。安定版エージェントは、広範なテストを経てから更新されるため、最新の Chrome には対応していない場合があります。ベータ版に早期アクセスすることで、ユーザーよりも先にブラウザ関連の問題を発見できます。

主要なメトリックの変更を先取りする

Core Web Vitals(コアウェブバイタル)、Lighthouse、またはユーザー独自の指標にかかわらず、Chrome のビルドに早期にアクセスすることで、予期せぬ変化に対応し、正しい方向に進むことができます。

アプリケーションの将来性

ブラウザの高速化はこれまでも行われていますが、アプリケーションが常にそれに追従するとは限りません。急速に変化する Chrome プラットフォーム上で、現代のアプリケーション動作を理解することで、安心して使用することができます。

なにか違和感があった場合は?

ベータ版とCanary版は現在開発中であり、多少不安定になることが予想されます。メトリクスやLighthouseの動作に関連した予期せぬ変化があった場合は、ここにお知らせください。それ以外の場合は、Chrome Platform StatusWeb Vitals ChangelogsでWチェックしてください。

LCPのハイライトとキーレンダリング

Chromeは、Largest Contentful Paintの背景を明らかにして、誰もが把握できるようにしました。Chrome 90では、LCPに分類された要素の境界矩形(囲み枠が公開されました。 フレーム内の要素を強調することができ、LCPを報告する際に、Chromeが何を特定したのかを把握することができます。

これを当社指標の「Last Painted Hero」と組み合わせることで、ページ内での意味あるレンダリング状態を判断することができます。

ビジュアライゼーションはどこで見ることができますか?

LCPのハイライトは、Vitalsダッシュボード(Vitals dashboard)、テストの詳細(test details)、サイトダッシュボード(Sites dashboard)で見ることができ、各指標の時系列としての推移も見ることができます。

最近のパフォーマンス研究の世界は、モノごとがとても速く進んでいます。だからお客様は一歩先を行くことができます。


※この記事はSpeedCurve社の英文情報を元に、内容を分かりやすく編集、翻訳した記事です。

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

PSI、表示スピード、コアウエブバイタル INPの各対策については