Shopifyで「PageSpeed Insights」のLCPスコアを改善するために「クリティカルCSS」を導入しようと考えたのですが、手動でCSSを抽するのは運用面で手間がかかるため、アプリで対応できるかどうかを調べてみました。

なお、ここでいうクリティカルCSSとは以下のとおりです。

クリティカル CSSとは

「クリティカル CSS」とは、ユーザーが最初に目にする画面（ファーストビュー）になスタイルだけを HTML 内にインライン化し、残りの CSS を遅延読み込みする手法です。

これにより、外部スタイルシートの読み込みによる描画ブロックを排除し、ブラウザが最速でコンテンツをペイントできるようになります。Shopify では専用アプリを使うことで、テーマのコードを直接編集せずにワンクリックでクリティカル CSS を抽出・インライン化し、LCP（Largest Contentful Paint）の改善を手軽に実現できます。

クリティカル CSSに対応できそうなアプリ

検証ができていないアプリもあるため「できそう」としています。

Swift SEO ページスピードオプティマイザー

試したところプレミアムプラン以上でクリティカルCssが選択可能でした。

https://apps.shopify.com/swift?locale=ja

Hyperspeed EXTREME Page Speed

アプリ説明欄に「重要なCSSインライン化」の記載がありました。

https://apps.shopify.com/hyperspeed?locale=ja

Speed Booster AI

CSS／JS の自動最小化（Minify）への言及はありますが、クリティカルCssに関しては記載が確認できていません。

https://apps.shopify.com/optimizer-app?locale=ja

Inline ‑ Critical CSS

クリティカルCSSのためのアプリとして設計されており、買い切り（$10）で利用できます。

https://apps.shopify.com/critical-css?locale=ja

まとめ

検証後後日追記予定。