重要な CSS 手法を使ってレンダリング時間を短縮する方法を学びます。
ブラウザは、ページを表示する前に CSS ファイルをダウンロードして解析する必要があるため、CSS はレンダリングをブロックするリソースになります。CSS ファイルのサイズが大きい場合やネットワークの状態が悪い場合は、CSS ファイルをリクエストするとウェブページのレンダリング時間が大幅に長くなることがあります。
で確認できます。 <ph type="x-smartling-placeholder">
HTML ドキュメントの <head> で抽出されたスタイルをインライン化すると、これらのスタイルを取得するために追加のリクエストを行う必要がなくなります。CSS の残りの部分は、非同期で読み込むことができます。
<ph type="x-smartling-placeholder">レンダリング時間を改善すると、特にネットワーク条件が悪い場合は、ユーザーが認識するパフォーマンスが大きく変わることがあります。モバイル ネットワークでは、帯域幅に関係なく高レイテンシが問題になります。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">First Contentful Paint（FCP）の状態に問題があり、「レンダリング ブロック リソースを排除する」をご覧ください。重要な CSS を試してみることをおすすめします。
![Lighthouse の監査: 「レンダリング ブロック リソースを排除する」または [未使用の CSS を先送りする]機会](https://web.dev/static/articles/extract-critical-css/image/lighthouse-audit-elimin-c24bcc4e294c8.png?hl=ja)
最初のレンダリングまでのラウンドトリップを最小限に抑えるため、スクロールせずに見える範囲のコンテンツを 14 KB（圧縮）未満に維持します。
この手法で得られるパフォーマンスへの影響は、ウェブサイトの種類によって異なります。一般的に、サイトの CSS が多いほど、インライン CSS の影響は大きくなります。
ツールの概要
ページにとって不可欠な CSS を自動的に判断できる優れたツールは数多くあります。この処理を手動で行うのは面倒な作業なので、ご安心ください。ビューポートの各要素に適用されるスタイルを決定するには、DOM 全体を解析する必要があります。
重大
Critical の場合、抽出、圧縮、スクロールせずに見える範囲の CSS をインライン化します。これは npm モジュールとして利用できます。Gulp（直接）または Grunt（プラグイン）と一緒に使用できます。また、webpack プラグインもあります。
単純なツールで、これまで多くのことを考える必要がありません。スタイルシートを指定する必要はありません。Critical により自動的に検出されます。また、複数の画面解像度に対応する重要な CSS の抽出もサポートしています。
criticalCSS
CriticalCSS も、スクロールせずに見える範囲の CSS を抽出する npm モジュールです。また、CLI としても利用できます。
クリティカルな CSS をインライン化して圧縮するオプションはありませんが、実際にはクリティカルな CSS に属さないルールを強制的にインクルードしたり、@font-face 宣言のインクルードをきめ細かく制御したりできます。
ペントハウス
Penthouse は、サイトまたはアプリに DOM に動的に挿入されるスタイルやスタイルが多数ある場合（Angular アプリで一般的）に適しています。内部で Puppeteer が使用されており、オンライン ホスト版も用意されています。
Penthouse ではスタイルシートが自動的に検出されないため、重要な CSS を生成する HTML および CSS ファイルを指定する必要があります。この利点は、多くのジョブを並行して実行できることです。