Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@im36-123

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 を使うことをおすすめします。 

3
Help us understand the problem. What is going on with this article?
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
im36-123
地方で働いていたフロントエンドエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?