UI ライブラリを使用する場合も、スタイルを手作りする場合も、ブラウザはページを表示する前に CSS ファイルをダウンロードして解析する必要があるため、CSS を導入するとレンダリングが大幅に遅延します。
このレスポンシブ アイスクリーム ギャラリーは Bootstrap で作成されています。Bootstrap のような UI ライブラリは開発をスピードアップできますが、多くの場合、それによって CSS が肥大化して不要なため、読み込み時間が遅くなる可能性があります。Bootstrap 4 は 187 KB で、別の UI ライブラリである Semantic UI は非圧縮でなんと 730 KB です。圧縮や gzip 圧縮を行っても、Bootstrap の重さは約 20 KB で、最初の往復の 14 KB しきい値をはるかに超えています。
Critical（クリティカル）のツールは、スクロールせずに見える範囲の CSS を抽出して圧縮し、インライン化します。これにより、ページの他の部分の CSS がまだ読み込まれていなくても、スクロールせずに見える範囲のコンテンツをできるだけ早くレンダリングすることができます。この Codelab では、Critical の npm モジュールの使用方法を学びます。
測定
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。
このサイトで Lighthouse 監査を実行するには:
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [モバイル] をクリックします。
- [パフォーマンス] チェックボックスをオンにします。
- [監査] セクションの残りのチェックボックスをオフにします。
- [Simulated Fast 3G, 4x CPU Slowdown] をクリックします。
- [ストレージを消去] チェックボックスをオンにします。このオプションを選択した場合、Lighthouse ではキャッシュからリソースが読み込まれず、初めてのユーザーにページがどのように表示されるのかがシミュレートされます。
- [Run Audits] をクリックします。
![Lighthouse による Chrome DevTools の [Audits] パネル](https://web.dev/static/articles/codelab-extract-and-inline-critical-css/image/audits-panel-chrome-devt-1a8ccbed41384.png?authuser=4&hl=ja)
マシンで監査を実行すると、正確な結果は異なる場合がありますが、フィルムストリップ ビューでは、最終的にコンテンツがレンダリングされるまで、かなり長い間アプリの画面に何も表示されません。これが First Contentful Paint（FCP）が高くなり、全体的なパフォーマンス スコアが良くない理由です。
Lighthouse はパフォーマンスの問題の解決に役立ちます。[最適化] セクションで解決策をご確認ください。改善の余地として挙げられているのが「レンダリングを妨げるリソースを排除する」です。そこで重要となるのが「Critical（重大）」です。
最適化
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
迅速に進めるため、Critical がすでにインストールされており、Codelab には空の構成ファイルが含まれています。
構成ファイル critical.js で、Critical への参照を追加して、critical.generate() 関数を呼び出します。この関数は、構成を含むオブジェクトを受け入れます。
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
エラー処理は必須ではありませんが、コンソールでオペレーションの成功を測定する簡単な方法です。
重大を構成する
次の表に、便利な「Critical（重大）」のオプションを示します。GitHub で利用可能なすべてのオプションを確認できます。
| オプション | タイプ | 説明 |
|---|---|---|
base |
文字列 | ファイルのベース ディレクトリ。 |
src |
文字列 | HTML ソースファイル。 |
dest |
文字列 | 出力ファイルのターゲット。CSS がインライン化されている場合、出力ファイルは HTML です。そうでない場合、出力は CSS ファイルです。 |
width、height |
数字 | ピクセル単位の幅と高さです。 |
dimensions |
配列 | 幅と高さのプロパティを持つオブジェクトが含まれます。これらのオブジェクトは、スクロールせずに見える範囲の CSS でターゲットとするビューポートを表します。CSS にメディアクエリがある場合は、複数のビューポート サイズに対応する重要な CSS を生成できます。 |
inline |
ブール値 | true に設定すると、生成された重要な CSS が HTML ソースファイル内にインライン化されます。 |
minify |
ブール値 | true に設定した場合、Critical では、生成された重要な CSS が圧縮されます。「Critical（重大）」ではルールが重複しないように自動的に圧縮されるため、複数の解決で重要な CSS を抽出する場合は省略できます。 |
以下に、複数の解像度に対応する重要な CSS を抽出する設定例を示します。critical.js に追加するか、いろいろと試してオプションを微調整します。
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
この例では、inline オプションが true に設定されているため、index.html はソースファイルと宛先ファイルの両方です。Critical の場合、まず HTML ソースファイルを読み取り、重要な CSS を抽出し、<head> にインライン化されている重要な CSS で index.html を上書きします。
dimensions 配列には、特小画面用の 300 x 500 と標準のノートパソコン画面用の 1280 x 720 の 2 つのビューポート サイズが指定されています。
複数のビューポート サイズが指定されている場合、抽出された CSS が自動的に縮小されるため、minify オプションは省略されます。
実行の危機
package.json のスクリプトに Critical を追加します。
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- [ターミナル] をクリックします（注: ターミナル ボタンが表示されない場合は、[全画面表示] オプションをご利用ください）。
重要な CSS を生成するには、コンソールで次のコマンドを実行します。
npm run critical
refresh
index.html の <head> タグでは、生成された重要な CSS が <style> タグの間にインライン化され、その後に、残りの CSS を非同期で読み込むスクリプトが続きます。
再測定
Codelab の冒頭で説明した手順に沿って、Lighthouse のパフォーマンス監査を再度実行します。結果は次のようになります。
