今まで完全に見落としていましたので備忘録として。
WareHouseテーマ(Shopify)では、商品コレクションと商品ページで共通利用しているコンポーネントがいくつかあります。
商品画像を描画しているファイルもその1つです。(/snippets/product-gallery.liquid)
コレクションページ、商品ページ共通で、商品画像の描画に同じファイルを呼び出す(loading=”lazy”が指定されているファイル)ため、商品ページの画像はファーストビューで表示されるにも関わらず、loading=”lazy” が指定されています。
商品ページのloading=”lazy”回避策
{%- if request.page_type == 'product' -%}
// 商品ページ
{%- else -%}
// その他
{%- endif -}
でページ種類は識別できますので、商品ページなのかコレクションページなのかで分岐して、適切なloading属性を出力するように調整することが望まれます。
注意点として、商品ページ下部に関連商品が表示されているときはページ種類だけでは識別できません。
独自settingなどで調整する必要があります。
