ページウェイトの削減はWebサイトの高速化にとって重要か、最適化するにはどうすべきか：ページウェイトはサイトの読み込み速度にどう影響するか

Webサイトモニタリングサービスを手掛けるDebugBearは公式ブログで、Webサイトのページウェイトが大きくなる要因、ページウェイトを最適化する方法、ページウェイトがSEOやページ速度に与える影響について解説した。

[＠IT]

　フロントエンド開発者向けのWebサイトモニタリングサービスを提供するWebサイト「DebugBear」は2023年4月4日（米国時間）に公式ブログで、Webサイトのページウェイト（重さ）が大きくなる要因、ページウェイトを最適化する方法、ページウェイトがSEOやページ速度に与える影響について解説した。

ページウェイトやページサイズとは

　ページウェイトは、Webサイトのパフォーマンスを測定するために使用される多くの指標の一つだ。ブラウザでWebページを開いた後、ネットワーク経由で何バイトのデータをダウンロードする必要があるかを示している。DebugBearはこのブログ記事でページウェイトを、「ページの重さ」「ページサイズ」「ページのダウンロードサイズ」などとも呼んでいる。

　下の図は、ブラウザがWebページを開いてからレンダリングを開始するまでに、複数の異なるリソースを読み込んでいることを示している。

Webページをレンダリングするために読み込まれるさまざまなリソースを示すリクエストのウオーターフォール図（提供：DebugBear）

Webページの平均サイズ

　インターネットトラフィックを計測しているHTTP Archiveによると、デスクトップ向けWebサイトを開くと、平均71のHTTPリクエストが行われ、平均2.3MBのデータが読み込まれる。

　モバイル向けWebサイトでは、平均2.1MBのデータがダウンロードされる。

　どちらの数字も増えている。デスクトップサイトの重さは、2018年には平均1.7MBで、2013年は平均わずか0.9MBだった。

　また、モバイルサイトはデスクトップサイトに近いページウェイトになってきている。

平均ページウェイトの変化（提供：DebugBear）

ページサイズに最も影響するWebサイトリソースの種類

　ページサイズに最も影響しているのは画像で、1ページ当たり平均1MB近くに達する。JavaScriptコードも平均0.5MBを占めている。

リソースの種類別に見たページウェイトの内訳（提供：DebugBear）

良いページサイズとは

　リソースの種類によってページ速度への影響は異なるため、小さなサイトでも読み込みが遅かったり、大きなサイトでも速かったりすることがある。一般的なガイドラインとしては、各ページで2MB以上のデータを読み込まないようにすることを目指すとよい。

　小さなページはサイズが100KBに満たないことがあり、それらは低速の接続でも非常に速くダウンロードできる。

ページウェイトはサイトの速度にどのように影響するか

　一般的に、多くのページデータが読み込まれる場合、より小さなWebサイトよりも読み込みが遅くなる。だが、リソースの種類によって、ページのパフォーマンスに与える影響は異なる。

• レンダリングブロックリソース：ページコンテンツを表示する前に読み込む必要があるため、できるだけ小さくする必要がある
• 画像やほとんどのJavaScriptコード：それほど重要ではなく、サイズのために読み込みに多少時間がかかっても、許容範囲内であることが多い
• チャットウィジェットのような二次的なページ要素：ユーザー体験に大きな影響を与えることなく、メインページのコンテンツの後にロードすることができる
• プリフェッチされるリソース：ページサイズを増加させるが、将来の使用のためにダウンロードされ、ページ体験に直ちに影響を与える

　ダウンロードサイズがパフォーマンスに影響を与えるかどうかは、主に、そのリソースが、「レンダリングをブロックするか」や、「Largest Contentful Paint（LCP：メインコンテンツの読み込み時間を測定する指標）を左右する画像のような、主要なコンテンツに必要であるか」にかかっている。

Webサイトのページウェイトを減らすには

　Webサイトのダウンロードサイズを減らす方法には、以下のようなものがある。

• 画像を最適化し、最新の画像フォーマットを使用する
• サードパーティーのコードを減らす
• 動画の埋め込みやチャットウィジェットにファサードを使用し、必要なときだけフルコードを読み込む
• フォールド下の画像を遅延読み込みする
• gzipとBrotliの圧縮を使用する

　また、パフォーマンスに最大の影響を与えるには、ページ上の最も重要なリソースに最適化を集中させる必要がある。

例：HTMLとJavaScriptのサイズが大きい場合

　ページウェイトがWebサイトの速度にどのように影響するかを分析するために、以下に示すリクエストのウオーターフォール図によると、ユーザー体験にとって最も重要な最初の幾つかのリクエストのみが表示されている。

幾つかの大きな遅いリクエストを含むリクエストのウオーターフォール図（提供：DebugBear）

　図には以下の2つの大きなリクエストがあることが分かる。

• HTMLドキュメント（149KB）
• JavaScriptバンドルファイル（618KB）

　この図の右側のウオーターフォール図は、ファイルが大きいとダウンロードに時間がかかることを示している。

　また、4つのフォントリクエスト（woff2ファイル）があり、いずれも60KBに満たないが、合わせて189KBとなっている。

　HTMLドキュメントの読み込みが終わると同時に、幾つかのページコンテンツが表示され始めるが、完全なページの読み込みは、JavaScriptコードが読み込まれ、実行されてからとなる。

　ページサイズを最適化するために、以下のことが行える。

• HTMLドキュメントのサイズを小さくする
• JavaScriptのバンドルサイズを小さくする
• Webフォントの読み込みを少なくする

　また、フォントのプリロードを削除して、帯域幅を早い段階でより重要なリソースに使用できるようにすることも可能だ。現在、フォントのダウンロードは、より重要なHTMLドキュメントのダウンロードと競合しており、そのためにレンダリング速度が低下している。

　DebugBearの「HTML Size Analyzer」のようなツールを使えば、HTMLドキュメントを要素別に分解し、最適化方法を特定できる。この場合、HTMLには多くのJSONデータが含まれており、ほとんどがHTMLコードで構成されているわけではない。

　また、リクエストをサイズ順に並べ替えて、ページ全体の重さに最も影響しているものを調べることもできる。

ページで最大のネットワークリクエスト（提供：DebugBear）

　この図は、大きな画像が、ダウンロードされるデータの多くを占めていることを示している。だが、この場合、Largest Contentful Paintの画像（LCPバッジで表示）は、Largest Contentful Paintが発生する（赤線で表示）ずっと前に読み込みが終わっている。つまり、画像のダウンロードがレンダリングを遅らせているのではなく、JavaScriptコードがレンダリングを遅らせていることになる。

　ウオーターフォール図は、優先順位の低いリクエスト、例えばGoogle Tag Manager（GTM）のリクエストも表示している。GTMの場合、リクエストの発生がかなり遅いため（ページを開いてから3.2秒後）、ページウェイトに占める割合は、パフォーマンスにあまり影響しない。

Webサイトのページウェイトを測定するには

　以下のような無料ツールを使って、特定のURLのページサイズを表示できる。

• DebugBearの「Website Speed Test」
• Googleの「PageSpeed Insights」
• Chromeブラウザの「デベロッパーツール」の「ネットワーク」タブ

DebugBear Speed Testでのページウェイト

　このツールでテストを実行すると、テスト結果の最上部の近くに8つの指標が表示される。その1つがページウェイトだ。

Speed Testでのテスト結果（提供：DebugBear）

Google PageSpeed Insightsでのページウェイト

　Googleの「Lighthouse」およびPageSpeed Insightsツールでは、パフォーマンス監査の診断セクションに含まれる「Keep request counts low and transfer sizes small」という項目を実行して、ページウェイトを確認できる。

Chrome デベロッパーツールでのページウェイト

　Chromeブラウザの「デベロッパーツール」の「ネットワーク」タブでは、「ログを保持」を無効にし、「キャッシュを無効化」を有効にすることで、現在のページのサイズが左下に表示される。

　なお、このページサイズには、Chromeの拡張機能で読み込まれたリソースも含まれる場合がある。

フルリソースサイズと転送サイズ

　サーバは、ブラウザにリソースを送信する際にHTTP圧縮を使用する。そのために多くの場合、ツールはフルリソースサイズと圧縮サイズの両方を報告する。

　通常は圧縮サイズに注目する。圧縮サイズは、ネットワーク経由でダウンロードされたデータの量を示し、ダウンロードにかかる時間を決定するからだ。

ページウェイトはSEOに影響するか

　Googleは、ページウェイトを直接のランキングシグナルとして使用していないが、ページサイズが大きいと、ページ速度やランキング要因として使用されるコアWebバイタルの指標に悪影響を及ぼす場合がある。

　ランキングデータは、GoogleがChromeユーザーエクスペリエンスレポートの一部として収集した実際のユーザーデータに基づいている。このため、サイト開発者や運営者はページウェイトではなく、ユーザー体験に直接焦点を当てることができる。