Help us understand the problem. What is going on with this article?

Above the fold(ファーストビュー)に含まれる CSS をインライン化してパフォーマンスの改善を図る

More than 1 year has passed since last update.

概要

HTML 内に外部 CSS が指定されていた場合、その CSS ファイルをダウンロードし記述されているルールセット1のすべてを解釈するまで、ブラウザはレンダリングをブロックします。
本稿では、 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">2 とすることで、 style.css を非同期で読み込みます。

まとめ

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

参考

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


  1. セレクタと宣言ブロックをあわせたものです。 h1 {color: red;} 左記のコードで言うと h1 がセレクタ、 {color: red;} が宣言ブロックです。 

  2. 対応ブラウザに注意してください。loadCSS を使うことをおすすめします。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away