最近しばらくブログのシステムそのものをいじっていなかったのですが、最近Cumulative Layout Shift(CLS)に関する問題が発生していることを通知されました。
ひとまず、現状を確認するためにPageSpeedInsightを確認してみました。するとどのページをみてもCLSの項目は0のままでした。なぜこの状態でCLSに関する問題が提供されたかですが、結論からいうと実環境に問題があったという話です。PageSpeedInsigthで使われているLighthouseというツールはあくまでシミュレーションするツールであり、実際の状況とはことなるということです。
まず、なぜCLSに関する問題が出たかというと上記の通り実環境で問題があったからで、これは何からきているかというと実ユーザーの情報によって判断されています。なので、サイトを訪れたユーザーの情報によって問題があると判断されたわけです。
PageSpeedInsightで判断できない問題であるということになるので、他の方法を使って判断しなければなりません。しかし、調べてみるとCLSを調べるには色々なツールが紹介されているもののほとんどがLighthouseと同じ状態です。その中で実環境で確認できるのがGoogle ChromeのDevToolでした。
DevToolの開き方は簡単でGoogle Chromeを開いてF12キーを押すだけで開けます。その中のパフォーマンスタブに実際のそのページのっパフォーマンスが表示されます。
私のページだとPCでは問題がなく、スマホ用サイトで問題が出るという状態でした。ひとまずその状態を再現するべく、DevToolの左上にあるPCとスマホのマークのような「デバイスのツールバー切り替え」を使って様々な環境を再現します。また、パフォーマンスタブ画面の右側にある「環境設定」でCPUとネットワークのスロットリングの設定を行って様々な環境やデバイスでの状況を調べていきます。
実際に使いながらのパフォーマンス測定になるので、ページを開いたら実ユーザーの動きを想定して下にスクロールしたり、再読み込みなどをしてみましょう。
そして、CLSが増えれば実環境側で間違いなく問題が発生しています。私の環境では今までは問題なかったはずなのですが、アンカー広告がCLSに大きく影響していることがわかりました。
実は自動広告そのものはそこまで大きな影響を及ぼしていないようで、アンカー広告のみが非常に悪影響を及ぼしていたようです。
というわけでアンカー広告をOFFにして1か月ほど放置してみたところこのように改善しました。
一度問題が発生するとすぐに解決するわけではないので、DevToolを使って確実に問題の部分を突き止めてから改善したうえでしばらく放置するのがおすすめです。
というわけでなぜかPageSpeedInsightの表示でCLSが0なのにCLSの問題が出てしまった原因とそれを解決した話です。
以上です。お読みいただきありがとうございました。