クリティカルCSS導入のまとめ

仁木

2021/01/21

クリティカルCSS、クリティカルレンダリングパスについて
クリティカルCSSを使うページは、とりあえずサイトの流入元のページのみでよい
クリティカルCSSの管理
まとめ

１〜2年程前からページの初期表示速度を早める手段として、「クリティカルCSS」が話題に出てくるようになりました。

アウラのホームページ制作でもパフォーマンス向上のため、去年くらいからコーディング時に組み込んでいます。
少しづつ改良を重ね、ここ最近でようやくまとまってきたのでブログでまとめたいと思います。

クリティカルCSS、クリティカルレンダリングパスについて

「クリティカルレンダリングパス」についてはcolissさんの記事で紹介している内容が詳しいです。

ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。
ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカルレンダリングパス(Critical Rendering Path)」と呼ばれます。

サイトを初めて訪れたときのファーストビューの表示速度に関わる部分です。

そして、クリティカルCSSとは、クリティカルレンダリングパスに必要なCSSのことです。
要はファーストビューの表示に必要なCSS（スタイル）のことです。

CSSは通常、外部ファイルに記述し、<link>タグで読み込みますが、クリティカルCSSは<head>タグの中の<style>タグにインラインで記述します。
これにより、外部ファイルの読み込みを省いてページの表示速度を早めます。ファーストビューに必要のないスタイルは非同期で読み、初期表示に不要なレンダリングブロック要素をなくします。

クリティカルCSSを使うページは、とりあえずサイトの流入元のページのみでよい

サイト内の全ページにクリティカルCSSを使う必要はなく、トップページやブログの記事ページなど、検索からの流入が見込めるページのみ適用する程度で良いでしょう。
ページ１つ１つに、ファーストビューに必要なスタイルを抜き出しインライン記述するのは、後々の更新の負担が大きい割りに効果が見込めるのか、微妙だと思います。

クリティカルCSSの管理

クリティカルCSSはスタイルを記述しているCSSファイルから、ファーストビューに必要なスタイルのみを抜き取り、インラインで<style>タグに記述します。
これを手動で管理・更新しようとするとかなり煩雑な作業となってしまい、現実的ではありません。
SASSやタスクランナーを上手く使い、ある程度自動化して管理するのが現実的な導入手段になるでしょう。

今回、クリティカルCSSを導入するためにSCSSとGulp、PHPを利用しています。
大きな処理の流れを説明すると

SCSSで通常通りスタイルを書いていく。
ファーストビューに必要なスタイルのみを抜き出したSCSSファイルを作成し、CSSにコンパイル。
GulpでコンパイルしたCSSファイルを整形し、PHPファイルとして書き出す。
<head>タグにPHPでインクルードする。その際通常の外部CSSファイルはレンダリングをブロックしないように読み込む。

1. SCSSで通常通りスタイルを書いていく

まずは通常通りスタイルを書いていきますが、その前にSCSSのファイル構成を考えておく必要があります。
ポイントは、FLOCSSの設計手法をベースに、コンポーネントやブロック、レイアウトレベルのクラスは、クラス単位でファイルを作成すると良いです。これは次の2の工程で、必要なスタイルのみを取り出しやすくするために必要な構成です。

FLOCSSを参考にしたSCSSのファイル構成例

・Critical
・Foundation
・Layout
・Object
┣ Block
┃┣ Header.scss
┃┗ Footer.scss
┃
┣ Component
┃┣ Button
┃┃┗ Button1.scss
┃┗ Heading
┃　┗ Heading1.scss
┃
┣ Project
┗ Utility

2. ファーストビューに必要なスタイルのみを抜き出したSCSSファイルを作成し、CSSにコンパイル

1の構成でCSSを作れたら、今度はクリティカルCSSを使うページ専用のSCSSファイルを作成し、ファーストビューに必要なスタイルが記述されたSCSSファイルを@useで追加していきます。

1で紹介したファイル構成に追加します。

・Foundation
・Layout
・Object
┣ Block
┃┣ Header.scss
┃┗ Footer.scss
┃
┣ Component
┃┣ Button
┃┃┗ Button1.scss
┃┗ Heading
┃　┗ Heading1.scss
┃
┣ Project
┗ Utility
↓↓↓追加
・Critical
┗ Top.scss ... トップページ用のクリティカルCSS

// Top.SCSS

/************************************************
 * Foundation
 ***********************************************/
@use '../foundation/normalize';
/************************************************
* Utility
***********************************************/
/* Theme Common */
@use "../utility";
/************************************************
* Block
***********************************************/
/* Navigation */
@use "../block/b_navigation";
/* Mainimage  */
@use "../block/b_mainimage";
/************************************************
* Component
***********************************************/
/* Content */
@use "../component/content/c_content";
/* Typography */
@use "../component/typography/c_paragraph1";
/* Button */
@use "../component/button/c_button1";
/* Headline */
@use "../component/headline/c_headline1";
/* Box (Card) */
@use "../component/box/c_box1";
/* List */
@use "../component/list/c_dlist1";
/************************************************
* Project
***********************************************/
/* Layout */
@use "../project/p_top";

ファイルを@useする時に気をつけたいのが、背景画像やフォントなど、相対パスで指定している箇所を書き換える必要があります。
@useであれば読み込み時に「with節」を利用して変数を上書きできるので、パスの指定部分はSCSSの変数使い、上書きできるようにしておきます。

@use '../component/button/button1.scss' as * with ($resource-path: 'assets/css/');

上記のファイルをCSSにコンパイルします。

3. GulpでコンパイルしたCSSファイルを整形し、PHPファイルとして書き出します。

CSSにコンパイルしたファイルからGulpでインクルード用のPHPファイルを生成します。
CSSファイルをGulpで監視し、変更があればタスクを実行するようにします。

/*******************************************
 * Critical CSSのPHPファイルを生成
 *******************************************/
gulp.task("create-critical-style", function(done) {
  gulp
    .src('assets/css/critical/*.css')
    .pipe(replace(/\/\*.+\*\//g, ''))
    .pipe(replace(/@charset\s"UTF-8";?/g, ''))
    .pipe(replace(/\n/g, ''))
    .pipe(replace(/^(.)/g, '<style>$1'))
    .pipe(replace(/(.)$/g, '$1</style>'))
    .pipe(rename(function(path) {
      path.extname = ".php";
    }))
    .pipe(gulp.dest('include/critical-style/'));
  done();
});
gulp.task("critical-style", function() {
  const watcher = gulp.watch(['assets/css/critical/*.css'], gulp.parallel('create-critical-style'));
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

上記の処理は、コンパイルしたCSSから<style>のタグを追記したり、不要な改行などを省いたりしています。

4. <head>タグにPHPでインクルード。通常の外部CSSファイルはレンダリングをブロックしないように読み込む。

最後にPHPでインクルードします。

<?php # Critical Style Css
include("include/critical-style/top.php");
?>
<link href="assets/css/theme.css" rel="stylesheet" media="print" onload="this.media='all'">
<?php else: ?>
<link href="assets/css/theme.css" rel="stylesheet">
<?php endif; ?>

theme.cssはサイト内の全てのスタイルを記述しているCSSファイルです。
クリティカルCSSのインクルードファイルがある場合は「media=”print” onload=”this.media=’all'”」という属性を追加して読み込み、それ以外は通常通りに読み込んでいます。
「media=”print”」とすることでブラウザでの閲覧に必要のないファイルと認識され、読み込みの間、レンダリングがブロックされません。
さらに読み込みが完了したタイミングで「onload=”this.media=’all'”」でスタイルが適用されるので、外部CSSファイルを簡単に非同期ロードできます。

また、こちらの外部ファイルにはクリティカルCSSに記述しているスタイルも記述されていても問題ないでしょう。クリティカルCSSに書いてあるから、と言ってスタイルの記述の抜き差しは必要ありません。