CLSを改善する方法とそのメリットについてご紹介

SEO
2021-7-13
hashimotomasaki

glenn-carstens-peters-npxXWgQ33ZQ-unsplash

「Core Web Vitals（コアウェブバイタル・CWV）」とは、Webサイトの健全性・使いやすさを示す重要な指標です。このCore Web Vitalsは検索順位の要因に組み込まれることをGoogleは発表しています。Core Web Vitalsの要素の一つであるCLSはページの予期せぬレイアウトのずれを表す指標です。この値が大きいと、UXの良くないサイトだと判断されてしまいます。本記事では、CLSが大きくなる主な原因とその改善方法について解説します。

>>SEO対策に関するお悩み・ご相談はこちらからお問合せください

CLSとは

CLSとは2021年6月16日から始まったページエクスペリエンスアップデートで順次導入が開始されている、Core Web Vitalsの指標の一つです。「Cumulative Layout Shift」の略称で日本語では「累積レイアウトシフト」と訳されます。具体的には「ユーザーの操作なしにサイトのレイアウトがどれくらいズレてしまうか」を数値化して表すものです。つまり、CLSの指標を見れば自社のサイトページがユーザーにとってどれくらい安定しているものかを客観的に知ることができます。

以下の図のようにCLSは0.1未満が「GOOD」、0.25以下は「NEEDS IMPROVEMENT」、0.25を超えると「POOR」と評価され、CLSが大きくなるにつれてレイアウトのずれがありGoogleからの評価が低いことを表しています。

画像引用元：累積レイアウトシフト（CLS）
また、Core Web VitalsにはCLSのほかに、LCPやFIDがあります。LCPはページ表示速度を図る指標であり、FIDはサイトがユーザーの操作を反映するのにかかった時間を表します。これらもUXを改善するためにGoogleが指定した指標です。LCP、Core Web Vitalsについて詳しく知りたい方は下記のリンクからご覧ください。

LCPの改善方法とは？測定に便利なツールや確認方法を解説

【Google】ユーザー体験を向上させるための「Core Web Vitals」がランキング要因に！

CLS計算方法

ここでは、CLSがどのように数値化されるかについて紹介します。
CLSを数値化する公式は以下の通りです。
CLS=影響のある範囲の割合×移動距離の割合

画像引用元：累積レイアウトシフト（CLS）

上の写真は左の写真から右の写真へとなんらかの原因でレイアウトのズレが生じるサイトを想定しています。
左の写真から分かるように、このサイトページには表示画面の半分を占めるコンテンツが存在しており、右側の写真では、この要素が25％移動してしまった後の状態が表されています。これを上記の公式に当てはめると、影響のある範囲の割合は75％、移動距離は25％となります。そのためCLSの値は0.5×0.75=0.1805になります。
0.1805>0.1であるためCLSの観点では低い評価を受けてしまうことになります。

CLS確認方法

この章では数値化されたCLSを簡単に見ることができるツールを紹介します。
また、ここでは弊社が運営するデジタルマーケティングブログを測定しています。

Page Speed Insights

Page Speed Insightsでは、URLを入力すると以下のような画面が表示されます。ここではCLSを確認することができるとともに、その原因と原因箇所を把握することができます。

ここでのラボデータというのは特定のPCで取得したデータのことを表しており、フィールドデータは実際に複数ユーザーから取得したデータになります。

web vitals

次にweb vitalsについて紹介します。これはGoogleの拡張機能から使用することができます。このツールの特徴は、拡張機能を利用して1クリックでCore Web Vitalsの指標を確認できることです。

Google search console

Google search consoleでは、自社サイトがGoogleから全体的にどのような評価を受けているか測定することができます。画面左側のタブにある「ウェブに関する主な指標」から確認しましょう。
一番に改善すべきは「不良」の項目です。次に「改善が必要」の項目になります。
また、詳細を押すことで対象のURLを確認することができます。

Lighthouse

Lighthouseは、Googleの拡張機能またはディベロッパーツールから利用することが可能です。他ツール同様、ウェブサイトの評価を行うことができます。

上の写真にもある通り以下5点を評価基準にしています。

Performance
Accessibility
Best Practices
SEO
Progressive Web App

CLSについては「Performance」部分から確認が可能です。

CLS改善するメリット

ここまで、CLSとは何かご紹介してきましたが、なぜCLSを改善する必要があるのでしょうか。そのメリットは主に2つです。
【CLSを改善するメリット】

離脱率の低下
Googleからの評価向上

以下で詳しく解説します。

離脱率の低下

CLSを改善することは、離脱率の低下につながります。予期せぬ動きのあるWebページはユーザーのフラストレーションを引き起こし、途中離脱を促してしまうおそれがあるからです。
ヤフージャパンでは自社のオウンドメディアのCore Web Vitalsを監視し、CLSスコアを改善することで滞在時間を13.3%延ばすことに成功しています。ユーザーにとってより使いやすいサイト作りを心がけることが離脱率の低下につながります。
参考：ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例 – Yahoo! JAPAN Tech Blog

Googleからの評価向上

GoogleはUXの最適化を目指し、あらゆる評価基準をアップデートしています。つまりCLSを含むCore Web Vitalsを改善することで、Googleからの評価が良くなり検索順位上昇につながります。

>>SEO対策に関するお悩み・ご相談はこちらからお問合せください

CLSが大きくなってしまう原因と対策

ではCLSが大きくなってしまう原因は何なのでしょうか。
ここでは、ズレが生じてしまう主な原因と、その解決策について紹介します。

画像によるズレ

一番多い原因として上げられるのが画像の読み込みによるズレです。ページを読み込んだ際、最初にテキストが読み込まれ、その後、文章やコンテンツの途中にある画像が読み込まれることでテキストの位置にズレが生じてしまいます。この現象によってCLS値が悪化してしまいます。主な改善策の方法は画像にサイズ指定をすることです。

画像サイズを指定する

近年ではレスポンシブデザインを採用しているサイトが多く、画像にサイズ指定していないことが多くなっています。一度自社サイトの画像にサイズ指定がされているか確認してみましょう。
レスポンシブデザインとは、同じURL、同じHTMLで作ってもユーザーのデバイスに応じて表示を変えることができるものです。便利な機能ではありますが、これがレイアウトシフトの原因につながってしまいます。
そのため、imgタグに幅”width”と高さ”height”を指定し、画像のサイズをあらかじめ確保しておくことで、CLSを改善することができます。

webフォントによるズレ

使用するwebフォントの影響で、レイアウトシフトが生じてしまう可能性があります。
webフォントが映し出される際に文字サイズが変わり、レイアウトが変更されてしまうケースです。改善策としては以下2点が挙げられます。

font-display:optionalを設定する
link rel=preloadを設定する

font-display:optionalを設定する

CLSを改善しつつ、ウェブフォントを使いたい場合はfont-display:optionalを設定することが効果的です。ウェブフォントは特別な設定を行っていなければ、font-display:autoに設定されています。この設定は、ブラウザが読み込まれると、2～3秒ウェブフォントの描画を試みます。その後読み込めないとローカルフォントを利用し、ウェブフォントが描画できるタイミングでフォントを変更します。この、再変更がCLSを悪くしてしまっています。これを改善するのがfont-display:oputionalです。
この設定は、ブラウザが更新されるとウェブフォントの描画を試みたのち、100ミリ秒以内で読み込まれないと、ローカルフォントで表示され、ウェブフォントで表示されることはありません。
つまり、CLS悪化の原因となるフォントの再変更が行われなくなることで、CLS改善につながります。

link rel=preloadを設定する

上記では、font-display:oputionalを設定し、CLSを改善することが効果的であると述べましたが、100ミリ秒以内に読み込まれないと、ウェブフォントが使用されずサイト内の独自性がなくなってしまいます。そのため、必要なファイルを先にロードさせるよう link rel=preloadの記述をして、読み込みを優先的に行うよう指示することでウェブフォントの使用を可能にします。

サイズ指定がない広告、iframeによるズレ

サイズ指定のない広告やiframeによってもレイアウトのシフトが生じてしまいます。
対処法としては表示領域をあらかじめ確保するということが挙げられます。

表示領域を確保する

あらかじめスペースを確保しておくことで、コンテンツが読み込まれたときに起きるレイアウトシフトを防ぐことができます。
具体的にはdivタグを用いて、プレースホルダーを作ることにより、読み込み前後のレイアウトシフトを防ぎます。
また、広告に関しては、UX的視点からも、CLSの視点からも、ファーストビュー内上部にあるのは適切とは言えません。そのため、できる限り下部に設置するようにすることをおすすめします。

スライダーの使用によるズレ

スライダーやカルーセルもレイアウトシフトの原因となります。大量の画像を使うため、読み込みに時間がかかってしまいます。この対処法は以下3点が挙げられます。

領域を確保する
画像の使用枚数を少なくする
なるべく利用しない

領域を確保する

スライダーが入ってくる領域をあらかじめ確保しておきます。そうすることで読み込みが遅れた際でも、ページのレイアウトが動くことはありません。

ローディングの優先順位を指定する

スライダーで用いる画像のimgタグにloading属性を指定して画像の読み込み優先度を制御します。
画像表示を速やかに行う必要のある一枚目の画像にはloading=eager、二枚目以降にはloading=lazyを記載し、一枚目の画像を優先的を読み込むことが効果的です。

なるべく使用しない

スライダーは画像を多く使用するため読み込みに時間がかかりCLSへの影響は大きくなります。そのためスライダーを本当に利用する必要があるのかについて考える必要があります。
ノートルダム大学の研究では、サイト訪問の約2％しかスライダーをクリックしないという結果が出ています。また二枚目以降のスライダーをクリックするのは、2％の中の約30％しかいないといわれています。
CLSに悪影響を与えるものであるため、必要ない場合はスライダーの使用をやめるのも1つの手ではないでしょうか。