ページサイズの内訳

ファイルには2つのサイズがある

ネットワーク上でのサイズと、展開したあとのサイズです。たとえばサーバーが400 KBのスクリプトを110 KBに圧縮するとします。訪問者がダウンロードとモバイル通信で負担するのは110 KBですが、スマホは400 KBすべてを読み込まなければなりません。このツールは前者の数字、つまり転送バイト数で評価し、後者をその横に表示します。

バイト数はすぐに待ち時間に変わります。Lighthouseがテストに使う低速4Gのプロファイル（毎秒1.6メガビット）では、2 MBのページのダウンロードに約10秒かかります。しかもそれは、スクリプトが1つも実行される前の話です。

ダウンロードするもの

HTMLを取得したあと、ツールはブラウザが初回読み込みでリクエストするものをリクエストします：

• スタイルシートと、rel="preload"やmodulepreloadで予告されたファイル。
• src付きのスクリプト。ただしnomoduleの代替スクリプトと、ブラウザが実行しない種類のスクリプトは除きます。
• 画像。srcsetと<picture>では、デスクトップのブラウザが選ぶ最大の候補を取り、遅延読み込み画像ではdata-srcを読みます。
• 動画のポスター、ファビコン、インラインのstyle属性内の画像。
• @font-faceルールで宣言されたフォント（WOFF2があればそのファイル、最大12個）と、@importで読み込まれるスタイルシート。

チェックを短く済ませるため、いくつか上限があります。ファイル数80、1ファイル6 MB、合計15 MBです。ページのファイル数が80を超えると、リクエスト数は「≥」付きで表示されます。

評価の基準

目安として、HTTP Archiveが測定したモバイルページの中央値は約2.3 MBで、ここではDになります。つまり、ウェブ全体ではごく平均的なページでも、スマホでは遅いということがありえます。

結果をどう生かすか

200 KBを超える画像

ほとんどの場合、表示サイズより大きな画像が配信されています。表示幅（高密度ディスプレイならその2倍）で書き出し、srcsetでスマホには小さい版を出してください。

JPEGやPNGの画像

サーバーが対応していれば、ツールは重い画像上位8件をWebP（品質80）とAVIF（品質55）に変換し直し、それぞれの結果のサイズを表示します。こうして、削減量をあなた自身の画像で測ります。新しい形式は代替画像付きで配信してください：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

widthとheightのない画像

これは容量の問題ではありません。ページの読み込み中に文字が動いてしまう原因です。両方の属性を追加してください。

圧縮されずに送られたテキストファイル

1.5 KBを超えるHTML、CSS、JavaScript、SVGで、gzipやBrotliなしで届いたものです。サーバーの設定は圧縮とキャッシュの監査にあります。

1 MBを超えるJavaScript、または300 KBを超えるフォント

誰も使っていないライブラリやプラグインを取り除き、残りは必要なページでだけ読み込みます。フォントはWOFF2で2〜3種類のウェイトに絞りましょう。

炭素排出量の数値と、数えていないもの

推定はSustainable Web Designモデルのバージョン4に従っています。転送1ギガバイトあたり0.300 kWhと数え（データセンター、ネットワーク、訪問者の端末とその製造を含みます）、それに1 kWhあたり494 gのCO₂eという世界平均を掛けます。結果は1メガバイトあたり約0.15 gです。ガソリン車との比較には1キロメートルあたり170 gを使っています。おおよその規模として受け取ってください。同じページの2つの版を比べるのに向いています。