CLSを0.5から0.006に改善！その方法は？

• 作成日: 2022-08-09
• 更新日: 2023-12-25
• カテゴリ: SEO

CLSを0.5から0.006に改善した話

なんの気なしにネットサーフィンをしていた。
2022年6月。外は猛暑。

部屋の中はクーラーが効いていて……クーラー？　なんだそれは……。
部屋の中も猛暑。

相棒の扇風機と共に灼熱のマイコンピューターを走らせる。
ファンは轟音を立てて溜まったホコリを舞い上げる。

筆者はブロガーである。
ブログを書くのが仕事だ。
元はエンジニアだったが転職した。

ブログが収入源だからブログのメンテナンスには余念がない。
今日もサーチコンソールを開いてブログの様子を確認してみた。

しかし、すると……。

なんだ？　このページエクスペリエンスの値は？？

異常！ページエクスペリエンス

ページエクスペリエンスには良好なURLのパーセンテージが表示される。
これはモバイルとPCに分かれている。

モバイルは良好なURLが100%だった。
しかしPCはどうだ。
なんだこの値は。6.5%？

暑さで目がぼけちまったのかな……。
私は洗面所に行って顔を洗った。
二っと笑うと歯がずらりと並んでいる。
うん、健康そうだ。

私はパソコンの前に戻った。
灼熱の仕事部屋へ……。

ふたたびブログのページエクスペリエンスを見てみた。
モバイルは……うん、良好100%.
それでPCは……うん？ 6.5%？？

わ……。
WHY JAPANESE PEOPLEEEEEEE!!!!!!

改善が必要（413件）

変だなぁ。
特になにかやった記憶はないが。
一週間前からPCのページエクスペリエンスのスコアがダダ下がりしている。
それも413件で。
これは私のブログのすべての記事数と同じ値だ。

リンクをクリックして詳細を見てみた。
するとすべてのページで「CLS に関する問題: 0.1 超（パソコン）」が発生していた。

まーたCLSか……。
私は以前もCLSの問題に取り組んだことがある。

CLSとは「Cumulative Layout Shift」のことだ。
これはGoogleがページを評価するのに使う指標の1つである。
この値が低いとページが検索結果で優遇されなくなる（はずである）。

これは簡単に言うと「要素がどれぐらい移動したか？」という値だ。
つまりユーザーがリンクをクリックしようとしたら画像とかが読み込まれてリンクの位置がずれた。
その結果、別のリンクをクリックしてしまった……。

といったアクシデントが発生しやすくなるとCLSの値が大きくなって悪化する。
このCLSの値は0.1以下が正常でそれ以上は異常値として扱われる。

PageSpeed Insightで計測してみると・・・

なるほどぉ。
で、どれぐらいのCLSの異常値なんだろう？
私はサーチコンソール上のリンクからページを「PageSpeed Insight」で評価してみた。

すると……。
なんとCLSの値は「0」になっている。
あれえ？

なんだこれは……。
Googleさんのバグかな？？
私はそう思った。

しかしサーチコンソールでは413件ものページがCLSの異常だと出ている。
どっちを信用すれば良いのか……。
まぁこの場合はサーチコンソールだろう。
PageSpeed InsightのCLSの値は謎だが、この値は正確でない可能性がある。
私はLighthouseという拡張機能を使って再度計測してみた。

Lighthouseで計測してみると・・・

するとCLSの異常値が出た。
値で言うとそのページのCLSは「0.546」だった。

これはほかのページで見ても変わらない。
0.1以下が正常値なわけなので0.5越えはかなりの異常値である。
もちろんテキストは真っ赤になっている。
この暑い時期にCLSが炎上するとは……。

最近のGoogleはCLSが悪いとページを評価してくれない傾向がある。
そのためブログを検索上位に持っていくにはこのCLSの改善は急務である。
私は普段のルーチンワークを中止。
この問題に取り組むことにした。

CLSデバッグ

CLSが悪化する原因は↓の2つが考えられる。

• 画像の読み込み遅延
• スクリプトの読み込み遅延

しかしこの2つについては私は以前に改善したばかりであった。
画像にはwidthやheightを付けたしスクリプトの読み込みは時間差ロードにした。

画像の場合は画像を読み込むときに他の要素がズレるとそれがCLSの低評価に繋がる。
だから<img>タグにwidthとheightを付けてあらかじめ描画スペースを予約しておく。
こうするとペナルティを受けない。

あるいは不要な画像。特にデザイン目的の画像はページから取っ払うのが一番てっとり早いだろう。

それからスクリプトの読み込みはたとえばソーシャルボタンなどがそうだ。
スクリプトの読み込みに時間がかかるとソーシャルボタンなどがすぐに表示されず時間差で表示されてしまい結果CLSに悪影響を与える。
あとはアドセンス広告のスクリプトなどもそうだ。
スクリプトの読み込みに時間がかかり広告が時間差で表示されてしまうとそれがCLSの低評価につながる。

だからアドセンスの場合はページのスクロールが下がったらスクリプトを読み込むように仕様を変える。
そうするとCLSの低評価を免れることができることがある。

だが今回は画像もスクリプトもやってある。
一体何が……？
何が起こっている……？

私はふてくされた。

こういう時は2分探索で行こう

問題点を見つける手法としては2分探索が有名である。
今回もこれを使うことにした。

まず試しにCSSファイルの読み込みをページから削除してみた。
CSSがかかっていな状態でLighthouseで評価するとCLSが改善した。

なるほど～。CSSねぇ。
問題が判明した。
どうやら問題はCSSファイルの中にあるようだ。

私はCSSファイルの中をさらにデバッグした。
2分探索的にコメントアウトしながら評価を繰り返した。

するとbootstrap.scssとarticle.scssをコメントアウトするとCLSが改善することがわかった。

BootstrapでCLSが悪化する？

なぜこれらのファイルがCLSを悪化させるのか……。
なんでやねんな頼むでほんま……。

私は考えた。
CLS...
CLS...ねぇ...

あ、こういうことかな？
私はひらめいた。

marginやpaddingが原因ではないか？

CLSはつまり元のプレインなHTMLから要素がずれると悪化するのである。
つまり元のHTMLを移動させると悪化する。

CSSによるデザインはHTMLの移動をともなう。
これはmarginやpaddingなどがそうだ。

とくに縦方向のmarginやpaddingはガックリと要素の位置がずれる。
Lighthouseはこれを検出してるのではないか？

私はそう仮説を立てた。

CSSの作り直し

どうやら改善するにはこれしかないようだ。
私は重い腰をあげた。

そうだ。ブログのCSSを作り直すのだ。
そして作り直す際の要点は↓になる。

• Bootstrapを使わない
• 極力marginやpaddingを使わない
• 素のHTMLを教祖としてあがめる

私はこの要点を胸に刻んでCSSを作り直すことにした……。

🦝 < がんばれハスラー

昔ながらのデザインになっちゃった

現代的なWebのデザインにmarginやpaddingはかかせないものである。
クールなデザインを作るには余白が必須なのだ。

だが今回はこの余白をCLSのために否定し、極力使わない縛りを設けた……。
この縛りプレイ、意外に楽しい。
なんというか一昔前のWebでデザインをしているような感覚になる。

出来上がったデザインもどこか古臭さを感じるデザインになった。
しかしこれがGoogleが望んでいるWebの姿なわけである。
うーん。デザイナーさん、どんまい。

新しいCSSの効果

私はさっそく新しいCSSでサーバーにプロジェクトをデプロイした。
そしてWebサーバーを再起動して新しいデザインを適用。

Lighthouseで測定すると……。
なんと！　CLSの値が「0.006」になっていた！

0.5強から0.006になったわけである。
すごいぞ！　昔のWebデザイン！

おわりに

かくして私の戦いは終わった。
1日でオワタ。

しかし要素がずれることを低評価にするというのは見た目のデザインがもろに影響を受ける。
果たしてクールさを売りにしているWeb開発者はこれにどのように対処するのか……。
私は古臭いデザインを受け入れてそれを採用したが、あなたならどうするだろうか？
健闘を祈る。

🦝 < 古き良きWebデザイン

🐭 < 生のHTMLが一番

追記

今回は昔ながらの空白を使わないデザインを使って解決した。
しかしこれよりお手軽な方法があった。
それはインラインCSSを使う方法だ。
CLSにお悩みの方はインラインCSSの使用を検討するといいだろう。
検討だけに健闘を祈る。