サイトスピード、気にしてますか?
tl;dr
- 2018 年 7 月から "page speed" がモバイル検索のランキング要因になるよ。
- このランキング要因は Google で "Speed Update" と呼ばれるよ。
- Speed Update が適用されるのはめちゃくちゃ遅い UX を提供しているサイトだけで、全体としてはごくわずかだよ。
- 検索クエリが重要なシグナルなのは変わらないよ。
サイトスピード KPI
基本
- 0.1 秒 人が瞬時に反応していると感じられる限界
- 1.0 秒 人が思考の流れを遮られていないと感じられる限界
- 10 秒 人が注意を向けていられる限界
出典:
Response Time Limits: Article by Jakob Nielsen (1993 年 1 月)
理想
- 0.1 秒 以内にレスポンスを返す
- 0.01 秒 間隔でフレームをレンダリングする
- 1.0 秒 以内にコンテンツを提供する
出典:
- RAIL モデルでパフォーマンスを計測する | Google (2015 年 10 月初出)
直帰率との相関
- ページロード 3.0 秒 を境に直帰率が急上昇 (Pingdom 調べ)
- ページロード 1.0 ~ 3.0 秒 で直帰率が公算 32% 上昇する (Google 調べ)
- ページロード 1.0 ~ 5.0 秒 で直帰率が公算 90% 上昇する (Google 調べ)
- ページロード 1.0 ~ 6.0 秒 で直帰率が公算 106% 上昇する (Google 調べ)
- ページロード 1.0 ~ 6.0 秒 で直帰率が公算 123% 上昇する (Google 調べ)
出典:
- Webページの読み込み時間、3秒が限界か - 5秒になると直帰率激増 (2018 年 1 月)
- New Industry Benchmarks for Mobile Page Speed - Think With Google (2017 年 2 月)
検索に関わる指標の計測方法
Chrome User Experience Report (CrUX)
Chrome Dev Summit 2017 で発表されたサイトスピード指標のビッグデータで、Google Chrome のブラウザ履歴同期機能にオプトインしているクライアントから収集されたデータにアクセスできる。
提供形式は BigQuery のパブリックデータセット。また先日 Google PageSpeed Insights の結果にも反映されるようになった。
現時点で 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 が機械的に取得できる指標なので、ページの初期読み込み時間を示す単純な指標と言えると思う。
- Chrome User Experience Report
- Chrome User Experience Report: New country dimension | Web | Google Developers
Lighthouse
Google Chrome に搭載された web ページ監査ツール。
OSS として開発されており 取得できる指標は、どんどん増えている。現在は;
- パフォーマンス
- PWA
- アクセシビリティ
- ベストプラクティス
- SEO
の 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 サイトのレポートも問題なく取得できる。
PageSpeed Insights
Google が提供するサイトスピード計測 SaaS。先日のアップデートで、前述の CrUX と連携したスコア表示に変更された。
スコアが Speed と Optimization に 2 別され、Speed には FCP (First Contentful Paint) と DCL (DOMContentLoaded) にかかった時間の CrUX から取得されたクライアントの分布が表示されるようになった。