WordPressでCritical CSSを生成してレンダリングを高速化する方法

はじめに

「PageSpeed InsightsでレンダリングブロックリソースのCSSが指摘されている」「FCPが遅くて白い画面が長時間続く」「スタイルシートのロード完了を待ってから描画が始まっている」——Critical CSSをインラインで埋め込むことでファーストビューの描画を劇的に高速化できます。

症状・原因

ブラウザはCSSの読み込み・パースが完了するまで描画をブロックします（レンダリングブロック）。ファーストビュー（above-the-fold）に必要なCSSのみを