いつ頃からかCLS(Cumulative Layout Shift)の値が0.1を超えるのが常態化していました。それまで0.1を上回ることがほとんどなかったです。
「CLS 改善」で検索しても「画像のWidthとHeightの数値を記入しましょう」の類の検索結果ばかりでした。Lighthouseでも画像の指摘はほとんどありません。
ただ、気になったのがUnsupported CSS Propertyが多発していることでした。右端にfont-sizeやline-heightと書かれています。
ふと「そう言えば、数か月前にSimple Custom CSS and JSプラグインを使ってカスタマイズしたっけ」と思い当たり、設定を見直しました。
そう、わかりました!
記事全体の文字を大きく、行間を空けるように設定していました。これ自体は問題ありませんが、これを<head>要素内の最終段に記述するようにしていました。これを下図のように<head>要素内の最上段へ持っていくことによってCLSの値は再び0.1を切るようになりました。
反省
サイトの描画速度改善を試みた際に「JavaScriptやCSSがレンダリングブロックするので、読み込みを後方に持って行けるならそうした方がいい」ということから、様々なCSSを<head>の最終段の設定にしていました。それにより、最初に描画した記事がフォントサイズと行間の変化により描画がずれていきCLS悪化へと繋がっていたのですね。勉強になりました。
フォントサイズや行間など、レイアウトに係るCSS Propertyを何らかの方法で後方に持って行ってCLSが悪化した方は前方に戻した方がよいようです。
誰かの参考になれば幸いです。
追記:highlight.jsの読み込み
まだありました。
Google ConsoleにてWarningが一旦消えたものの、再びWarningに。
Warningが生じたページにはソースコードのハイライトが含まれているという共通点がありました。
ハイライト表示するためにhighlight.jsを読み込みんでいます。下はその記述です。
<script defer src="/(ディレクトリ指定)/highlight.min.js"></script>
ふと、deferを指定しているのが影響しているのでは?と思い、削除しました。
<script src="/(ディレクトリ指定)/highlight.min.js"></script>
これで残っていたCLS0.1超えのページが一気に0になりました。
deferの代わりにasyncは、…試していません。
さらに追記(Googleアドセンス)
CLSが0.1を下回っていたのが、いつの間にか再び0.1を超えていました。
このところ闘病により更新もしていなかったものですから、不思議でした。
ちょっと本腰を上げてCLS対策をしていました。
何故かmain、つまり記事本文のところが最も酷い。しかし、記事本文の中のどこだか。
結論から申し上げますと、記事本文の上に貼り付けていたGoogleアドセンスのせいでした。
ここでなければCLSも悪化していないのですが、なぜかこの位置ですと記事本文がガタッと動いてCLSにもろに影響。
とりあえずはこの位置からは外して、CLSはほぼ0にまでなりました。
Googleアドセンスが悪いわけではないので、誤解なきよう。
何もしていないのにCLS悪化、プラグインを自動更新にしていたのも良くなかったのでしょう。
何か変わったのかもしれません。
また、CLSはPage Speed Insightなどでの計測値ではなく、ユーザーの実際の表示での計測時間なので、差があります。