ブログ

Chromeには、LighthouseというWEBページを評価するツールがついています。
その明確な評価基準はわからないのですが、改善方法はある程度ヒントなどもツールを実行すると載っているので、それを実施していけば評価も上がります。 しかし、JavaScriptや画像などについては、対策を実施しやすいのですが、CSS関連が少々やっかいです。
そこで、今回は、CSSファイルで評価を下げている場合に、そのスコアを上げるための対策を紹介します。

実施する前のスコア

まず、対策を行う前の状態は、以下のようになりました。

決して体感としてはそれほど遅くないにもかかわらず、Performanceの値が「13」と非常に低くなっています。

ここでは、「Eliminate render-blocking resources」という項目にあるものを修正するとパフォーマンスがアップすることを示しています。
これは、要約すると「画面表示をブロックするようなリソースは削減してください」というものです。

対策の実施

例えば、JavaScriptファイルなどは、headタグではなく、bodyの下の方に記述した方がいいよ。
などのような事を聞いたことがある方もいると思いますが、さらにそこから、scriptタグにasyncやdeferなどといった属性をつける事で、ここでいう画面表示をブロックしない読み込みになります。
JavaScript関連の詳細のノウハウは調べればすぐに出てくるので、ここでは紹介しません。

問題は、CSSの読み込みです。CSSはJavaScriptほど、簡単にはできません。と言うのも、scriptタグにあったasyncやdeferなどのような属性をしてするという事が出来ないからです。

だからといって、全く方法がないかと言えば、そうでもありません。それがここで紹介する方法です

対応の手順

手順の方法としては以下のような流れになります。

1. CSSファイルを事前にロードする
2. 事前に読みこんだ、ＣＳＳファイルをスタイルとして適用する

では実際にコードを紹介します

今までのコードが以下のようなコードとします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.4/dist/semantic.min.css">

そして、次のように書き換えます。

<link rel="preload" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.6/dist/semantic.min.css" as="style">

ここで行っている事は、CSSファイルを読みこむだけです。それ以外、何もしていません。
どうして、このようにするかと言えば、それは、後で必要になる前に事前に読み込みキャッシュを作っておくというような事です。

続いて、この読みこんだファイルをスタイルとして適用するJavaScriptを記述します。

(function(){
    let styles = document.querySelectorAll('link[as="style"]');
    const head = document.head;
    styles.forEach(function(style){
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = style.getAttribute("href");
        link.media = 'all';
        head.appendChild(link);
    });
}());

このような感じで、先ほど読みこんだCＳＳファイルを指定したタグを探し出し、それを元に、書き換える前のCSSタグをheadタグに追加指定っています。
そして、このコードを実行するように、以下の用にこちらも画面表示をブロックしないように指定すればよいというわけです。

<script type="text/javascript" src="js/cssimport.js" defer></script>

対策後の結果

そのようにして実施した結果が以下です。

パフォーマンスのスコアは劇的に上がりました。しかし、画面キャプチャされた図を見てみるとわかるのですが、一瞬、デザインが当たっていません。
今回は、単にCSSファイルによるデザイン適用で画面表示ブロックをしないようにしたので、当たり前といえば当たり前なのですが、これを含めて解決するのは大変です。

また、スコアは大きく変わり、改善しているのですが、このような機械的な対応だけでは、実は人の体感としては悪くなってしまうという事もあります。

パフォーマンス評価ツールの特性と評価基準合わせた改善をしなければならないというのも少々、本末転倒な気もします。

なんか、今やメールでの文章は自動翻訳しやすい日本語を使わないといけないように、こちらもそんな事情があったりします。