循环网格很卡？查询、图片、缓存、渲染排查指南

ループグリッド（Loop Grid）が「動作が重くなる」場合、通常は特定のポイントが故障したわけではなく、「クエリの遅延 + 画像の負荷 + キャッシュの未ヒット + フロントエンドのレンダリング負荷」が重なった体感的な問題である。以下に クエリ / 画像 / キャッシュ / フロントエンドレンダリング 四本の線で書かれ、それぞれがあなたに伝えているワードプレスそしてエレメンタ、ブラウザのどこで具体的に確認すればよいか。

1）まず確認：遅延はバックエンドかフロントエンドか（どこで確認するか）

1.1ブラウザTTFBを確認（バックエンドが遅いかどうかを判断）

場所Chrome → F12キーを押す → Network（ネットワーク）

オペレーション

ダニ キャッシュを無効にする（テスト専用）
ページを更新（Ctrl+R）
一番上のやつをクリック ドキュメントリクエスト（通常タイプは Doc / HTML）

ドキュメント名をクリックすると、右側に表示されます タイミング（計時）

どう見るか：

待機時間 (TTFB) 長い：バックエンドが遅い（クエリ/キャッシュ/PHP）
TTFBは長くないがページスクロールがカクつく：フロントエンドレンダリング負荷が高い

2）検索（ループグリッド（データ取得）：どこで「1ページあたりの件数、クエリ設定」を確認しますか？

2.1 Elementorで各ページに表示される件数を確認する

場所このページを編集 → Loop Grid ウィジェットをクリック → 左側のパネル「コンテンツ」

一般的なエントリ名（バージョンによって若干異なる場合があります）：

コンテンツ → レイアウト（レイアウト）
ページごとの投稿数 / ページごとのアイテム数 / ページごとの表示数（条数）

あなたが実施すべきテスト：

各ページの表示件数を24から12に変更し、さらに8に変更して、表示速度が向上するかどうかを比較する

2.2 エレメンタクエリタイプとフィルタ条件

場所ループグリッド → コンテンツ → クエリ

これらの項目が過度に開かれているかどうかを重点的に確認してください：

含める / 除外する（含める／除外する）
注文方法（並べ替え：人気順／売上順／評価順は通常より遅い）
ソース（出典：記事／製品／記事カテゴリタイプ）

3）画像：どこで「1枚あたりのサイズと合計サイズ」を確認できますか？

3.1 ブラウザで画像のサイズを確認する

場所Chrome → F12 → ネットワーク → フィルタ選択 Img

オペレーション

リフレッシュページ
点 Img
リストを見る サイズ（大小）

どう見るか：

リストサムネイルの提案 50KB–150KBできるだけ超えないようにしてください 200KB
もし300KB、500KB、1MBといったサイズのサムネイルが多数表示されている場合、それが主な遅延要因です。

3.2 ワードプレスサムネイルサイズ設定（基本）

場所管理画面 → 設定 → メディア

あなたは確認できます：

サムネイルのサイズは適切に設定されていますか（大きすぎないように）
ただし注意：Elementor/テーマも独自のサイズルールを使用している可能性があります

4）(キャッシュ「キャッシュヒットの有無やバイパスされたかどうか」はどこで確認できますか？

4.1 プライベートウィンドウでキャッシュの有効性を確認する（最も簡単）

場所Chrome → 右上の三点メニュー → プライベートウィンドウを開く

オペレーション

同じページを無痕で開いて、速度を比較する
どう見るか：
無痕モードは明らかに高速です：ログイン状態がキャッシュをバイパスしているか、キャッシュルールがログインユーザーに対して異なる可能性があります

4.2 ブラウザでキャッシュ/CDNのヒットを確認する（やや高度）

場所Chrome → F12 → Network → Doc/HTMLをクリック → Response Headers（レスポンスヘッダー）

次のようなフィールドが表示される場合があります（サーバーによって異なります）：

cf-cache-status（Cloudflare よくある質問：HIT/MISS）
エックスキャッシュそしてキャッシュ制御 他

どう見るか：

HITがあればより安定する
長期間MISSが続く場合、キャッシュがヒットしないか、ルールによって回避されていることを示します（例：パラメータ付き、ページの動的コンテンツが多い場合）。

5）前方部分レンダリング：どこで「スクロール時のフレーム落ち、レンダリング負荷」を確認するか

5.1 ブラウザでのスクロール時のパフォーマンス

場所Chrome → F12 → Performance（パフォーマンス）

オペレーション

録画（Record）をクリック
ページを3～5秒間スクロールする
録画を停止

どう見るか：

レンダリング／ペインティング 高い：シャドウ、フィルター、アニメーション、DOMが多すぎる
スクリプティング 非常に重い：JSが重すぎる（通常はアニメーションや読み込みスクリプトが多すぎるため）

6）この順序で進めれば、最も早く位置を特定できます

ブラウザネットワークを見る TTFB（バックエンド／フロントエンドを確定）
Elementor は 1ページあたりの件数を半減 比較する
ネットワークフィルタリング画像閲覧 画像サイズ
痕跡のないウィンドウ比較 キャッシュヒット率の差異
パフォーマンス録画をスクロールして見る レンダリングは限界を超えているか

巻き上げる

順番に終わらせる TTFB → ページあたりの行数 → 画像サイズ → キャッシュヒット率 → スクロール性能ボトルネックがどこにあるか特定できる。次に、最も遅い項目だけを修正する：

TTFB 高：クエリを簡素化し、1ページあたりの表示件数を削減する
画像が大きい：サムネイルサイズを統一し圧縮する
スクロールカード：アニメーションをオフにする、シャドウを減らす、フィールドを減らす

修正後、痕跡を残さないリロードを2回実施して再テスト：TTFBとFinishが明らかに低下したため、解決済みとする。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み