ページ数の多いサイトを軽くするとは、全件を並べた一覧を件数で分け、画面の外の画像を後から読み込ませ、全ページに入る部品を見直して、1ページあたりの大きさを減らすことです。同じ型のページが数千あるサイトでは、型を1か所直すと全ページが同時に軽くなります。
表示の速さの指標はCWVの3指標に、写真の圧縮は画像の圧縮にまとめました。ここでは、データで作るサイトに特有の重さの元と、その直し方を扱います。
どこから重くなる？
データのサイトの重さは、たいてい次の3か所から来ます。
- 全件を並べた一覧：行が増えるたびに、HTMLが大きくなる
- 行ごとの画像：会社のロゴや製品写真を、一覧の全行に出している
- 全ページに入る部品：大きなメニュー、図、構造化データを、型に埋め込んでいる
1つ目と2つ目は一覧のページで、3つ目は全ページで起きます。ページ数が多いサイトでは、3つ目の数KBが、ページの数だけ積み上がります。
一覧は、件数で分ける
全件を1ページに並べると、データが増えるほどページが大きくなります。私たちの採用の数字のデータベース（カイシャのホント）では、ランキングのページがそうなっていました。
私たちの実測（2026年10月）
カイシャのホントのランキングを、全県・全項目で1ページ100社に分けた（101位からは2ページ目以降）。分ける前でいちばん重かったページ（大阪府の男女の賃金差）は645KB、分けたあとは88KB。
出典：自社サイトの組み立ての記録（2026年10月24日）
いちばん重いページを見たのは、平均より上限のほうが問題になるからです。県ごとに会社の数が違うので、件数の多い県ほど一覧のページは大きくなります。件数で分けると、どの県でも1ページの大きさの上限が決まります。
2ページ目以降のURL、canonical、ページどうしのリンクの付け方はページネーションに書きました。分けた後も、各ページが正しく検索に見えるようにします。
HTMLの大きさは、どこまで読まれる？
GoogleのGooglebotの説明では、Google検索のクロールで、GooglebotはHTMLなど対応するファイルの最初の2MBを読みます。PDFは最初の64MBです。上限に達すると取得を止め、それまでに取れた部分だけをインデックス登録の対象として送る、と書かれています。
この上限は、圧縮する前の大きさに当てはまります。配信のときに圧縮されて小さく見えても、Googlebotが数えるのは元のHTMLの大きさです。HTMLから読み込むCSSやJavaScriptは、それぞれ別に取得され、同じ上限が当てはまるとも書かれています。
私たちの645KBのページは、この上限より小さいものでした。分けたのは、検索に読まれないからではありません。スマホで開く人に、100社を超える表を一度に送らないためです。全件の一覧が2MBに近づくなら、表の後ろのほうがGooglebotに読まれないおそれがあります。
組み立てた後に、大きいページを並べる
データから組み立てるサイトでは、出力したHTMLの大きさを、公開する前に並べて見られます。大きい順に上から10ページを出し、どの種類のページかを確かめます。いちばん大きいページが一覧なら件数を、記事なら埋め込んだ図や表を疑います。
この確認は、データを足すたびに回します。新しい県を足すと、その県の一覧だけが大きくなることがあるからです。
画像は、画面の外のものだけ後から読む
img要素のloading属性は、画像をいつ読み込むかをブラウザに伝えます。MDNのimg要素の説明では、次の2つの値があります。
eager：画面に入っているかどうかにかかわらず、すぐに読み込む。何も書かないときはこの動きになるlazy：ブラウザが決めた、画面からの距離に近づくまで読み込みを遅らせる
100社の一覧に会社のロゴを出すなら、画面の外にある行のロゴにloading="lazy"を付けます。開いた時点で全部のロゴを取りに行かずに済みます。
最初に見える画像には付けない
web.devの遅延読み込みの説明は、ページを開いたときに画面に入りそうな画像、とくにLCPの画像は遅延読み込みしないよう書いています。ブラウザは、画像がページのどこに置かれるかが分かるまで遅延読み込みの判断ができず、そのぶん読み込みが遅れるからです。
一覧の型に一律でlazyを付けると、1行目のロゴや、ページの頭の大きな画像まで後回しになります。型の中で、最初の画面に入る場所の画像と、それより下の画像を分けて書きます。
このサイトの記事一覧でも、並んだ記事の画像にはloading="lazy"を付け、記事ページの頭の画像には付けずにfetchpriority="high"を付けています。fetchpriorityは、MDNの説明では、ほかの画像と比べた取得の優先度をブラウザに伝える属性です。
寸法を必ず入れる
同じweb.devの説明は、すべてのimg要素にwidthとheightを付けるよう勧めています。寸法が無いと、遅延読み込みした画像が間に合わなかったとき、画像が入った瞬間に表の行やボタンの位置がずれやすくなります。ロゴのように縦横比がそろわない画像も、表示する枠の寸法を決めておきます。
全ページに入る部品を見直す
ページ数の多いサイトでは、型に入れたものが全ページに複製されます。次のものは、1ページでは小さくても、数千ページでは無視できません。
- HTMLの中に直接書いた大きな図（SVG）や、全ページ同じ長いメニュー
- 画面に出していない内容まで入れた構造化データ
- 使っていないCSSやJavaScriptの読み込み
全ページ同じCSSやJavaScriptは、別のファイルに分け、キャッシュの設定をしておけば、ブラウザは2ページ目から手元の写しを使えます。HTMLに直接書くと、ページを開くたびに送り直しになります。構造化データは、画面に見えている内容と合わせるのが決まりなので、見えていない行まで入れると、重くなるうえに食い違いの元にもなります。
直した後は、何を見る？
直した型で数ページを選び、PageSpeed Insightsで確かめます。指摘の読み方はPSIの見方にまとめました。実際に使う人の数字は、Search Consoleのウェブに関する主な指標のレポートで、同じ型のページがまとめて良くなったかを見ます。
データのサイトでは、ページの種類ごとに型が違うので、直した型のページだけを選んで比べます。種類の分け方はページの種類別に見るに書きました。データで作るサイトの全体はデータベース型サイトから読めます。
仕様・出典の確認日：2026年10月26日。
