名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

2021年5月、Googleはコアウェブバイタルズという指標をホームページの評価基準に取り入れました。コアウェブバイタルズは、LCP・FID・CLSの3つに分かれており、これらはホームページの閲覧・利用しやすさなどを数値として表したものです。
これらの指標はホームページの評価に直結するため、コアウェブバイタルズの改善方法を理解して正しく対策を講じることができれば、ホームページの検索順位を向上させる一助となります。
そこで今回は、コアウェブバイタルズの一つCLSを改善する方法を紹介します。

コアウェブバイタルズのCLSとは

コアウェブバイタルズのCLS(Cumulative Layout Shift)とは、「累積レイアウト変更」という意味で、ページコンテンツの視覚的安定性を表す指標です。
ホームページの読み込み開始から終了までに生じたレイアウトのズレを数値として表しており、レイアウトのズレに比例してCLSの数値も大きくなっていきます。CLS の数値は0〜1で表示され「0.1未満であれば良好」「0.25以上は不良」という評価をGoogleから受け、この数値はGoogleSearchConsoleやPageSpeedInsightなどのツールで確認することができます。
ユーザーがアクセスしてから読み込みが完了する間に、レイアウトが大きく変わる場合はCLSの数値が高く、レイアウトが変わらない場合はCLSの数値は低くなります。次の画像のように、ホームページの読み込みが完了した際に、コンテンツの位置が変わるホームページは、CLSが悪い傾向にあります。

コアウェブバイタルズのCLSのスコアを改善する方法

コアウェブバイタルのうちCLPのスコアは、「コンテンツのサイズ指定」「WEBフォントの最適化」の2つを実施することで改善することができます。

コンテンツのサイズを指定する

CLSスコアが悪くなる最大の原因は、画像や動画、広告、埋め込みコンテンツの縦幅と横幅が指定されないことです。
ブラウザは、HTMLファイルに記述されたプログラムを読み、読み込みが完了したコンテンツ（テキストや画像、動画など）から順番に表示していくため、画像や動画と比較して容量が少ないテキストから表示されていきます。その後、画像や動画の読み込みが完了して間に差し込まれていくため、テキストの位置が急に変わるという現象が発生します。
画像や動画、広告、埋め込みコンテンツの縦幅と横幅を指定しておけば、ブラウザ側がその分のスペースを事前に確保するため、レイアウトが変更されることがなくなり、CLSのスコアを改善することができます。

WEBフォントの記述を最適化する

WEBフォントとは、各端末に標準で搭載されているフォントではなく、インターネットやサーバー上で提供されているフォントのことです。
WEBフォントの容量が大きく読み込みに時間がかかる場合、ブラウザに標準で搭載されているローカルフォントでテキストが表示された後、読み込み完了後にWEBフォントでテキストが再表示されます。WEBフォントでテキストが再表示されてしまうと、大なり小なりホームページのレイアウトが変更されることでCLSのスコアが悪化します。

1. ブラウザがWEBフォントの読み込みを開始する
2. 容量が軽いローカルフォントでテキストが表示される
3. WEbフォントの読み込みが完了し、テキストが再表示される
4. テキストが再表示されることで、レイアウトが変わる（崩れる）
5. レイアウトが変わることで、CLSのスコアが悪化する

つまり、CLSを改善させるためには、ローカルフォントよりも早くWEBフォントを読み込ませるか、WEBフォントで再表示させなさせる対策が必要です。WEBフォントを優先的に読み込ませたり、一定時間以上WEBフォントの読み込みに時間がかかる場合はWEBフォントによる再表示をキャンセルし、ローカルフォントで表示させ続けるようコーディングを修正することで、CLSのスコアを改善することができます。

今回のまとめ

今回の記事を読むことで、コアウェブバイタルズのCLSの概要とその改善方法を理解することができたかと思います。
他のコアウェブバイタルズ「LCP」「FID」とは異なり、CLSを改善するためにはプログラミングの知識が必要となるため、CLSのスコア改善は制作会社に依頼することをおすすめします。
なお、仮に今回のブログで紹介した2つの改善方法を実施したとしても、すべてのページでCLSのスコアを最高点にすることは現実的ではありません。
どうしてもCLSのスコアを改善したい場合は、制作会社に相談して修正作業に発生するコストとその効果を踏まえた上で検討しましょう。