「CLS に関する問題: 0.25 超」の意味は？対応方法は？

はじめに

Google Search Consoleをチェックしていた時、「CLS に関する問題: 0.25 超」のエラーが大量に発生していました。

CLSとは「Cumulative Layout Shift」の略で、GoogleのSearch Consoleヘルプによると、以下のように説明されています。

読み込みフェーズにおけるページレイアウトの移動量を示します。評価スコアの範囲は 0～1 で、0 は移動なし、1 は移動量が最大であることを意味します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザーエクスペリエンスが低下するためです。

ん～公式のサイトって何でこんなにわかりにくい表現を使うんでしょうかね。噛み砕いていうと、「サイトの表示で一部のコンテンツが遅れて表示されているよ」ってことです。

このあたり、もう原因の予想はついていました。ずばり、広告です。ブラウザからサイトを表示したとき、ワンテンポ遅れて広告が表示されることが結構あります。これを改善しなさいということです。

念のためGoogleのサービス（PageSpeed Insights）で調べてみるとCLS（Cumulative Layout Shift）が0.355となっています。0.25以下にしなさいということです。

ITStudyのサイトはCocoonのテーマを使用しているので広告の付け外しも簡単にできます。早速、改善していきます。

WordPressにログオンし、Cocoonの設定画面を開きます。

表示する広告を減らせば、CLSの数字は改善します。このあたりは広告収入とのバランスを考えて設定しましょう。

広告を減らしてPageSpeed Insightsで再度チェックしたところ、CLSが改善できました。