要点
Sorank のページサイズチェッカーは、ページの HTML 文書の大きさを測り、Google の基準のどの辺りにあるかを示します。上限は画像ではなく生の HTML に対するもので、それを超えた内容は登録されないことがあるため、インラインのコードや記述を軽く保つことが大切です。
さらに詳しく知るには、こちらに質問
Google には、クロール中にページをどれだけ読み込むかの明確な上限があり、生の HTML が 15MB を超えるページはそこで切り捨てられます。ページの HTML が Googlebot の処理する範囲を超えると、大切なコンテンツ、構造化データ、内部リンクが一度も登録されないことがあります。
Sorank のページサイズチェッカーは、ページ全体の大きさをその場で測り、Google が推奨する基準と比べて、効率よくクロールされ、登録されるには重すぎるページを見つける助けになります。
ページの大きさが SEO で重要な理由
ページの大きさは、検索エンジンがコンテンツをクロールし、描画し、登録する過程に直接影響します。ほとんどのページは十分に余裕のある範囲に収まりますが、動的なウェブアプリ、内容の多いランディングページ、重くなった CMS のテンプレートといった一部のサイトは、意外なほど大きな HTML 文書を生みます。
- クロールの効率：Google はサイトごとに限られたクロールの予算を割り当てます。ページが大きいほど URL あたりの予算を使うため、1 回の巡回でクロールされるページ数が減ります。
- コンテンツの切り捨て：生の HTML が Googlebot の処理の上限を超えると、文書の下のほうにある内容が登録されないことがあります。フッターのリンク、後から読み込まれる区画、ソースの末尾に置いた構造化データなどです。
- 描画のコスト：大きなページは、Googlebot の描画の仕組み（WRS）が処理するのに時間がかかります。登録が遅れ、完全に描画したページではなく生の HTML が使われることもあります。
- 表示速度への影響：ページの大きさは読み込み時間に直結します。大きな文書は取得、解析、描画に時間がかかり、Core Web Vitals や利用者の体験の指標を悪化させます。
- スマートフォンでのクロール：Google はモバイルファーストインデックスを採用しており、モバイル回線は帯域が狭くなります。重いページは、モバイルでのクロールと描画でさらに問題になります。
Google のページサイズの基準
Google が公表している上限を知れば、最適化の目標がはっきりします。
- 500KB 未満：理想的な範囲です。この大きさのページは効率よくクロールされ、速やかに処理されます。よく最適化された静的なページの多くがここに収まります。
- 500KB - 2MB：許容範囲ですが、見守る価値があります。インラインの CSS、JavaScript、埋め込みの多い複雑なページがここに入りがちです。最適化の余地を探してください。
- 2MB - 15MB：危険帯です。この大きさのページはクロールの予算を圧迫し、登録が遅れることがあります。HTML 文書の終わりに近い内容は、優先度を下げられたり見落とされたりする恐れがあります。
- 15MB 超：生の HTML に対する Google の明確な上限です。これを超えた内容は処理されません。ページが 15MB を超えると、大切なコンテンツが Google には見えなくなります。
これらの上限は、画像、CSS ファイル、JavaScript を含めたページ全体の重さではなく、生の HTML 文書の大きさに対するものです。ただし、外部のリソースも描画の速さとクロール全体のコストには影響します。
ページサイズチェッカーの使い方
このツールは、公開されている URL を簡単に分析します。
- URL を入力する：分析したいページの完全な URL を入力欄に打ち込むか貼り付けます。
- 結果を見る：HTML 文書全体の大きさと、Google の基準のどの辺りにあるかを示す目印が表示されます。
- 問題を見つける：推奨の上限を超えている場合は、HTML のソースを調べて、余分な記述、インラインのスタイル、埋め込みの SVG、過剰な DOM 要素、不要な JavaScript を探します。
ページが大きくなるよくある原因
HTML 文書が大きくなる原因には、いくつかの典型があります。
- インラインの CSS と JavaScript：大きな CSS の枠組みや JavaScript のライブラリを、外部ファイルとして読み込まずに HTML に直接埋め込むと、文書の大きさが大幅に増えます。
- 過剰な DOM 要素：深く入れ子になった HTML 構造や、何千もの DOM ノードを持つページは、文書が大きくなります。複雑なレイアウト、大きなメニュー、自動生成される一覧でよく起きます。
- インラインの SVG：HTML に直接埋め込んだ SVG は、特に複雑な図や、ページ内で繰り返されるアイコンで非常に大きくなります。
- 重複する内容の塊：繰り返しの HTML 構造を出力する CMS のテンプレート（コメント欄、関連記事、商品のバリエーションなど）は、ページの大きさを予想外に増やします。
- base64 で符号化した画像：画像を base64 の文字列として HTML に埋め込むのは、外部の画像ファイルを参照するよりずっと効率が悪く、文書の大きさを大きく増やします。
- JSON-LD の構造化データ：構造化データは SEO に大切ですが、細かすぎる schema の記述（特にバリエーションの多い商品ページ）は、HTML にかなりの重さを加えます。
- 外部のスクリプト：描画時に HTML に挿されるマーケティングのタグ、分析のスクリプト、チャットの部品は、Googlebot が処理する文書全体の大きさを増やします。
ページの大きさを減らす方法
推奨の基準を超えているなら、次の最適化を試してください。
インラインのリソースを外部ファイルに出す
インラインの CSS を外部のスタイルシートに、インラインの JavaScript を外部のスクリプトファイルに切り出します。HTML 文書が小さくなり、ブラウザがこれらを別にキャッシュできるため、クロールの効率と表示速度の両方が良くなります。
DOM の構造を簡単にする
入れ子の深さを減らし、不要な囲みの要素を取り除きます。Grid や Flexbox などの新しい CSS の手法を使えば、少ない HTML 要素で複雑なレイアウトを組めます。1 ページあたり 1'500 未満の DOM ノードを目安にしましょう。
重要でない内容を遅延読み込みにする
画面の下のほうの内容、コメント欄、関連記事の部品は、利用者がそこまでスクロールしたときにだけ描画される遅延読み込みに移します。最初の HTML 文書を小さく保ちながら、熱心な読者には内容をすべて届けられます。
構造化データを整える
JSON-LD の記述は簡潔に保ちます。schema の種類ごとに、必須と推奨の項目だけを入れてください。バリエーションの多い商品ページでは、すべてのバリエーションを並べる代わりに aggregateOffer を検討しましょう。
画像は外部参照にする
base64 で符号化した画像やインラインの SVG を、外部ファイルへの参照に置き換えます。SVG のアイコンは、アイコンを 1 つずつ HTML に埋め込むのではなく、外部に置いた SVG のスプライトを参照する方法を検討してください。
サーバー側の圧縮を有効にする
圧縮（gzip / Brotli）は、Google が測る非圧縮の HTML の大きさを減らすわけではありませんが、転送量を大幅に減らし、クロールの速さと表示速度を高めます。HTML、CSS、JavaScript の応答をサーバーが圧縮しているか確認してください。
ページの大きさと Core Web Vitals
ページの大きさは、いくつかの Core Web Vitals の指標と直接結びついています。
- Largest Contentful Paint（LCP）：大きな HTML 文書は取得と解析に時間がかかり、最大の表示要素の描画が遅れます。
- Interaction to Next Paint（INP）：DOM 要素が多すぎると、ブラウザの配置と描画の負担が増え、操作がもたつくように感じられます。
- Cumulative Layout Shift（CLS）：後から読み込まれる要素の多い重いページは、内容が順に描画されるなかでレイアウトがずれやすくなります。
ページの大きさを Google の推奨の範囲に保つことは、クロールの効率のためだけではありません。Core Web Vitals のスコアを上げ、検索での可視性を高める土台です。
ページサイズ監査の進め方
普段の SEO 監査の中に、ページサイズの確認を組み込んでください。
- まずテンプレートを監査する：テンプレートの種類ごと（ホーム、カテゴリーページ、商品ページ、ブログ記事）に大きさを確認します。テンプレートが大きすぎれば、それを使うすべてのページが影響を受けます。
- 動的に生成されるページを見守る：コンテンツを集めて表示するページ（検索結果、絞り込み後の商品一覧、タグの一覧）は、コンテンツが増えるにつれて大きくなりがちです。定期的に確認し直してください。
- 基準を超えたら知らせる：ページサイズの監視を、テクニカル SEO の進め方に組み込みます。HTML が 1MB を超えたページは見直しの対象として印を付けます。
- 公開のたびに確認する：新しい機能、拡張機能、テーマの更新は、黙ってページを重くします。公開のたびに重要なページを確認し、逆戻りを早く捉えましょう。
- 競合と比べる：競合のページサイズを確認し、業界の水準と照らし合わせます。軽いページは、読み込みの速さとクロールの効率の良さに結びついています。
ページサイズのよくある間違い
ページサイズを扱うときは、次の落とし穴を避けてください。
- ページ全体の重さしか測らない：画像、CSS、JavaScript を含むページ全体の重さは表示速度に関わりますが、Google のクロールの上限は生の HTML 文書に対するものです。HTML の大きさは必ず別に測ってください。
- サーバーが描画する内容を見落とす：サーバー側で描画しているサイトでは、出力される HTML が、元のテンプレートから想像するよりはるかに大きいことがあります。必ず描画後の出力を測ってください。
- ページ分けを忘れる：カテゴリーや一覧のページは、商品や記事が増えるとともに大きくなります。ページ分けの上限がないと、こうしたページは気づかぬうちに基準を超えていきます。
- 構造化データを盛りすぎる：考えうる項目をすべて入れると HTML が大きくなります。リッチな結果の対象に実際に関わる、必須と推奨の項目に絞ってください。
- 本番で確認しない：開発環境には、本番でページを重くする外部のスクリプト、広告、動的なコンテンツがないことがよくあります。ページサイズは必ず公開中のサイトで確認してください。
Sorank のページサイズチェッカーは、サイトのすべてのページを Google が丁寧にクロールし、登録できるように、必要な情報をその場で示し、問題がオーガニックの成果に響く前に捉えます。
