CLS問題に悩まされた2か月
閲覧ありがとうございます。
山本電卓と申します。
私はWordPressで個人サイトを作成しています。
よりたくさんの方に見ていただくためにはサイトをより良い状態に保たなければなりません。
その指標の1つがGoogleが提唱する「ウェブに関する主な指標(Core Web Vitals)」です。
2021年5月からGoogleの検索順位にも影響してくるようですので私のサイトでも注意していました。
※「ウェブに関する主な指標」は「ページスピードインサイト」や「サーチコンソール」で確認できます。
しかし2月の頭になり、急に「ウェブに関する主な指標」の1つであるCLSが私のサイトでエラー判定になったのす。
CLSとはページを読み込んだ際に生じるレイアウトのズレですね。
画像だけ遅れて読み込まれることで文章などの表示がズレてしまうといった経験は皆さんあるのではないでしょうか。
このズレが少ない方が良いサイトだと判定されるわけです。（数値にして0.1未満）
そのズレに関する指標となるCLSですが、特に何かカスタマイズしたわけでもないのにエラーが出たのです。
こちらとしては原因がさっぱり分からないのですが、そのままにしておくわけにもいかないので色々調べました。
基本的にCLSの問題は「画像の遅延読み込み」もしくは「画像サイズを指定していない」ことが原因と分かりました。
画像サイズはちゃんと指定しているので、遅延読み込みのプラグインを停止させました。
これで実際にサイトを見てもサイト内で表示がズレるという現象は全く起きなくなりました。
もう1度言います、表示がズレるという現象は全く起きなくなったのです！
しかしCLSエラーは改善されず…。
それどころか日に日にエラーの数値は悪く（大きく）なる一方でした。
何故だぁーーー！！！
その後も色々考えました。
私のサイトはSANGOというテーマを使っているのですが、その仕様でホーム画面になりますと記事の一覧がゆっくり表示されるというアニメーションが入ります。
「これが原因かな？」とも思いましたが、私のサイトでは200近いページでエラーが検出されています。
これは掲載している記事数に近い数ですので問題は記事内のレイアウトにあると考えられます。
ですので記事一覧表示のアニメーションが原因ではないかなと…。
次に原因として考えたのが、記事のサムネイルです。
記事のサムネイル画像を調べてみると画像サイズの指定がないことが分かったのです。
確かに各記事の下部には関連記事としていくつかの記事のサムネイルが表示されていますが、こんな一部の小さい画像だけでエラーが出るものでしょうか…？
と自分なりに考えてみましたが、仮にホーム画面のアニメーションやサムネイルが原因だとしても、どちらもSANGOのテーマによって表示しているものですのでこちらでどうこうできるものではありません…。
そんなこんなでもうお手上げ状態になったので、他のサイトはどうなのかと調べてみますとどのサイトでもCLSのエラーが検出されていることが分かりました。
CLS問題の対策法を記載した記事ですらCLSのエラーが検出されたのです。
ここで私は
「これはもうGoogle側の問題なのでは…？」
と思い、一旦CLSに関する対応はストップして様子を見てみることにしました。
その間もCLSの数値はどんどん悪く（大きく）なっていき、最大で3.4まで上がってしまいましたが…
そんなある日、SANGOのアップデートが公開されました。
その内容には「記事一覧のアニメーションを停止する機能の追加」と「サムネイルのサイズ指定」が含まれていたのです。
「これはまさか…！？」
と少し期待してSANGOをアップデートしてしばらく様子をみていくと…
日に日にCLSの数値が下がっていくではありませんか…！！
そして2021年4月現在、私のサイトのCLSの数値は…「0」！！
まさかの「0」！！
合格基準の0.1未満も楽々クリアです！！
いや～5月までに解決して本当によかったです◎
SANGOのアップデート以外にもいろいろ試行錯誤していたので、本当にSANGOのアップデートが解決策だったかどうかはよく分かりませんが、きっかけではありますね。
とりあえず、解決してよかったと。
それだけは確かです。
というご報告でした！
それではここまでお付き合いありがとうございました！
山本電卓
この記事が気に入ったらサポートをしてみませんか？