ShopifyのCritical CSS：render blocking CSSを排除する
ShopifyのCritical CSSの概要
Critical CSSは、最初のレンダリングに必要なCSSルールの集合です。これらのルールをページのhead内にインライン配置することで、ブラウザは外部CSSファイルのダウンロードを待たずにレンダリングを開始できます。
Shopifyは自動的なCritical CSSをサポートしていません。インフラストラクチャは優れていますが（2025 Web Almanacのデータによると、デスクトップでの良好なTTFBは95%、良好なLCPは92%であり、すべてのeコマースプラットフォームをリードしています）、モバイルですべてのCore Web Vitalsに合格しているShopifyストアはわずか48%です。render blocking CSSが主な原因の1つです。2025 Web Almanacによると、モバイルページの85%が依然としてrender blockingリソースの監査に不合格となっています。
最終レビュー：Arjen Karel（2026年3月）
Critical CSSとは
すべてのモダンブラウザは、外部CSSファイルがダウンロードされ、パースされるまでレンダリングをブロックします。ページが1つ以上のCSSファイルを読み込む場合、レンダリングは容易に100ミリ秒以上ブロックされます。
Critical CSSは、ページの表示領域（ファーストビュー）のレンダリングに必要なCSSルールのみを抽出し、<head>内にインライン配置することでこの問題を解決します。ブラウザはすぐにレンダリングを開始でき、完全なスタイルシートはバックグラウンドでダウンロードされます。これにより、First Contentful Paint (FCP)とLargest Contentful Paint (LCP)が直接的に改善します。
モダンなアプローチ：inline_asset_content
テーマがセクションやコンポーネントごとに個別のCSSファイルを使用している場合（ShopifyのDawnテーマやほとんどのOnline Store 2.0テーマなど）、inline_asset_content Liquidフィルターを使用して、アセットファイルから直接CSSをインライン化できます。
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style> これにより、CSSファイルの内容が<style>ブロックとしてインライン化され、render blockingなリクエストが完全に排除されます。ファーストビューのセクションに対してのみ、条件付きでCSSをインライン化することも可能です。
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%} インデックスが2未満のセクション（ページ上の最初の2つのセクションであり、ほぼ常にファーストビューに収まります）はCSSがインライン化されます。それ以外はすべて通常のスタイルシートとして読み込まれます。これが、モダンなShopifyテーマに推奨するアプローチです。
クラシックなアプローチ：Critical CSSの生成とインライン化
テーマが1つの大きなスタイルシートを使用している場合（古いテーマや大幅にカスタマイズされたストアで一般的です）、Critical CSSを自分で抽出する必要があります。これは6段階のプロセスです。
1. テーマを複製する
Shopifyでテンプレートのコアとなる動作を編集する際は、必ず先にコピー上で作業してください。「オンラインストア」 > 「テーマ」から現在のテーマに移動し、「アクション」 > 「複製」をクリックして複製します。
2. Critical CSSを生成する
私はCritical Node.jsモジュールを使用し、手動での調整を組み合わせています。少し手間はかかりますが、最高の結果が得られます。
技術的に難しい場合は、オンラインジェネレーターを使用してください。当サイトのCritical CSS Generatorが代行します。URLを入力し、生成されたCritical CSSをコピーして、次のステップに進んでください。
3. Critical CSSをアップロードする
複製したテーマでsnippetsフォルダに移動し、critical-css.liquidという新しいファイルを作成します。生成したCSSを<style>タグで囲み、新しいファイルに貼り付けます。
4. レイアウトファイルを編集する
Layoutフォルダのtheme.liquidを開きます。2つの変更が必要です。
まず、<head>内でCritical CSSスニペットをレンダリングします。
<head>
{% render 'critical-css' %} 注：Shopifyは{% include %}を非推奨とし、{% render %}に変更しました。テーマがまだincludeを使用している場合でも機能しますが、移行してください。
次に、既存のCSS参照を変更してバックグラウンドで読み込むようにします。最もクリーンなパターン（Shopify自身のDawnテーマで使用されています）は、media="print"を利用する手法です。
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" /> これにより、ブラウザは初期読み込み時にスタイルシートを印刷用（render blockingではない）として扱い、ダウンロード完了後にmedia="all"に切り替えます。完全なスタイルシートがバックグラウンドで読み込まれる間、Critical CSSがページを即座にレンダリングします。このmedia="print"アプローチは、よりシンプルで<noscript>によるfallbackを必要としないため、古いrel="preload"パターンに取って代わりました。
5. 新しいテーマをテストする
テーマのページで「アクション」 > 「プレビュー」をクリックし、コピーしたテーマをテストします。特にCumulative Layout Shift (CLS)に注意してください。不完全または不正確なCritical CSSは、スタイル未適用のコンテンツがフラッシュ表示される原因となります。要素が最終的なスタイルなしでレンダリングされ、完全なCSSの読み込み後に所定の位置へジャンプします。これがレイアウトシフトです。
プレビューURLに対してPageSpeed Insightsを実行し、適用前後のFCPとLCPを比較します。両方で明確な改善が確認できるはずです。本番公開後の継続的な監視には、Real User Monitoringでfield dataを追跡し、実際の訪問者に対しても改善が維持されていることを確認してください。
6. 新しいテーマを公開する
左メニューの「オンラインストア」の下にある「テーマ」に移動し、新しいテーマの「アクション」から「公開」を選択します。
制御できない制限事項
Shopifyはすべてのページの<head>にcontent_for_headerを強制的に挿入します。これにより、遅延や変更が不可能な分析スクリプト、アプリのスクリプト、その他のプラットフォームコードが注入されます。インストールされたすべてのShopifyアプリは、この仕組みを通じてスクリプトを追加できます。これは避けられないrender blockingのコストです。だからこそ、制御可能な部分（独自のCSS、フォント、独自のスクリプト）の最適化がさらに重要になります。未使用のアプリをアンインストールすることは、最も効果的な対策の1つです。
もう1つの制限：ShopifyはLiquidエディターでCookieの読み取りや送信を許可していません。理想的には、初回の訪問者にのみCritical CSSを提供し、再訪問者にはキャッシュされた完全なスタイルシートを提供すべきです。しかし、Shopifyではそれが不可能です。それでも、Critical CSSによる速度向上のメリットには価値があります。Shero Commerceの2025年ベンチマークによると、モバイルでのShopifyストアのLCPの中央値は2.26秒であり、2.5秒のしきい値の境界線上にあります。render blocking CSSを排除してそこから200ミリ秒削るだけでも、Core Web Vitalsに合格するかどうかの違いになります。
さらにできること
Critical CSSはパズルの1ピースにすぎません。包括的なShopifyの最適化戦略については、当サイトのShopify向けCore Web Vitalsガイドをご覧ください。その他に影響の大きい改善策としては、LCP画像のプリロード、Googleフォントのセルフホスト、リソースの優先順位付けの理解などがあります。Shopifyは、瞬時のページ遷移を実現するSpeculation Rulesや、HTMLが到達する前にリソースを事前に読み込む103 Early Hintsもサポートしています。
もし依然として未使用CSSの警告が出ている場合は、先にそちらを解決してください。不要なCSSを削除することは、必要なCSSをインライン化するよりも常に優れています。
何が本当に遅いのか、見つけ出します。
フィールドデータでCritical Rendering Pathをマッピング。Lighthouseレポートではなく、優先順位付きの修正リストをお渡しします。
監査を依頼する
