CLS「累積レイアウト変更」を改善する具体的な方法

今回は、サーチコンソールやPageSpeed Insightsで表示される「ウェブに関する主な指標（Core Web Vitals）」の指標の一つである「CLS」に関する事と、「CLS」の改善方法を紹介します。

こんな人に向いた記事

CLSとは？

CLSとは「Cumulative Layout Shift」の略で、日本語では「累積レイアウト変更」と言います。
CLSはレイアウトに関する視覚要素の安定性を示す指標です。

例えば。まず以下の動画を見て下さい。

ナビゲーションメニューからCreative一覧ページへ移動する際に、ページが読み込まれた瞬間はページ一覧のサムネイル画像は表示されていなくて、約0.2秒後くらいに写真が表示されています。

この時に本来画像が配置されているべきエリア（レイアウト）に画像が存在せず、その分テキストが上に詰められていました。0.2秒後に画像が表示される際は、本来存在すべき場所に画像が表示されるので、先ほど上に詰められたテキストが本来の位置に無理やり押しやられます。

この動きが、レイアウトが変更されている概念です。

この様にレイアウトが動く事はユーザビリティが非常に悪いとされておりSEOの観点でも評価が下がります。

ユーザーが本来クリックしたかった部分を押そうとした際に、レイアウトが動いてしまう事によってクリックしたかった部分が移動して、目的のリンクでは無い別のリンクを誤クリックしてしまう可能性があるからです。

このレイアウトの変更の指標を「累積レイアウト変更（CLS）」と言い、その値が0~1です。0が最も優秀で1に近づくほどレイアウトが動いてしまっている事を意味します。

自身のWEBサイトの累積レイアウト変更（CLS）の数値を確認するにはいくつかの方法があります。
最も代表的な方法は以下の様にPageSpeed Insightsでサイトスピードに関するラボデータを参照する方法です。（他にもデベロッパーツールやプラグインでの確認方法もありますが今回は割愛）

上記の場合はCLSの結果は0.004なので、限りなく0に近く優秀な結果だと言えます。

CLSの改善方法は、非常に簡単です。

結論から言うとimgタグにwidthとheightをしっかりと指定してあげる事です。

具体的に説明します。
まずレイアウトを動かしてしまう原因は主に以下が考えられます。

width=autoもしくはwidth=100%は端末やディスプレイ幅によって大きさが大きく変わってきます。
そのためページに配置した画像はページが読み込まれる度に画像のレイアウトを可変的に決めていかなくてはいけません。

そしてlazz loadによって画像ファイルが後の方に読み込まれると、画像よりテキストが先に読み込まれます。

この状態はテキストが先にレイアウトされ、画像は後からレイアウトが決められます。
その結果、画像が無かった場所に無理矢理配置されてレイアウトの移動が起きてしまいます。

現状、大体のCLSの低評価はこれが原因だと思われます。（この動きが先ほどの動画の動きです。）

これを改善するには、予め画像の幅と高さを指定してあげる事です。

そうする事でブラウザは、画像が配置されるべき幅と高さを先に認識してくれるので、その分のスペースが先にレイアウトされます。なので、画像は後から読み込まれるのは変わらないが、レイアウトの動きは起きなくなります。

実際の作業は、WordPressの場合は特にやる事はありません。
と言うのもWordPressはデフォルトでimgタグにwidthとheightが指定されています。
ただ何かしらのプラグインやテーマの機能でimgの幅と高さをいじっている場合は別です。

静的サイトの場合は、今までwidthとheightを指定していなかったのであれば、全てのimgタグに手作業でwidthとheightを追加していきましょう。

この時に一括置換したいのであれば以下の記事を参考にして試してみて下さい。

実際に作業をこなしたら、再びPageSpeed Insightsで評価の確認を行うと思うのですが、恐らく結果は改修前と変わらない数値が目にいくかと思います。

しかし安心して下さい。PageSpeed Insightsの上記の部分のデータは長期的に見たデータなので「今の状態がこの評価ですよ」といった意味ではないです。

今の状態を確認したいのであれば、Chromeの拡張機能であるweb vitalsでページを読み込んで確認してみて下さい。

リアルタイムのCLSの結果を確認できるので改修されたのかの判断ができるかと思います。
優秀な数値を常にとっていればPageSpeed Insightsのデータもいずれ変わってきますので安心して下さい。

以上が「CLS「累積レイアウト変更」を改善する具体的な方法」でした。

WEBに関する新たな指標（Core Web Vitals）はCLSの他にLCPとFIDも存在します。

最後まで閲覧ありがとうございした。