AstroでCSSをインライン化する方法と注意点
Astroでは、CSSをインライン化することで初回表示のパフォーマンスを大きく向上させることができます。この記事では、@playform/inlineパッケージとCrittersを使った最新のCSSインライン化手法、その設定例、実際に発生したトラブルと対策まで詳しく解説します。
なぜCSSをインライン化するのか？
Webサイトでは、CSSが適用される前の「スタイルなしページ（FOUC）」が一瞬でも表示されると、ユーザー体験が大きく損なわれます。CSSをインライン化することで、最初に必要なスタイルだけを即座に適用し、見た目の崩れや遅延を防ぐことができます。
ただし、全ページで使わないCSSまで一括で読み込むと、無駄な通信が発生します。インライン化は「本当に必要なCSSだけを最初に読み込む」ための最適化手法です。
@playform/inlineの導入手順
- パッケージのインストール
npm install -D -E @playform/inline- astro.config.mjsへの設定追加
import { defineConfig } from 'astro/config';
import playformInline from "@playform/inline";
export default defineConfig({
integrations: [
playformInline({ Critters: { fonts: false } })
]
});Critters: { fonts: false }の設定で、Webフォントのインライン化のみを無効化できます。- これにより、CSSはインライン化されますが、Webフォントは通常通り外部リソースとして読み込まれます。
Crittersとは？
@playform/inlineは内部的にCrittersというCSSインライン化ツールを利用しています。Crittersの設定はそのまま渡すことができ、細かい挙動を制御可能です。
- 例:
playformInline({ Critters: { fonts: false } })
注意点・トラブル事例
実際に本番環境で適用した際、Webフォントがロードされないという問題が発生することがあります。これはGoogle Fonts最適化系の他プラグイン（例: GoogleFontsOptimizer）との相性や、Crittersの仕様によるものかもしれません。
- フォントが表示されない場合は、
fonts: falseでインライン化を無効化しても解決しないことがあります。 - その場合は、他のフォント最適化プラグインとの併用を見直すか、Crittersの使用を一時的に停止するのが無難です。
ベストプラクティス
- まずは本番環境で十分にテストしましょう。
- フォント最適化系プラグインとの併用時は、挙動に注意。
- 通信量やパフォーマンスの変化は、LighthouseやWebPageTestなどで計測して確認しましょう。
参考リンク
AstroでのCSSインライン化は、パフォーマンス改善に非常に有効な手法です。Webフォントや他プラグインとの相性に注意しつつ、最適な設定を見つけてみてください。
外部CSS運用への回帰と安定性について
実際にTailwind CSSやAstroのView Transitions、プリフェッチ機能を併用した場合、CSSインライン化（@playform/inline + Critters）によって「幅が揃う」「色が遅れて反映される」などのラグやレイアウトの乱れが発生することがあります。
これは、インライン化されるCSSが「初回表示に必要な分」だけになるため、ページ遷移や動的なUI変化時に必要なCSSがまだ読み込まれておらず、一瞬デフォルトの見た目で表示されてしまうためです。
特にTailwindのようなユーティリティCSSや、クライアントサイド遷移が多いサイトではこの現象が顕著です。
解決策・ベストプラクティス
- 安定性を最優先する場合は、CSSインライン化をやめて外部CSS運用に戻すのが最も確実です。
- 外部CSS運用に戻すことで、ページ遷移時や動的UIの変化でも常に全てのスタイルが適用され、ラグや乱れが解消されます。
- Crittersの設定をいろいろ調整しても安定しない場合は、迷わず外部CSS運用に切り替えましょう。
判断基準
- サイトのパフォーマンス計測（Lighthouse等）で「レイアウトシフト」や「スタイル適用の遅延」が目立つ場合
- 実際のユーザー体験で「幅が揃う」「色が遅れる」などの違和感が残る場合
- TailwindやView Transitions、プリフェッチを積極的に使っている場合
このような場合は、外部CSS運用が最も安定し、ユーザー体験も向上します。
AstroでのCSS最適化は、サイトの規模や構成、使っている技術スタックによって最適解が変わります。インライン化と外部CSS運用の両方を試し、実際の挙動やパフォーマンスを比較しながら、最適な方法を選択してください。