クリティカルCSSとは？わかりやすく

一言でいうと

ページを読み込んだ際に「最初に見える部分」のCSSだけをHTMLファイルにインラインCSSとして書き込んでおいて、「最初に見える部分以外」のCSSは外部ファイルとして非同期で読み込んで高速化しようぜ！なテクニック

のことらしい。

「クリティカルパスCSS」などとも呼ぶらしい。

わかりやすく
ツール

わかりやすく

･･･ちょっと意味がわからないと思うので順番に説明していくと

まず、CSSの読み込みは同期なので、ダウンロード → 読み込みが完了するまでHTMLファイルのパースはブロックされます。

例えば、以下のように書くとstyle.cssのダウンロード→読み込みが完了するまで、それ以降のHTMLファイルのパースはブロックされます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<!-- ↓ここから先はブロックされてしまう↓ -->
	<title>Document</title>
</head>
<body>
	<h1>ほげ</h1>
</body>
</html>

まぁ正直「こんなの誤差レベルだろ」って感じですが、それでも少なからずページが描画されるまでの遅延の原因になります。

そのため、これを回避するために「CSSファイルを非同期で読み込むぜ！」を実行すると

CSSのスタイルが適用されていない「素のHTML」が最初に表示されてしまい、CSSファイルの読み込みが終わった後にCSSが適用されたページが表示される

という不格好なページになってしまいます。

なのでさらにこれを回避するために、以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* ここに最初の表示に必要なCSSを書いておく */
    </style>
    <link rel="stylesheet" href="後から非同期で読み込んでもいいやつ.css" media="print" onload="this.media='all'">
    <title>Document</title>
  </head>
  <body>
    <h1>ほげ</h1>
  </body>
</html>

順番に説明していくとまず、

<style>
　/* ここに最初の表示に必要なCSSを書いておく */
</style>

の部分には、文字通り最初の表示に必要なCSSを書いておきます。

以下の写真でいうところの「最初の描画に必要な箇所のCSSを抜き出す」の部分です。