概要

HTML 内に外部 CSS が指定されていた場合、その CSS ファイルをダウンロードし記述されているルールセット¹のすべてを解釈するまで、ブラウザはレンダリングをブロックします。
本稿では、 Above the fold の構築に必要なルールセットをインライン化し、その他のルールセットを非同期で処理することで最適化をしてみます。

Above the fold の構築に必要なルールセットを Critical CSS と呼ぶことが多いようです。
そのため、本稿でも Critical CSS と呼ぶことにします。

本稿では、 CSS の最適化を順を追って説明します。
近い内に、 HTML Critical Webpack Plugin を使って、本稿の内容を自動的に行う方法もまとめようと思います。

最適化の方法

概要でも述べたように今回は、 Critical CSS をインライン化して最適化を図ります。

最適化する

下記のような HTML があるとします。
今回は Above the fold の部分がスクロールしなくても見える部分で、Below the fold の部分がスクロールしないと見えない部分とさせてください。

index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="red">
      Above the fold
    </div>
    <div class="blue">
      Below the fold
    </div>
  </body>
</html>

また、読み込まれている style.css の中身は下記だとします。

style.css

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }

この場合、下記のようにして、最適化します。

index.html

<html>
  <head>
    <style>
      .red { color: red; }
    </style>
    <link href="main.css" rel="preload" as="style">
  </head>
  <body>
    <div class="red">
      Above the fold
    </div>
    <div class="blue">
      Below the fold
    </div>
  </body>
</html>

まず、 Critical CSS を <heade> 要素内に <style> 要素内に移動します。
次に、 <link href="main.css" rel="preload" as="style">² とすることで、 style.css を非同期で読み込みます。

まとめ

Above the fold（ファーストビュー）に含まれる CSS をインライン化についてまとめました。
実際の業務などでは、Critical CSS の抽出を手動でするのは現実的ではないので、近い内に webpack を使って最適化されたファイルを自動的に生成する方法をまとめようと思います。

参考

CSS の配信を最適化する | PageSpeed Insights | Google Developers
Preload
rel="preload" によるコンテンツの先読み - HTML: HyperText Markup Language | MDN

セレクタと宣言ブロックをあわせたものです。 h1 {color: red;} 左記のコードで言うと h1 がセレクタ、 {color: red;} が宣言ブロックです。 ↩
対応ブラウザに注意してください。loadCSS を使うことをおすすめします。 ↩