🛍️ 商品表示初級

商品画像のプリロード出力

商品オブジェクトから image_tag フィルターを使い、preload 属性付きで画像を出力するスニペット。複数商品のループ内でも使える基本的なパターン。

用途

商品詳細ページやコレクションページで、商品画像をプリロード指定して LCP(Largest Contentful Paint)パフォーマンスを改善したいとき。

設置場所

snippets/product-image.liquid に配置し、product.liquid または sections/main-product.liquid 内で `{% render 'product-image', product: product %}` で呼び出す。ループ内で複数商品の画像を出すときは、セクション内の繰り返し処理に直接埋め込むとよい。

注意点

image_tag の preload 属性は LCP 対象画像（ファーストビューの大きな画像）に限定して指定しないと、HTTP/2 での優先度管理が不正確になる。product に featured_image が未設定だと nil エラーになるため、出力前に {% if product.featured_image %} で分岐する。ループ内では商品数が多いとプリロード指定が過度になり、かえってパフォーマンスが低下することもあるので、最初の 3～5 商品に限定する工夫が有効。

タグ:productimagepreloadperformancelcp

コード

16 行 / liquid

{%- comment %}
  Hey buddy, how are you doing today?
  Excited about Liquid?
{%- endcomment %}
{{ product | image_tag: preload: true }}
{% assign x = 1 %}

{% for product in products %}
  {%- comment %}
    Hey buddy, how are you doing today?
    Excited about Liquid?
  {%- endcomment %}

  {{ product | image_tag: preload: true }}
{% endfor %}

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/pure-liquid/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

商品画像のプリロード出力

コード

出典・ライセンス

関連項目

商品ブロック内のLiquid実行

商品ページの見出し

商品レビューバッジの表示

定期販売プランのデータ属性を動的に生成

商品ページの区切り線

商品バリアント選択ラジオボタン