インターネット

INTERNET

公開：2024-06-19

CLS(累積的レイアウト移動)とは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

CLS(累積的レイアウト移動)とは

CLSとはウェブページの読み込み中に発生する予期せぬレイアウトシフトを数値化したものです。具体的にはページの表示が安定するまでに、どの程度コンテンツの位置が動いたかを示す指標となります。

GoogleはCLSを、ユーザーエクスペリエンスを評価する重要な指標の1つとしています。CLSが高い、つまりページの表示中にコンテンツの位置が大きく変化すると、ユーザーはページの操作や閲覧に支障をきたす可能性があります。

CLSは0から1の間の値で表され、値が低いほどレイアウトの安定性が高いとされています。GoogleはCLSのスコアを「良好」、「改善が必要」、「不良」の3段階で評価しており、0.1未満が「良好」とされています。

CLSに影響を与える主な要因としてはサイズ未指定の画像や広告、動的に挿入されるコンテンツ、Webフォントの読み込みの遅延などが挙げられます。これらの要素によってコンテンツの位置が突然シフトし、ユーザーの操作の邪魔になることがあります。

ウェブサイト運営者はCLSを最小限に抑えることでユーザーエクスペリエンスを向上させ、サイトのパフォーマンスを改善することができます。そのためにはレイアウトシフトの原因を特定し、適切な対策を講じる必要があります。

CLSの測定方法と評価基準

CLSに関して、以下3つを簡単に解説していきます。

• CLSのスコアの計算方法
• CLSの評価基準と目標値
• CLSのスコアの改善に役立つツール

CLSのスコアの計算方法

CLSのスコアはページの表示中に発生したレイアウトシフトの影響度合いを数値化したものです。各レイアウトシフトのスコアはシフト前後のビューポートの変化量と、シフトに関与したコンテンツの面積の積で計算されます。

最終的なCLSのスコアはページの表示中に発生した全てのレイアウトシフトのスコアの合計値となります。ただし、ユーザーの操作によるレイアウトシフトは除外され、予期せぬシフトのみが評価の対象となります。

CLSのスコアはページの読み込みが完了するまでに蓄積されていきます。そのため、ページの表示が安定するまでに時間がかかるほど、CLSのスコアは高くなる傾向にあります。

CLSの評価基準と目標値

GoogleはCLSのスコアを、「良好」、「改善が必要」、「不良」の3段階で評価しています。CLSが0.1未満であれば「良好」、0.1以上0.25未満であれば「改善が必要」、0.25以上であれば「不良」とされています。

ウェブサイト運営者はCLSのスコアを0.1未満に抑えることを目標とすべきでしょう。ただし、サイトの種類や規模によっては0.1未満を達成するのが難しい場合もあります。

その場合は現状のCLSのスコアを把握した上で、段階的に改善を進めていくことが重要です。まずは「不良」の状態を脱し、「改善が必要」のレベルまでスコアを上げることを目指しましょう。

CLSのスコアの改善に役立つツール

CLSのスコアを改善するためにはまずはサイトの現状を把握する必要があります。Google Search ConsoleやGoogle PageSpeed Insightsなどのツールを活用すれば、サイトのCLSのスコアや、改善が必要な点を確認できます。

また、Chromeの開発者ツールを使えば、実際にレイアウトシフトが発生している箇所を特定できます。Performance パネルの「Experience」セクションで、CLSに関連するイベントを確認することができます。

これらのツールを活用して、レイアウトシフトの原因を突き止めましょう。そして、サイズ指定の徹底や、動的コンテンツの配置の最適化など、適切な対策を講じることでCLSのスコアを改善していきましょう。

CLSを改善するための具体的な方法

CLSに関して、以下3つを簡単に解説していきます。

• 画像や広告のサイズを事前に指定する
• 動的に挿入されるコンテンツの配置を最適化する
• Webフォントの読み込み方法を改善する

画像や広告のサイズを事前に指定する

サイズが指定されていない画像や広告は読み込み中にレイアウトシフトを引き起こす主な原因の1つです。これを防ぐには画像や広告のサイズを事前にHTML内で指定しておく必要があります。

具体的にはimgタグのwidth属性とheight属性を使って、画像の幅と高さを明示的に指定します。同様に、広告やその他の埋め込みコンテンツについても、サイズを指定することが重要です。

また、レスポンシブデザインを適用する場合はCSSのmax-width: 100%;を使って、コンテナに対する画像のサイズを相対的に指定するのが有効です。これにより、画面サイズに応じて画像が適切に拡大縮小され、レイアウトシフトを防ぐことができます。

動的に挿入されるコンテンツの配置を最適化する

広告や関連コンテンツなど、動的に挿入されるコンテンツもレイアウトシフトの原因となります。これを防ぐにはコンテンツの挿入位置を事前に確保しておくことが重要です。

例えば、広告を表示するためのコンテナ要素を事前に配置し、サイズを指定しておきます。そして、広告の読み込みが完了したら、そのコンテナ内に広告を挿入するようにします。

また、ユーザーの操作によって動的に表示されるコンテンツについても、事前にスペースを確保しておくことが有効です。アコーディオンメニューやモーダルウィンドウなどは開閉時のレイアウトシフトを最小限に抑えるよう設計しましょう。

Webフォントの読み込み方法を改善する

Webフォントの読み込みの遅延はテキストのレイアウトシフトを引き起こす可能性があります。これを防ぐにはWebフォントの読み込み方法を最適化する必要があります。

1つの方法はfont-display CSSプロパティを使って、Webフォントの読み込み中の表示方法を指定することです。font-display: swap;を使えば、Webフォントの読み込みが完了するまで、代替フォントを表示することができます。

また、Webフォントをプリロードすることで、読み込みの遅延を防ぐこともできます。HTMLのlinkタグにrel="preload"を指定し、Webフォントのファイルを事前に読み込むことで、表示時のレイアウトシフトを最小限に抑えられます。

CLS改善のベストプラクティス

CLSに関して、以下3つを簡単に解説していきます。

• レイアウトシフトが発生しやすい要素の特定と対策
• 開発段階からCLSを意識する
• サイトの更新時もCLSへの影響を確認する

レイアウトシフトが発生しやすい要素の特定と対策

CLSの改善にはレイアウトシフトが発生しやすい要素を特定し、優先的に対策を講じることが重要です。特に注意すべきは画像、広告、埋め込みコンテンツ、動的に挿入されるコンテンツなどです。

これらの要素についてはサイズの指定を徹底し、必要に応じて事前にスペースを確保するようにしましょう。また、Webフォントの読み込み方法も見直し、適切な最適化を行うことが求められます。

サイト全体を見渡し、レイアウトシフトが発生している箇所を特定することが第一歩です。そして、その原因を突き止め、適切な対策を講じることで、CLSのスコアを着実に改善していくことができるでしょう。

開発段階からCLSを意識する

CLSの改善はサイトの開発段階から意識することが重要です。設計や実装の段階で、レイアウトシフトを引き起こす可能性のある要素を特定し、対策を講じておくことが理想的です。

例えば、デザインのモックアップ作成時に、画像やコンテンツのサイズを明示的に指定しておくことは有効な方法の1つです。また、開発者はコーディングの段階で、適切なサイズ指定や動的コンテンツの配置に気を配る必要があります。

開発チーム全体でCLSの重要性を共有し、常にユーザーエクスペリエンスを意識した開発を心がけることが大切です。定期的にCLSのスコアを確認し、問題があれば速やかに改善策を講じる体制を整えておくことも重要でしょう。

サイトの更新時もCLSへの影響を確認する

CLSへの対策はサイトの公開後も継続的に行う必要があります。サイトのデザインや機能を更新する際はそれがCLSに与える影響を必ず確認しましょう。

新しいコンテンツを追加したり、既存のコンテンツを変更したりする場合はレイアウトシフトが発生していないかチェックが必要です。特に、大規模なサイトリニューアルの際はCLSへの影響を十分に検証し、必要な対策を講じることが重要です。

また、サイトの更新だけでなく、定期的にCLSのスコアをモニタリングすることも大切です。予期せぬレイアウトシフトが発生していないか、継続的にチェックする習慣を身につけましょう。CLSの改善は継続的な取り組みが必要なのです。

参考サイト

1. Google. https://blog.google/intl/ja-jp/

※上記コンテンツはAIで確認しておりますが、間違い等ある場合はコメントよりご連絡いただけますと幸いです。

「インターネット」に関するコラム一覧「インターネット」に関するニュース一覧