アセットの読み込み戦略
assetsの配信・キャッシュ・読み込み順を理解し、レンダリングをブロックしない構成にできる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、assets（テーマのCSS・JS・画像を置く場所）の配信とキャッシュの仕組みを知り、表示をブロックしない読み込み順を組めるようになります。
受託では「CSSを直したのに反映されない」「headに置いたスクリプトで表示が遅い」という相談を、この知識で防げます。
asset_urlとキャッシュの更新
asset_urlが出力するURLには、?v=のバージョンが付きます。
ファイルを更新するとこの値が変わり、ファイル名を変えなくてもCDNのキャッシュが切り替わります。
2026-03から、`image.png?123`のような「キーの無いクエリ」ではキャッシュが更新されなくなりました。
URLは必ずasset_url / file_urlで作ります。
Theme Checkにも、アセットURLのフィルタ利用を検査するルールがあります。
CSSはどう分けるか
共通のbase.cssは、headでstylesheet_tagで読みます（preload: trueで優先度を上げられます）。
セクション固有のCSSは{% stylesheet %}に書きます。
クリティカルCSS（最初の表示に必要な最小限のCSS）をインラインにするなら、量を最小限にとどめます。
JSはどう読むか
<script src defer>かtype="module"で読み、headで同期スクリプトを読みません。content_for_headerが挿入するShopify側のスクリプト（アプリ埋め込みを含む）は、テーマから制御できません。
発展：assetsの制約と要望への答え方
assetsにはサブディレクトリを作れません。
大きな画像はassetsではなく、「ファイル」（CDN）やimage_picker経由で扱います。
「Google Fontsを5書体、headで同期読み込み」のような要望が来ることがあります。
そのときは、速度への影響を数字で説明して代替案を出します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。