【CLSエラー0.25超の対策】imgタグにwidthとheightを指定した

CLS に関する問題: 0.25 超が出ている状態

サーチコンソール上にCLS に関する問題: 0.25 超。

何のことかよくわからず、ブログ更新やリライトを優先している間にモバイルはおろかPCまで不良URLを示す赤色になっていて頭を抱えました。

2020年11月追記

モバイル・PC共に『不良』から『改善が必要』に変わっていました。多少効果が出たようです。

ある程度更新が進んだところで、ようやく重い腰を上げて対策に乗り出すことに。まずはCLSとはなんぞやというところから。

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

ウェブに関する主な指標レポート – Search Console ヘルプ

画像の幅と高さを設定していないと読み込み時に位置がずれてガクッとなるので、どうやらそれをなくしましょうねということらしい。ここに載っていた具体例を見てようやく理解。

ひとまずブログにアップした画像のimgタグすべてにwidthとheightを指定してきました。大変だった。

ちなみに使用しているテーマはSnow Monkeyですが、ここで紹介していることはテーマ関係なく実施できるはず。

まずはWeb VitalsでCLS値を確認

Chromeの拡張機能だと手っ取り早く確認できるのでおすすめ。もちろんPageSpeed InsjghtsでもOK。

試しにとある記事で数字を確認してみると

CLS に関する問題: 0.25 超が出ている状態

思いっきり一番下の項目だけ真っ赤になってますね。これを0.1以下にする必要があるという。

CLSエラー(0.25超)を解消するために

最初は検索する単語がよくなかったのか、思うように参考になる記事が見つかりませんでした。今思えばTwitterで検索した方が早かったかもしれない(7月くらいには対策済ツイートがちらほらあった)

で、ひたすら検索しまくったところ以下の記事がヒット。とても参考になりました。

とにかくimgタグ中にwidthとheightが設定されていないとCLSエラーにつながるようです。というわけでまずはimgタグ内の確認から。

画像ブロックのimgタグ内を確認

ひとまず画像ブロック内を片っ端から確認することに。コウペンちゃんのアプリ記事のスクショ画像を例に出します。

CLSエラー imgタグ内にwidthとheightの指定がない状態

あ・・・あれ・・・?

widthも!heightも!どこにもいないじゃないか!!だからエラーになってサーチコンソールが真っ赤っかになっていたと。

ここからはすべての画像を確認する作業に突入です。

画像の%を指定すればwidthとheightが表示される

最初はHTML編集から直接書こうとも思ったのですが上手くいかず。結論からいうと

WordPress 画像ブロック imgタグ内にwidthとheightを表示させる

ここです。

画像ブロックを選択すると下の方に「画像の寸法」という項目が出てきますよね。そこで%指定をしてあげるだけ。きちんと選択できていれば上の画像のように黒くなります。

すると先ほどのスクショ中に

imgタグ中にwidthとheightを設定した状態

しっかりとwidthとheightが指定されました! 画像ブロックを選択して「詳細設定」から「HTMLとして編集」を選ぶことで確認できます。やったつもりで出来ていないこともあるのできちんと確認しておくことを推奨。

どの%にするかはお好みで。個人的には元の画像サイズ自体を小さめにしておいて、全部100%にするのが楽だと思う。

あとはひたすらこの作業を繰り返していくだけ。200記事もないブログなのに半日以上かかりました。最初から毎回きちんと設定しておけばよかった・・・。

追加CSSにスマホ用の設定を記入

先ほどリンクを貼ったサイトにも書いてあるのですが、このままだとスマホで見た時に大きい画像がはみ出して表示されてしまいます。

なので追加CSSにこれだけ記入。

.img {
max-width: 600px;
height: auto;
}

max-widthの値はご自由に。あんまり広げ過ぎてもはみ出すので600pxにしてます。

ここまでやってからもう一度Web Vitalsで確認。一応キャッシュ消して再読み込みしてから測りました。

CLSエラー対策後

ちゃんと緑になってます。

ただPageSpeed Insightsで確認した時は変わっていなかったので、時間をおかないといけないのかも。

Googleサーチコンソールから検証を開始

widthとheightの設定がすべて終わったらサーチコンソールに戻ります。

ウェブに関する主な指標からレポートを開いて、詳細画面に飛んでから検証を開始。色々なサイトの記事を読んだのですが早くても1ヶ月以上はかかるようなので気長に待ちます。

とりあえずimgタグ中にwidthとheightを設定するだけであれば簡単なので、まだやれていない人はそれだけでも手を付けてみてください。ブログのPVが激減しているのとじゃ関係ないだろうけど、こうしてやれることを済ませたおかげで気持ちも楽になったので。

しばらく経っても変わらないようであれば、他の原因を探してまた対策する予定。