WooCommerceの商品ページは、たいてい許容できる速さで読み込まれます。ところがショップページ、カテゴリー一覧、検索結果はそうでないことが多く、個々の商品は問題なく感じられるため店舗運営者はしばしば驚きます。違いは算数です。商品ページが表示するメイン画像は一枚。二十四商品を並べるカテゴリーページは少なくとも二十四枚、ホバー効果やギャラリーのプレビューを数えれば倍になることも珍しくありません。

この掛け算こそ、カタログページが店舗で最も遅い場所になりやすい理由であり、同時に商業的に最も重要なページである理由でもあります。訪問者が到着してから買うものを見つけるまでの、ちょうど間に位置しています。

遅いカタログの大半に共通する型: テーマがWordPressの生成していないサムネイルサイズを要求し、ブラウザがフルサイズのアップロードをダウンロードしてページ内で縮小している。二十四商品がそれぞれ2メガバイトの写真を三百ピクセルで表示するために送れば、五十メガバイトのカテゴリーページになり、どれだけキャッシュを足しても評価は上がりません。

カタログページの挙動が違う理由

一覧ページでは、商品ページでは起きない三つの要素が重なります。

枚数。 グリッド内の商品はそれぞれ少なくとも一つの画像リクエストを生みます。WooCommerceの既定では一ページ十六件や二十四件の表示が多く、規模の大きい店舗はページ送りを減らすためにさらに増やします。

ホバー画像とギャラリー画像。 多くのテーマは、ホバー時の入れ替え用に商品ごと二枚目を先読みします。これはページの画像枚数を静かに倍にし、しかも二枚目は操作するまで見えないため、初期表示には何も寄与しないまま同じ帯域を消費します。

レイアウトの不安定さ。 画像用の領域を確保しないグリッドは、画像が届くたびにずれます。商品ページなら一度のずれは耐えられます。二十四枚のグリッドでは累積した動きがCumulative Layout Shiftの悪化を生み、クリックしようとした瞬間にページが跳ねる体験になります。

結果として、カタログページは商品ページにはない理由でCore Web Vitalsを落とし、商品テンプレートを最適化してもそこには何の効果もありません。

大半の原因であるサイズの不一致

WordPressはアップロード時に一連の画像サイズを生成します。WooCommerceはその上に独自のサイズを登録します。テーマがさらに登録します。ブラウザが実際に受け取るものは、テンプレートがそのうちどれを要求するか、そしてそのサイズが存在するかで決まります。

失敗の仕方は静かです。商品のアップロード後に登録されたサイズをテーマが要求すると、WordPressはそれを生成していないため、フルサイズの元画像にフォールバックします。ブラウザが縮小して収めるので、ページは正しく見えたままです。ただサムネイルを表示するために数メガバイトを運んでいるだけです。

これはツールなしでも見つけられます。カテゴリーページを開き、ネットワークパネルを開いて、画像リクエストをサイズ順に並べてください。転送サイズが元のアップロードの重さの一部ではなく近い値なら、間違ったサイズが配信されています。読み込まれた画像の本来の寸法を、画面上で占める領域と比べてみてください。三百ピクセルのタイルを埋めるために二千ピクセル幅で届く写真は、たった一つの観察で問題のすべてを示しています。

対処は、要求されたサイズが存在するようサムネイルを再生成するか、配信時に正しいサイズを返してその問いが生じないようにするかのどちらかです。

遅延読み込みと、その落とし穴

WordPressは既定で画像を遅延読み込みします。長いグリッドの大部分は折り返しより下にあるため、これはほとんどどのページ種別よりカタログページに効きます。

ただし二つの誤りがその効果を打ち消します。

最初の行を遅延させる。 到着時に見えている画像は即座に読み込むべきです。その中で最大のものを遅延させると、ブラウザの発見が遅れ、それがたいていLargest Contentful Paint要素であるため、計測値が直接悪化します。多くのテーマは、すべての商品タイルに遅延読み込みを一律適用してここを誤ります。

ネイティブ実装と競合する遅延読み込みプラグイン。 ブラウザの仕組みの上に独自の遅延読み込みを重ねるプラグインを走らせると、画像が読み込まれない、二重に読み込まれる、ちらつくといった症状が出ます。パフォーマンス系プラグインを入れているなら、ブラウザがすでに行っていることを重複させていないか確認してください。

配信、つまりスケールする部分

サムネイルの再生成は今日のカタログを直します。来月は直しません。新しい仕入先が別のアスペクト比で写真を送ってきたときや、テーマを変えて必要なサイズがまた変わったときには効きません。

配信時に画像を変換すれば、この堂々巡りを避けられます。元画像はアップロードされたまま残り、配信されるサイズは数か月前に生成されたものではなくURLが決めます。グリッドを変えるならパラメータを変える。再生成の実行はなく、欠けたサイズがフル解像度の元画像にフォールバックする危険もありません。

これはカタログに特に向いています。同じ商品写真はたいてい三つのサイズで現れるからです。グリッドのタイル、商品ページの画像、そして拡大またはライトボックス表示です。画像単位の課金モデルなら商品ごとに三件の請求になります。Cloudflareのモデルなら、商品数にかかわらず三つの個別バリアントであり、同月内の繰り返しリクエストは無料です。

Cloudflare Image TransformationsとWordPressの画像プラグイン の比較では、課金モデルの違いと、どの形のライブラリにどちらが向くかを扱っています。

変えるべきこと、その順番

順番どおりに進めてください。それぞれ単独で測定でき、順序を崩すと何が効いたのか判断しにくくなります。

まずサイズの不一致があるかどうかを確かめます。もしあるなら、それが直るまで他は問題になりません。グリッド画像の転送サイズを、実際に占める領域と比べてください。

次にページが要求する画像枚数を減らします。テーマがホバー画像を先読みしていて、その効果なしでも構わないなら無効にしてください。一ページ二十四商品が誰かの役に立っているのか、それとも十六商品で速く読み込むほうがよく売れるのかを考えてみてください。

次に遅延読み込みの境界を直し、最初に見える行は即座に読み込み、その下は読み込まないようにします。

次に配信に取りかかり、配信されるサイズが表示サイズと一致し、カタログが変わっても正しいままになるようにします。

キャッシュが意味を持つのはそのすべての後です。遅いページをキャッシュしても、速くなるのではなく安定して遅くなるだけで、それでいて最も簡単に導入できるために最初に手を伸ばされがちな手段です。

画像を越えた全体像については、WooCommerceのパフォーマンス がデータベースクエリ、プラグインのオーバーヘッド、キャッシュされないフラグメントなど、店舗を遅くする他の要因を扱っています。

きちんと測ってもらう

店舗運営者はたいてい、店が遅いと感じていることは分かっていても、十通り以上ある原因のどれが効いているのかは分かりません。当て推量は高くつきます。分かりやすい対処は、すでに試された後だからです。

Mecanikは、トップページを測って終わりにするのではなくカタログページを名指しで測るWordPressパフォーマンス監査 を行い、対処が設定の範囲を超える場合はWordPress開発 として実装まで引き受けます。訪問者を失っているのがカテゴリーページなら、測定はそこから始めるべきです。

関連記事: WooCommerceが遅い本当の理由と高速化の順序 、トラフィックを落とさないサイト移行：2026年版 、Image Transformations と WordPress画像プラグイン比較 、ECサイト開発：Shopifyとカスタム開発の比較 、ECサイトのGEO：AIの回答に載る商品データ 。

よくある質問

WooCommerceのカテゴリーページが商品ページより遅いのはなぜですか。 商品ページはメイン画像を一枚読み込みます。カテゴリーページは商品ごとに一枚読み込み、ホバー画像で倍になることも多いため、二十四商品で四十八件の画像リクエストになり得ます。商品ページでは問題にならない同じ画像処理が、グリッドでは悪い形で積み上がります。

WooCommerceが誤ったサイズを配信しているかはどう分かりますか。 カテゴリーページとブラウザのネットワークパネルを開き、グリッド画像の転送サイズを元のアップロードと比べてください。一部ではなく近い値なら、テーマがWordPressの生成していないサイズを要求しており、フルサイズの元画像がブラウザ内で縮小されています。

サムネイルを再生成すべきか、配信時に変換すべきか。 再生成は現在のカタログを直しますが、サイズやテーマを変えるたびに繰り返す必要があります。配信時の変換はURLからサイズを決めるため、テーマ変更や新規アップロードのあとも再生成なしで正しいままです。

遅延読み込みはWooCommerceのカタログページに有利ですか、不利ですか。 有利です。長いグリッドの大部分は折り返しより下にあるからです。ただし最初に見える行は即座に読み込むべきです。見えている最大の画像を遅延させるとLargest Contentful Paintの計測が直接遅れますが、これは多くのテーマの既定になっています。

パフォーマンス上、一ページあたり何商品が最適ですか。 画像が少ないほどページは速くなりますが、ページ送りが増えれば閲覧のクリックも増えます。十六から二十四が一般的です。数そのものより、各画像が正しいサイズかどうかのほうがはるかに重要で、適切なサイズの二十四枚は過大な十二枚に勝ります。