Liquidのパフォーマンス
描画時間を悪化させるLiquidの書き方を見抜き、書き直せる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、描画（ページを組み立てる処理）を遅くするLiquidの書き方を見抜き、書き直せるようになります。
受託では、定番の遅い書き方を知っていると「商品一覧が遅い」をコードレビューの段階で止められます。
重いオブジェクト参照とは
遅さの定番は、ループの中で重いオブジェクトを参照する書き方です。all_products['handle']をループ内で呼ぶ、collections.all.productsを全件たどる、商品カードごとにproduct.collectionsを参照する、の3つが代表です。
見た目はふつうのfor文なので、気づきにくいのが厄介です。
ネストしたループは件数の積で増える
コレクション × 商品 × バリエーションの三重ループは、処理の回数が件数の積で増えます。
必要なデータはwhereやmap（配列を絞る・取り出すフィルタ）で先に絞ります。paginateで1ページに出す件数も控えめにします（上限は公式で確認します）。
「全件表示」は、ページ速度とAPIの両面で無理があります。
renderはどの単位で呼ぶか
大きいオブジェクトを毎回渡すrenderを数百回呼ぶより、ループをrenderの中に入れるほうが軽くなります。{% render 'x' for items as item %}の書き方も選択肢です。
直す前に計測する
書き換えの前に、theme profileで最も時間を使っているセクションを特定します。
推測で書き換えると、効果のない場所を直して時間を失います。
計測 → 特定 → 修正の順に進めます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。