PageSpeedの採点ロジック

PageSpeedスコアはブラックボックスだと思われることが多く、算定に公式があることはあまり知られていません。

ページ表示の初期段階における5つの指標に注目することでPageSpeedは意図的に改善できます。

弊社のブログで解説しているのでご参考ください。

スコアの公式に合わせた約20通りのプラクティス

本レポートで検証する約20通りの表示高速化の試みのひとつひとつをプラクティスと呼びます。

プラクティスでは、幅広いWebページに対しPageSpeedの改善が期待できる手法と、条件を変えてボトルネックを知るための実験的な変更があります。

プラクティスがPageSpeedスコアに与える影響はページによって当たり外れがあり、正確な予測は困難です。

そこで本サービスはどのプラクティスに効果が高いかを予測ではなく、リハーサルによる比較検証で特定します。

本サービスで実施するプラクティスは予告なく変更される場合があります。

# プラクティス 概要 実施する改修
1 original オリジナルURL 実際に公開されているページです。
2 snapshot スナップショット オリジナルURLから複製しただけのコピーページです。
3 minify-html HTMLの最小化 HTMLソースコードを最小化します。
4 minify-css CSSの最小化 CSSファイルそれぞれの内容を変えず、不要な空白などを削除します。
5 minify-js JavaScriptの最小化 JavaScriptファイルそれぞれの内容を変えず、不要な空白などを削除します。
6 below-js JavaScript参照を下部に移動 script要素をすべてbody要素の末尾に集約します。
7 defer-js JavaScriptのdefer参照 外部JavaScriptをdefer属性付きで参照して非同期読み込みを行います。
8 optimize-js JavaScriptの最適化 JavaScriptの最小化、1ファイルに連結、async属性を付与してhead内に配置します。
9 lazyload-js JavaScriptによる画像遅延読み込み JavaScriptにより、オフスクリーンの画像をスクロール発生時に読み込みます。
10 blink-lazyload Chrome自体による画像遅延読み込み オフスクリーンの画像にloading=lazy属性を追加します。
11 lazyinclude オフスクリーンHTMLの遅延読み込み JavaScriptにより、オフスクリーンのHTMLをスクロール発生時に読み込みます。
12 lightfile 既存フォーマットでの画像軽量化 JpegとPNG画像をフォーマットをそのままにLightFileにより軽量化します。
13 webp WebPによる画像軽量化 次世代画像フォーマットWebPによりJpegとPNG画像を軽量化します。
14 less-hero 高負荷リソースの軽減 ファーストビューのカルーセルスライダーや大判の画像を減らすなどを試行します。
15 cdn CDNの利用 スナップショットをCDN(CloudFront)で配信します。
16 res-hints Resource Hintsの利用 外部ドメインについてdns-prefetchとpreconnectを設定します。
17 half-ttfb TTFBの半減 TTFB(≒HTML応答時間)を意図的に半減させます。
18 long-ttfb TTFBの3秒延長 TTFB(≒HTML応答時間)を意図的に3秒延長させます。
19 no-js JavaScriptの削除 JavaScriptの影響を知るためすべて削除します。
20 no-3rd サードパーティJavaScriptの削除 サードパーティJavaScriptの影響を知るためすべて削除します。
21 no-body JavaScriptとCSS以外のbody要素内削除 HTML DOMの影響を知るためbody要素内のCSSとJavaScript以外の要素をすべて削除します。
22 fastest 最速プラクティス 安全性や難易度度外視して最も高いスコアを狙うプラクティスの組み合わせです。