サイトスピード、気にしてますか?

tl;dr

サイトスピード KPI

出典:

出典:

出典:

Chrome Dev Summit 2017 で発表されたサイトスピード指標のビッグデータで、Google Chrome のブラウザ履歴同期機能にオプトインしているクライアントから収集されたデータにアクセスできる。

現時点で 201710, 201711, 201712 のテーブルが公開されており、ディメンションは次通り;

Dimension	Value	Definition
Effective Connection Type	`slow-2g`, `2g`, `3g`, `4g`, `offline`	Network Information API より取得
Device Type	`phone`, `tablet`, `desktop`	User-Agent より取得
Country	`country_jp`	ISO 3166-1 alpha-2 定義、IP アドレスより取得、`201712` テーブルから

指標は次の 4 つが取得できる:

Metric	Definition
First Paint	Paint Timing API より取得、Start Render と同等
First Contentful Paint	Paint Timing API より取得、テキストや画像の初期描画開始タイミング
DOMContentLoaded	DOM と CSSOM の構築完了タイミング
onload	ページ内アセット読み込み完了タイミング

Chrome が機械的に取得できる指標なので、ページの初期読み込み時間を示す単純な指標と言えると思う。

Google Chrome に搭載された web ページ監査ツール。

の 5 つに大別される指標を監査し、ユーザーにレポートで結果やアドバイスを提供してくれる。

Google Chrome からの実行だと、強制的にスマートフォンモードにされるが、コマンドラインツールとしても提供されており;

yarn global add lighthouse

のように Node.js の NPM からインストールして;

lighthouse --output html --output-path ~/Desktop/report.html --disable-device-emulation https://restaurant.ikyu.com/

のように実行すれば PC サイトのレポートも問題なく取得できる。

Google が提供するサイトスピード計測 SaaS。先日のアップデートで、前述の CrUX と連携したスコア表示に変更された。

スコアが Speed と Optimization に 2 別され、Speed には FCP (First Contentful Paint) と DCL (DOMContentLoaded) にかかった時間の CrUX から取得されたクライアントの分布が表示されるようになった。