CSSサブセット化でStorefront高速化

8月 16, 2026

THEME DEV

CSSサブセット化で
Storefront高速化

{% stylesheet %}タグが「そのページに必要なCSSだけ」を配信する仕組みに変わりました

2026年4月20日より、Shopifyは{% stylesheet %}タグのCSS配信方式を変更しました。従来はすべてのCSSを全ページに読み込んでいましたが、今後は各ページに実際にレンダリングされるセクション・ブロック・スニペットに関連するCSSのみを選択的に配信します。テーマのCSS設計が「ファイルをまたいだスタイル共有」をしている場合は修正が必要になる可能性があります。

1変更の仕組み：Before / After

2影響を受けるテーマのパターン

3業務に活かせるユースケース

課題: 大規模テーマで共通CSSをひとつのセクションファイルにまとめており、他のセクションがそのクラスを参照している。新方式でスタイル崩れが発生する。
打ち手: 共通スタイルはassets/base.cssなどのグローバルアセットとして切り出し、{% stylesheet %}ではなく<link>タグで読み込む。または共通クラスを使用する各ファイルの{% stylesheet %}に重複定義する。
効果: サブセット対象外となるグローバルCSSとして扱われ、どのページでも確実に配信される。スタイル崩れを防ぎながら管理コストも整理できる。
技術メモ: 公式ドキュメント「stylesheet subsetting docs」に詳細ガイダンスが掲載されているため、移行前に必ず確認すること。

課題: サードパーティ製テーマを使用しているEC事業者が、カスタマイズでスタイルを別セクションのLiquidファイルに追記しており、アップデート後に一部ページのデザインが崩れた。
打ち手: スタイルが適用されなくなったページを洗い出し、対象CSSをそのHTMLを含むLiquidファイルの{% stylesheet %}ブロックに移動させる。ファイルをまたいだ依存関係を解消する。
効果: CSSとHTMLの対応関係が明確になり、将来のテーマアップデート時にも影響範囲が把握しやすい構造になる。
技術メモ: テーマ開発者・カスタマイズ担当者は2026年4月20日以降の本番環境で動作確認し、主要ページ（商品・コレクション・カート・ブログ等）を網羅的にチェックすること。

課題: 新テーマ開発プロジェクトで、複数のデザイナーが担当セクションのCSS設計を分業しており、クラス命名やスタイル共有方針が統一されていない。
打ち手: 「{% stylesheet %}に書くCSSは、そのファイルと{% render %}で呼ばれる直接の子スニペットのHTMLのみをスタイリングする」というコーディング規約を設ける。共有コンポーネントはスニペットとして独立させる。
効果: サブセット方式と整合した設計により、パフォーマンス最適化の恩恵を最大限に受けられるテーマが完成する。メンテナンス性も向上する。
技術メモ: {% render %}で読み込まれる直接の子スニペットはスコープ内とみなされるため、スニペット側に{% stylesheet %}を定義すれば自己完結した設計が実現できる。

4開発者が押さえるべき技術ポイント

項目	内容	対応要否
適用開始日	2026年4月20日（すでに適用済み）	確認必須
対象スコープ	同一ファイル + `{% render %}`による直接の子スニペット	対応不要
要修正パターン	別ファイルのHTMLに対して別ファイルのCSSを参照している構造	修正必要
グローバルCSS	`{% stylesheet %}`以外（assetsの`.css`ファイルなど）は対象外の模様（元記事に詳細なし）	要確認
公式ガイダンス	「stylesheet subsetting docs」として詳細ドキュメントが公開されている	参照推奨
テーマ互換性	CSS設計が自己完結しているテーマは変更不要	対応不要