どうも！フジグチです！
先日妻のブログが「ウェブに関する主な指標」の「CLS に関する問題: 0.25 超（モバイル）」というサーチコンソールのエラーが出ました。
あまり見慣れないエラーにどう対応して（当ブログの問題ではないのですが）エラーを修正できたかを、備忘録として残したいと思います。
CLSとは
CLSとはSearch Consoleヘルプによると以下のように書いてあります。
CLS（Cumulative Layout Shift）: 読み込みフェーズにおけるページ レイアウトの移動量を示します。評価スコアの範囲は 0～1 で、0 は移動なし、1 は移動量が最大であることを意味します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。
ざっくり言うと、ユーザーがページを読み込んで見ている間に、ユーザーが操作していないにも関わらずレイアウトが移動してしまうことです。
レイアウトの移動が起こる原因は、ブラウザはページを読み込む際にまずHTML、遅れてCSSやJavaScriptや画像というように読み込みを行っていきます。
このときに最初に読み込まれた文章が、遅れて表示される画像に画像の高さの分だけ押され下に移動してしまうのです。
サイト閲覧時にこういった経験はないでしょうか？
- 本文を読み始めると画像が遅れて表示され、読んでいた文章がずれてしまった。
- リンクをクリックしようとすると広告が表示され、誤ってクリックしてしまった。
どちらも閲覧している側からするとストレスを感じますよね。
こういったユーザビリティの低下を招かないためにも、CLSエラーを改善しなければいけないのです。
CLSエラーへの対処法
今回私が行ったCLSエラーへの対処法は、画像の幅(width)と高さ(height)を指定することです。
後から表示される画像に文章が押されるのであれば、あらかじめ幅と高さを指定してその画像が読み込まれるスペースを確保しておくのです。
はてなブログで画像を記事内に挿入すると、幅と高さが指定されません。
記事内で画像のサイズを調整すると、幅のみはHTML上に指定されますが高さは指定されません。
なのでほぼ全ての画像（およそ300枚）にHTML上で幅と高さを指定しました。
CLSの確認の仕方
全ての画像に対策を行った後に、CLSエラーが出ている記事に対してPageSpeed Insightsにて計測を行い確認をしました。
CLSの確認方法は、PageSpeed Insightsで調べたいページのURLを入れて「分析」を押すだけです。
すると結果に「累積レイアウト変更」という項目が出てきます。
この数値が0.25以下であれば良いのです。
0.32という数値でエラーの出ていた記事に、画像の幅と高さを指定して計測したところ、結果は０に改善されました。
このようにエラーの出ていた全ての記事に確認を行ったところ、最大でも0.02以下という数値まで下げることが出来たため、サーチコンソールにてエラーの修正が済んだことを報告。
すると、約二週間後に全てのURLのエラーが消えました。
二週間ほどかかったのは、サーチコンソール側のデータは「ユーザーエクスペリエンスレポートに準ずる」とあるので、一定期間のデータが収集されないと反映されないためだと思われます。
まとめ
エラーの出た記事は画像の適切な圧縮もしていなかったので、一概に原因が「幅と高さの指定がされていないため」とも言いきれないのですが、確実に数値は改善されました。
WordPressでは画像の幅と高さを自動出力するプラグインがあるのか、私が見た限りではどのサイトでも必ず記述されていました。
はてなブログで画像を多く使うレビュー系の記事を書く方は、気をつけた方が良いかもしれませんね。
同じようなエラーでお困りの方のお役に立てば嬉しいです。
最後までお読み頂きありがとうございました。
