トンゼミ
1999年からの信頼のEコマース運営実績 本気でネットショップを運営するウェブマスターを応援!

ネットショップ経営戦略支援コンサルタント トンゼミCEO 一般社団法人ジャパンEコマースコンサルタント協会 理事

Core Web Vitals(コア ウェブ バイタル)のCLSを改善する方法

CLS(Cumulative Layout Shift)とは

日本語訳では「累積レイアウトシフト」とされますが、ページ内の画像やテキストなどがどの程度快適に表示されているかを表す指標です。ページ内でレイアウトのくずれや表示のずれなどを数値で表示しており、全くずれ等がなく快適に表示されている状態が「0」です。0.1未満は「GOOD」0.25以下は「NEEDS IMPROVEMENT」0.25を超えると「POOR」と評価されますので0.1未満で維持することが望ましいとされています。CLSで「0」を目指すための改善方法をご紹介します。

Webフォントの読み込み最適化

webフォントを使用するサイトも多々あります。webフォントの読み込みが遅れるこもあり、そうすると、読み込まれたときにレイアウトのズレが生じるかもしれないために起こります。対策としてはCSSで「font-display」を指定したり、webフォントを軽量化(サブセット化)を行うようにしましょう。

画像の幅、高さを指定

画像に横幅(width)と高さ(height)を設定します。設定することで表示領域があらかじめ確保されるために、読み込みによるレイアウト変更を防ぐことができます。動画に対しても同じように指定をするようにしましょう。既存サイトにこの設定をしていく場合は、現在のCSSなどとの兼ね合いで他の部に影響がでる可能性もありますので、検証しながら修正を行うようにしましょう

今回は、 「Core Web Vitals(コアウェブバイタル)」 の一つの指標であるCLS(Cumulative Layout Shift)の改善方法についてご紹介しました。まずは画像サイズ指定などは画像が多いほど大変な作業になりますが、こつこつと一つ一つ改善を行うようにしましょう。

▲ PAGE TOP