UI ライブラリを使用する場合でも、スタイルを手作りする場合でも、大量の CSS を配信するとレンダリングが遅くなります。これは、ページを表示する前に、ブラウザで CSS ファイルをダウンロードして解析する必要があるためです。
このレスポンシブ アイスクリーム ギャラリーは、Bootstrap を使用してビルドされています。Bootstrap などの UI ライブラリを使用すると開発時間を短縮できますが、その代わりに CSS が肥大化して不要なため、読み込み時間が長くなる可能性があります。ブートストラップ 4 は 187 KB ですが、別の UI ライブラリであるセマンティック 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] タブをクリックします。
- [モバイル] をクリックします。
- [パフォーマンス] チェックボックスをオンにします。
- [Audits] セクションの他のチェックボックスをオフにします。
- [Simulated Fast 3G, 4x CPU Slowdown] をクリックします。
- [ストレージを消去] チェックボックスをオンにします。このオプションを選択すると、Lighthouse はキャッシュからリソースを読み込まず、新規ユーザーによるページの表示をシミュレーションします。
- [Run Audits] をクリックします。
![Lighthouse を利用した Chrome DevTools の [Audits] パネル](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/audits-panel-chrome-devt-1a8ccbed41384.png?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');
}
});
エラー処理は必須ではありませんが、コンソールでオペレーションの成功を簡単に判断できる方法です。
重要な設定
次の表に、便利な重要なオプションの一部を示します。GitHub で利用可能なすべてのオプションを確認してください。
| オプション | タイプ | 解説 |
|---|---|---|
base |
文字列 | ファイルのベース ディレクトリ。 |
src |
文字列 | HTML ソースファイル。 |
dest |
文字列 | 出力ファイルのターゲット。CSS がインライン化されている場合、出力ファイルは HTML です。そうでない場合、出力は CSS ファイルです。 |
width、height |
数字 | ビューポートの幅と高さ（ピクセル単位）。 |
dimensions |
配列 | 幅と高さのプロパティを持つオブジェクトが含まれます。これらのオブジェクトは、スクロールせずに見える範囲の CSS でターゲットとするビューポートを表します。CSS にメディアクエリがある場合は、複数のビューポート サイズに対応する重要な CSS を生成できます。 |
inline |
boolean | true に設定すると、生成されたクリティカル CSS が HTML ソースファイルでインライン化されます。 |
minify |
boolean | true に設定した場合、Critical は生成されたクリティカル CSS を圧縮します。複数の解像度で重要な CSS を抽出する場合は省略できます。Critical では、ルールが重複して組み込まれるのを避けるために、Critical は自動的に圧縮されるためです。 |
以下は、複数の解像度で重要な 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 と標準のノートパソコン画面用の 1,280 x 720 の 2 つのビューポート サイズが指定されています。
複数のビューポート サイズが指定されている場合、Critical によって抽出された CSS が自動的に圧縮されるため、minify オプションは省略されます。
重大な実行
package.json のスクリプトに「重要」を追加します。
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- [ターミナル] をクリックします（注: [ターミナル] ボタンが表示されない場合は、全画面表示オプションを使用する必要があります）。
重要な CSS を生成するには、コンソールで次のコマンドを実行します。
npm run critical
refresh
index.html の <head> タグでは、生成された重要な CSS が <style> タグ内にインライン化され、残りの CSS を非同期で読み込むスクリプトが続きます。
再測定
この Codelab の冒頭で説明した手順に沿って、Lighthouse のパフォーマンス監査を再度実行します。次のような結果が表示されます。
