もくじ

CSSの遅延読み込みでCLSが悪化!?解決方法はこちら

ハウツー
蛙のicon

こんにちは、蛙です。
いつものようにLighthouseを使ってサイトのSEO対策をしていたところ、少し困った事態に陥ってしまいました。 調べてみると他にもこの問題にぶつかって悩んでいる人がいるようだったので、解決方法をこちらの記事にまとめておこうと思います。

Lighthouse「CSSをインラインか遅延読み込みにしてね」

レンダリングを妨げるリソースの除外
手持ちサイトをLighthouseでチェックしたところ、このような警告が表示されました。
<script>タグにはすべてdefer属性をつけて非同期化しているので、問題はCSSということになります。
対処法として「インラインもしくは遅延読み込みで」と書かれていますが、インラインにすると後々の管理が面倒になるので、ここは遅延読み込みで対応したいところです。

CSSを遅延読み込みする方法

<head> <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"> </head>
CSSの遅延読み込み自体は、比較的簡単に実装することができました。 普段CSSを読み込む記述の後ろに、media="print"onload="this.media='all'"の記述を追加するだけでOKです。
しかし、「これで解決!」と喜んだのもつかの間、新たな問題が発生しました…。

CSSの遅延読み込みによる新たな問題

CSSを遅延読み込みにすると、まずスタイルが一切効いていない状態でサイトの中身が表示されます。 そして、CSSが読み込まれた時点で、後からスタイルが適用されます。 こんな風に…。
CSSの遅延読み込み
これが非常にマズイんです。 Lighthouseの警告は消えましたが、今度はコアウェブバイタルのCLSの値が非常に悪くなりました。

コアウェブバイタルとは

コアウェブバイタルはGoogleが発表した新たなサイト評価の指標です。 SEO改善を行うのであれば、Lighthouseだけでなくコアウェブバイタルの数値も気にしていかなければいけません。
Web Vitals の概要: サイトの健全性を示す重要指標
ユーザー エクスペリエンスの質の測定には、多くの側面があります。そのほとんどはサイトやコンテキストに固有のものですが、すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり 「Core Web Vitals」が存在します。このような ユーザー エクスペリエンスの核となるニーズには、読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。 Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。 First Input Delay は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。 Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。 これらの指標はすべて、ユーザー中心の指標であり、 フィールド計測可能で、同等の補助的なラボ診断指標やツールも存在します。たとえば、Largest Contentful Paint はトップラインの読み込み指標ですが、最初のコンテンツの描画を表す First Contentful Paint(FCP)や、最初のバイトを受け取るまでの時間を表す Time to First Byte (TTFB)にも大きく依存します。これらをあわせて監視して改善することも重要です。 私たちは、Core Web Vitals をすべてのサイトオーナーやデベロッパーにとってシンプルで使いやすく、測定しやすいものにすることを目指しています。この点は、Google のインターフェースにも、皆さん独自のダッシュボードやツールにも当てはまります。 サイトオーナーの皆さんは、 Chrome UX Report で自分のサイトのそれぞれの
https://developers-jp.googleblog.com/2020/05/web-vitals.html
以下の拡張機能を入れておくと、コアウェブバイタルを簡単に測定できるので便利です。

CLSとは

CLSはコアウェブバイタルでチェックされる項目の1つで、Cumulative Layout Shiftの頭文字を取ったものです。 Google Developers Japanによると以下の通り。
Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
つまり、CSSを遅延読み込みにすると「読み込み前後でレイアウトがズレてる!ページが安定しない!」というお叱りを受けてしまうんです。 Lighthouseが遅延読み込みしろと言うからそうしたのに、何なんだよって感じですよね…。

CLSを改善するためにやったこと

CLSの遅延読み込みを解除すればCLSは改善します。 しかし、再びLighthouseの警告が表示されてしまうので、どっちを優先するべきか非常に悩みました。

styleをheadに直書き!

インラインに書くのは嫌、遅延読み込みもダメとなると、残された道はheadに直書きするのみです。 ただ、本当にすべてのスタイルを直書きするのは面倒ですし手間もかかるので、PHPでCSSファイルをテキストとしてincludeすることにしました。 PHPで読み込む方法はAMPサイトを作る際などによく使われているようで、調べればすぐに出てきます。
<head> <style> <?php include('style.css'); ?> </style> </head>
これでOK! Lighthouseの警告は消え、CLSの値も無事安全圏まで改善しました!

まとめ

基本的にはLighthouseに従っていればコアウェブバイタルの数値も自然と良くなっていくので、今回のようにCLSが悪化するというのはイレギュラーで、気づくまで少し時間がかかってしまいました。
Lighthouseの提案する改善策はインラインもしくは遅延読み込みのみなので、この方法まで辿り着くのも一苦労です。 CSSを遅延読み込みすればCLSが悪化するのはGoogle側も気づいていないはずはないと思うので、もう少しどうにかならなかったと腹立たしさもあったり…。
今回改修作業をするにあたり色々と検索して調べたのですが、中には泣く泣くLighthouse・CLSのどちらかを諦めたという人も見かけました。 そんな人にもこの記事が届きますように!
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。