JS / CSSの読み込み最適化
レンダリングをブロックしない読み込み構成と、フォント読み込みの設計ができる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、描画を止めない読み込みの構成と、フォント読み込みの設計ができるようになります。
受託では、読み込みの「順番と分割」を先に設計しないと、画像を直しても速くならないストアが多いです。
スクリプトはdeferかtype="module"にする
theme.liquidの先頭で同期読み込みしているスクリプトを無くします。
同期スクリプトは、取得と実行が終わるまで描画を止めるからです。
サードパーティのタグ（計測など外部のスクリプト）は、ピクセルへ移します。
CSSはどう分けるか
全ページ共通のbase.cssと、セクション固有のCSSに分けます。{% stylesheet %}は1本の生成ファイルに集約されますが、ページごとに描画ツリーに含まれるファイル分だけに絞られます。assets/に置いてセクション内でstylesheet_tagを出す方式（Dawn）でも、描画されるページでだけ<link>が出ます。
1本の巨大CSSは、未使用ルールが増えるだけです。
使っていないセクション・スニペット・アセットも消します（Theme CheckのUnusedAssign / OrphanedSnippetが助けになります）。
フォントはどう読み込むか
font_faceにfont_display: 'swap'を指定し、文字が消える時間を無くします。preload_tagで、ファーストビューのフォントだけ先読みします。
日本語フォントは、サブセット化（使う文字だけに絞ること）しないと数MBになります。
発展：INPを悪化させるもの
INP（操作してから反応するまでの時間）は、スクロールや入力のハンドラを軽くすると改善します。
巨大なDOM（商品一覧の全バリエーション描画など）が原因のことが多いです。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。