ShopifyにおけるCritical CSS
ShopifyにおけるCritical CSS - 概要
Critical CSSは、最初のレンダリングに必要なCSSルールの集合体です。これらのCSSルールはページのheadに配置されます。これにより、ブラウザはレンダリングをブロックするすべてのCSSファイルをダウンロードすることなく、レンダリングを開始できます
Shopifyは広く利用されているオールインワンのウェブショップソリューションで、誰でも簡単に自分のウェブショップを構築できます。残念ながら、Shopifyは完璧なページスピードスコアを考慮して構築されておらず、自動化されたCritical CSSをサポートしていません。ShopifyにおけるCritical CSSは手動でのみ追加できます。
この記事では、ShopifyのウェブショップにCritical CSSを素早く追加する方法をご紹介します。
Critical CSSとは？
すべてのモダンブラウザの仕組みにより、ページのレンダリングは外部CSSファイルによってブロックされます。ブラウザが1つ以上のCSSファイルをダウンロードする必要がある場合、ページのレンダリングは簡単に100msあるいは それ以上ブロックされることがあります。
これを回避する方法の1つがCritical CSSの使用です。Critical CSSは、ページの表示部分のみをレンダリングするために必要なCSSの集合体です。このCritical CSSは通常、ページのheadにインラインで配置されます。これにより、ブラウザはレンダリングを開始する前に1つ以上のCSSファイルをダウンロードする必要がなくなります。その間、ページが表示されている裏で、ブラウザは最終的なCSSファイルをバックグラウンドでダウンロードします。
すぐに始めよう：ShopifyにおけるCritical CSS！
Shopifyは人気のオールインワンウェブショップソリューションです。非常に簡単に使えますが、ページスピードはShopifyの最も強い点ではありません。例えば、デフォルトではCritical CSSの優れた自動サポートがありません。そのため、Critical CSSのサポートを手動で追加する必要があります。幸いなことに、それほど多くの作業は必要ありません。以下のステップバイステップガイドに従って、ShopifyでCritical CSSを使用しましょう。
1. 新しいテーマを作成する
Shopifyでテンプレートのコア動作を編集する場合、新しいテーマを作成することをお勧めします。「Online Store」>「Themes」から現在のテーマに移動し、 「Actions」>「Duplicate」をクリックして現在のテーマを新しいテーマにコピーします。
2 Critical CSSを生成する
Critical CSSを生成する方法はさまざまあります。私自身はNodeJsのCriticalモジュールを手動調整と組み合わせて使用しています。少しパズルのようですが、多くの場合最良のソリューションです。
技術的に難しい場合は、多くのオンラインCritical CSSジェネレーターのいずれかを試すことができます。ウェブサイトのURLを入力すると、ツールが自動的にCritical CSSを生成してくれます。このCritical CSSをコピーして次のステップに進みましょう。
3. Critical CSSをアップロードする
新しいテーマで、snippetsフォルダに移動し、critcal.css.liquidという新しいファイルを作成します。ステップ2で生成したCritical CSSの内容を新しいファイルに貼り付けます。
4. テンプレートファイルを編集する
Layoutフォルダでテンプレートを開きます。ここで2つの調整を行う必要があります。まず、ページのheadにCritical CSSを追加します：
<head> 次に、既存のCSS参照を編集して、元のCSSファイルをバックグラウンドでダウンロードするようにします。このためにpreloadタグを使用します。preloadタグは、ファイルがページ上で後ほど使用されることをブラウザに示します。ブラウザはこのファイルを並行してダウンロードします。これらのファイルがダウンロードされたら、 JavaScriptを通じてCSSファイルを有効化します：
<link
4. 新しいテーマをテストする
これでShopifyでCritical CSSをテストする準備ができました。テーマページでコピーしたテーマの「Actions」>「Preview」をクリックします。新しいテーマを徹底的にテストし、特にLighthouseでのLayout Shift（CLS）の値に注意してください。不完全または不正確なCritical CSSは、大きなレイアウトシフトを引き起こす可能性があります。
5. 新しいテーマを公開する
左メニューの「Online Store」から「Themes」に移動し、新しいテーマの「Actions」から「Publish」を選択します。
Critical CSSが稼働開始！
おめでとうございます。ShopifyショップでCritical CSSが使用されるようになりました。これによりショップの読み込みが大幅に高速化されます！ショップの高速化についてお手伝いが必要ですか？ぜひお手伝いさせていただきます！
Shopifyの制限事項
通常、最終的なCSSファイルがブラウザキャッシュにない訪問者にのみCritical CSSを配信したいものです。ブラウザキャッシュを通じて元のCSSファイルを配信する方が、Critical CSSを使用するよりも通常は高速です。
これは、最初のリクエスト時にCookieを送信し、サーバーサイドレンダリングを行うことで実現されます。残念ながら、ShopifyのLiquidエディターではCookieの読み取りと送信ができません。それは残念ですが、仕方ありません。
それでも、ShopifyショップにCritical CSSを追加することには意味があります。速度の向上は十分にその価値があります！
Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
