SEO講座
Core Web Vitalsの対策③ CLSの改善方法
CLSとは？
CLS（Cumulative Layout Shift）を日本語に訳すと「累積レイアウトシフト」！
FIDに引き続き、訳しても全くわからないですよね。。。
ウェブページを見た時に、ユーザーの操作なしにページ内のレイアウトがどれくらいズレてしまうかを数値化して表したものです。
CLSの指標を見れば、自社サイトのページがユーザーにとってどれくらい安定して表示できているかを客観的に知ることができます。
CLSの判定基準は、下記になります。
0.25以下：要改善
0.25超過：不良
CLSの数値が大きくなるにつれて、レイアウトのズレがあるとGoogleに判断されて、評価が低くなることを表しています。
CLSの確認方法
サイトの速度等を測定するGoogleのツール、Page Speed Insightsを使うと、CLSの数値と点数を下げている原因の箇所を確認することができます。
測定結果画面で、下記のように「CLS」をクリックすると詳細を見ることができます。
あそびラボのサイトの場合、すでに点数がかなりいいので、改善ポイントの例があまりなくてすみません^^;
CLSの数値が大きくる原因と対策
CLSが大きくなってしまう原因は何なのでしょうか？
ズレが発生する主な原因と解決策について説明していきます。
① 画像によるズレ
原因の中で1番多いのが、画像読込によるズレです。
ページを読み込む際、最初にテキストが読み込まれ、その後に画像が読み込まれることによりテキストの位置にズレが生じてしまいます。
この現象によってCLS値が悪化することがありますが、画像のサイズ指定をすることで解決することが出来ます。
特にリキッドレイアウトのレスポンシブデザインで多いのですが、最近は画像にサイズ指定していないことが多くなってきています。
レスポンシブデザインは便利ですが、これがレイアウトシフト（レイアウトのがズレる現象のこと）の原因に繋がっています。
imgタグにwidth（幅）とheight（高さ）を指定し、画像のサイズを予め指定しておくことで、CLSを改善することができます。
これ、かなり全体の点数アップに繋がるので、ちょっと面倒ですがオススメです！
SP：68点（CLS：0.561）
PC：80点（CLS：0.361）
↓
SP：91点（CLS：0）
PC：96点（CLS：0.001）
② webフォントによるズレ
webフォントの影響で、レイアウトシフトが生じてしまう可能性があります。
webフォントが表示される際に文字サイズが変わり、レイアウトが変更されてしまうケースです。
改善策として、下記の2点があります。
link rel=preloadを設定する
CLSを改善しつつウェブフォントを使いたい場合は、font-display:optionalを設定することが効果的です。
ウェブフォントは特別な設定を行っていない場合、font-display:autoに設定されています。
この設定の場合、ページが読み込まれる際に2～3秒ウェブフォントの描画を試みます。読み込めない場合はローカルフォントを利用し、ウェブフォントが描画できるタイミングでフォントを変更します。
これが原因になり、CLS値を悪化させることになります。
これを改善するのがfont-display:oputionalです。
この設定にすると、100ミリ秒以内で読み込まれないと、ローカルフォントで表示され、ウェブフォントでは表示されません。
CLS悪化の原因となるフォントの変更が行われなくなることで、CLS改善に繋がります。
ウェブフォントが表示されないのは辛いですけどねT T
「採点の良さを優先するか」「好きなフォントで必ず表示させるのを優先するか」で判断すればいいと思います。
③ スライダーの使用によるズレ
スライダーやカルーセルもレイアウトシフトの原因となります。
大量の画像を使うため、画像やページ読込の時間がどうしても掛かってしまいます。
改善方法は、主に下記2つがあります。
・なるべく利用しない
スライダーに使う画像のimgタグに、loading属性を指定して画像の読込優先度を制御します。
1枚目の画像はloading=eager、2枚目以降の画像はloading=lazyを記載し、1枚目の画像を優先的を読み込ませることによって、CLSを改善できることがあります。
1番ベストなのは、なるべく使用しないこと！
って、オイッ！ってツッコまれますよね^^;
しかし、スライダーは画像を多く使用するだけでなく、スクリプトの読込時間も掛かるので、CLSだけでなくFID等への影響もあります。
スライダーを利用する必要が特にない場合は、使わないというのも選択肢の1つです。
ノートルダム大学の研究等でも、ユーザーの約2％しか最近はスライダー画像をクリックしないと言われています。
CLS値の改善だけでなく、スライダーが必須でない場合は、クリックされやすいバナーを複数作成して、クリックされやすいように配置するのもコンバージョン率アップも含め、サイト運営には有効な方法です。