概要
ブラウザはページのどの部分でも表示する前に、まずページのHTML文書全体(少なくとも処理を始めるのに十分な部分)をダウンロードする必要があります。これは、後から読み込まれる画像や動画などのメディアとは別の話です。このチェックは、まさにこの最初のHTML文書自体のサイズを見ており、通常より大きく膨らんでいる場合にそれを検知します。
HTML文書が肥大化しがちなのは、多くのコンテンツが直接インラインで埋め込まれている場合です。大きなスタイル用コード、スクリプト、あるいはページに直接貼り付けられた繰り返しのコンテンツなどが該当し、こうしたものはブラウザが一度読み込んでキャッシュできる、別々の再利用可能なファイルに保つべきものです。
重要な理由
大きなHTML文書は、ブラウザが何かを描画し始められるようになるまでのダウンロードと処理に、目に見えて長い時間がかかります。これはページのさらに下にある副次的なコンテンツだけでなく、訪問者が最初に目にするもの自体の表示を遅らせます。この影響は低速なモバイル回線でより顕著になり、データが増えるたびに、ページが反応しているように感じられるまでの実際に体感できる時間が積み重なっていきます。
肥大化したHTMLファイルは、より根深い構造的な問題の兆候であることも多いです。本来は別々の、キャッシュ可能なファイルに整理されるべきコンテンツやコードが、そのページ内で、あるいはサイトのすべてのページで、インラインで重複してしまっているのです。
修正方法
- 何がファイルの大部分を占めているかを特定しましょう。ブラウザの開発者ツールで、基本のHTML文書自体を含む、ページのリソースのサイズ内訳を確認できます。
- 大きなインラインCSS(スタイル用コード)のブロックを、ページごとに繰り返す代わりにブラウザが一度読み込んで各ページで再利用できる、別の
.cssファイルに移動します。 - 同じ理由で、大きなインラインJavaScriptも別の
.jsファイルに移動します。 - ページのコード内で誤って重複しているコンテンツ(同じブロックが2回以上繰り返されている箇所)がないか確認し、重複を削除します。
- サイトビルダーを使っている場合、これは通常自動的に管理されています。ここで異常に大きなページが見つかった場合、プラットフォーム自体よりも、追加した重いカスタムコードの埋め込みが原因であることが多いので、追加したカスタムコードブロックを確認してください。