Google Search Consoleで自分のサイトの検索状況を確認していたところ、「CLS に関する問題: 0.25 超（モバイル）」というエラーが出ていました。モバイルサイトのみで出ている模様。Googleのサイトを確認しても、英語のサイトしか見当たらず…
SearchConsoleでのエラーはSEOに影響してきます。こういった問題がどの程度評価に影響してくるかは分からないにせよ、少なからず評価の低下につながってしまうはず。
このエラー僕も原因が分からなかったので調べてみたところ、おそらくカルーセルが問題なのではないかという結論に至りました。今回はそのエラーの修正方法のご紹介です。スクリーンショットを含めて、分かりやすく解説していきます。
原因はカルーセルにある！「CLSに関する問題:0.25超（モバイル）」
このエラーの原因はカルーセルにあると思われます。CLSとは、Cumulative Layout Shiftの略で、「レイアウトがシフトした量」、つまり、ページを読み込んでからページ上の何かしらが動きすぎたんだ、ということです。
僕のサイトで読み込み後に動くものといえばカルーセルしかありません。そこで、カルーセルの設定を変更することに。カルーセルからのサイト内移動は厳密には把握していませんでしたが、これで離脱率が上がったらそれはそれで、その時に考えます。
カルーセルの設定はCocoon設定から
僕は「ドルフィン日記」の運営にあたって、無料で高機能なテーマ「Cocoon」を使っています。
カルーセルはCocoonの設定から設定できます。全てのテーマで対応しているわけではありませんが、今回このエラーが起こって調べている以上、カルーセルを使っているはずなので何かしらの方法でカルーセルの設定を変更してみてください。Googleで「(テーマ名) カルーセル」などと検索すれば出てくるはずです。
左側のメニューから「Cocoon設定」を選択します。すると、テーマに関する設定一覧が出てきます。Cocoonは見ての通り、無料のテーマにも関わらず機能が充実しているので大好きです。もう少しAdSense収入が入るようになったら有料テーマにチャレンジしてみてもいいかも。
Cocoon設定であれば「カルーセル」という設定タブがあります。ここをクリックしてカルーセルの操作をします。
カルーセルの設定が出てきますので、「カルーセルの表示」を「表示しない」か「固定ページのみ表示」などに変更しておきましょう。一番下の「設定を変更」という青いボタンをクリックしたら設定変更が保存されます。これで完了です。
サイト速度は、ユーザーファーストのためにも、SEOのためにも重要
僕はカルーセルに憧れていました。
Amazonなどのネット通販サイトとは違うものの、でもああいう通販サイトみたいにサイト上で動かしたかった。僕の知っている限り、多くの航空会社などもカルーセルを設置しています。
でも、ああいうサイトって、ちゃんとした技術者がいて、そういう人が作っているもの。僕みたいな素人がワンクリックで作れるカルーセルとはわけが違います。
ということで、今回はカルーセルを撤去するという方策を取りました。
サイトの表示速度は、ユーザーファーストのサイトを作るためには必須。実際に、サイトの表示までにかかる時間が1秒と3秒では、自分が見るときに全然感覚が違うのはみなさんお分かりいただけますよね？
僕も現在、いろいろと調べながらサイト表示速度の向上に向け、さまざまな技術的対応を行なっています。また、ある程度目処が立ったらこのサイトでもご紹介したいと思っています。
