2020/6/3 追記
本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。合わせてご参考ください。
https://simulate.site/cheatspeed-insights/
PageSpeed Insightsのスコアを最も左右する要因は何か
先日、PageSpeed Insightsの点数はどのように計算されているか。100点を取るための条件という記事を書きました。
要約すると、PageSpeed Insightsの点数(以下PSIスコア)は指摘を減らして技術点を競うものではありません。シンプルにスタートダッシュの速さだけを見ています。
そこで気になった仮説を検証してみました。
仮説: TTFBとJavaScriptの量で点数が決まる
理論的にページ表示の初期段階では、TTFB(≒サーバーの応答時間)の長さ、HTML、CSS、JavaScriptのデータ量や複雑さがタイムを左右します。
次のように予想しました。
- TTFBが長いとその後のすべてが遅れるので、TTFBが最も重要だろう。
- 次にJavaScriptとCSSが多いとレンダリングブロックで足を引っ張るだろう。特にJavaScriptは重いしヤバい。
結論: JavaScriptの転送量が最重要
約300件のサンプルについて検証した結果、次の傾向を確認しました。
- JavaScriptの転送量が多いページほどPSIスコアは低い。
- 次にCSSのデータ量が影響し、全体のリクエスト数が多いページもPSIスコアが低くなりがち。
- TTFBはPSIスコアにあまり関係無い。
通販300サイトのデータで検証
以前、通販サイトについて調査したこちらのデータを利用します。約300サイト分のPageSpeed Insightsの結果について、次の数値とPSIスコアの相関係数を調べました。
- TTFB
- リソースタイプ(Document/Stylesheet/Script/Image/XHRなど)ごとのリクエスト数・サイズ・転送量
サイズは元々のバイト数で、転送量は通信経路においてGZIPなどで圧縮されたバイト数です。
PSIスコアと相関性が最も高いのはJavaScriptの転送量
相関係数は二つの値の因果関係を示す数値です。絶対値が0.4以上だと相関性があり、0.7以上だと相関性が強いとみなされます。
集計の結果、相関性の強い変数は次の通りです。ほぼ予想通り、JavaScriptとCSSが多いサイトはPSIスコアが低いという統計が得られました。
| リソース | 指標 | 相関係数 |
|---|---|---|
| JavaScript | 転送データサイズ | -0.605 |
| JavaScript | リクエスト数 | -0.536 |
| ページ全体 | リクエスト数 | -0.526 |
| JavaScript | リソースサイズ | -0.489 |
| Stylesheet | リソースサイズ | -0.485 |
| Stylesheet | 転送データサイズ | -0.418 |
| 画像 | リクエスト数 | -0.407 |
PageSpeed Insightsでもブロッキング要素を減らせという改善項目があります。これが最も重要でありそうです。
画像などを含むページ全体のリクエスト数が多いページもPSIスコアが低いという統計も興味深いです。ブロッキングの回数が増えるからか、トラフィック渋滞を引き起こすからか…次回調べてみたいと思います。
JavaScriptの転送量で点数の上限が決まる
JavaScriptのデータ転送量とPSIスコアの実際の散布図がこちらです。ばらつきはありますが、JavaScriptの転送量が多くなるほどPSIスコアの上限が下がることが一目瞭然です。
極論ですが、JavaScriptが重いサイトは他で何を頑張っても無駄ということが起こり得ます。
通販サイトのPSIスコアを偏差値で表すと、PSI80点で偏差値70(上位2%)、PSI55点で偏差値60(上位16%)でした。
JavaScriptは偏差値70クラスを目指すなら250KB以下、偏差値60クラスを目指すなら500KB以下をひとつの目安としてはどうでしょうか。
TTFBはPSIスコアにほとんど関係無い
さて、当初はTTFBが最も重要ではないかと予想しましたが、これは大ハズレでした。TTFBは0.07秒から7.6秒まで大きなばらつきがありましたが、PSIスコアの相関係数は-0.11でした。
理由はまた次回調べてみたいと思いますが、サーバー応答時間がユーザーの離脱率に大きく影響するのは言うまでもありません。
JavaScriptのダイエットを
JavaScriptは追加するより後で影響範囲を見極めて除去する方が難しいため、ゾンビスクリプトが残りがちです。
でも今回、使われていなくても残しておくだけでパフォーマンスに悪影響ということがわかりました。地道にダイエットしましょう！
- 昔使われてたけど今は使われていないJavaScriptライブラリはありませんか。
- トラッキングタグが多すぎませんか。
- head要素内にscript要素で外部参照していませんか。body要素の下の方に移動しましょう。
- 非同期にしても大丈夫なスクリプトはありませんか(script要素にasync属性をつけるとブロッキングしません)。
- コンテンツや見せ方、機能自体を見直しませんか。
特にファーストビューのカルーセルスライダーは、多くのサイトで見かけますがPSIスコア的には猛毒です。パフォーマンス意識の高いサイトではもうほとんど使われていないでしょう…