SHIRO DXはビジネスの効率化や
売上UPに繋がるチップスをご紹介しています

Webサイトのレイアウトが突然変化すると、ユーザーは戸惑います。

ストレスを感じてしまいます。

CLS（Cumulative Layout Shift）は、このレイアウトの突然の変化を数値化した指標です。

CLSが高いサイトは、ユーザー体験が悪化します。

Googleの評価も下がる可能性があります。

今回の記事では、

• CLSとは何か
• なぜ改善する必要があるのか
• 具体的な改善方法

を解説します。

CLSを改善することで、ユーザーに快適な閲覧体験を提供しましょう。

SEO効果も向上させることができます。

CLSとは？

CLS（Cumulative Layout Shift）は、ページの読み込み中に、要素の位置が意図せず変化する度合いを示す指標です。

例えば、

画像が読み込まれる際に、他の要素が下に押し下げられてしまうような状況が考えられます。

このようなレイアウトのシフトは、ユーザーに視覚的なストレスを与えます。

操作性を低下させる原因となります。

なぜCLSを改善する必要があるのか？

CLSを改善する理由は以下の通りです。

ユーザー体験の向上

CLSが低いサイトは、レイアウトが安定しています。

ユーザーは快適にページを閲覧できます。

コンバージョン率の向上

ユーザーがストレスなくサイトを利用できることで、

• 購入
• 問い合わせ

など、目的の行動に移りやすくなります。

Google検索での評価向上

Googleは、コアウェブバイタルの一つとしてCLSを重視しています。

CLSが高いサイトは、検索順位が下がる可能性があります。

あコアウェブバイタルとは？Google検索で上位表示される高速サイトを作るための3つの指標を徹底解説

CLSを計測する方法

CLSは、以下のツールで計測できます。

Google Search Console

サイト全体のCLSの平均値を確認できます。

PageSpeed Insights

特定のページのCLSを詳細に分析できます。

Chrome DevTools

開発者ツールで、リアルタイムにCLSを計測できます。

CLS改善の具体的な方法

画像の最適化

• 画像のサイズを指定する: <img>タグにwidth属性とheight属性を指定することで、ブラウザがレイアウトを事前に計算し、レイアウトシフトを防ぐことができます。
• 画像の遅延読み込み: 画面外にある画像の読み込みを遅らせることで、初期表示時のレイアウトシフトを減らすことができます。
• レスポンシブ画像の利用: 異なるデバイスに合わせて画像サイズを調整することで、画像の読み込みによるレイアウトシフトを防ぐことができます。

フォントの最適化

• Webフォントの読み込みを最適化する: Webフォントの読み込みが完了する前に、フォールバックフォントを表示することで、テキストの表示が遅れてレイアウトがシフトするのを防ぎます。
• フォントのフォールバックを設定する: Webフォントが読み込めなかった場合に、代替となるフォントを指定します。

動的なコンテンツの最適化

• JavaScriptによるDOM操作を最小限にする: JavaScriptでDOMを頻繁に操作すると、レイアウトが不安定になる可能性があります。DOM操作を最小限に抑えるように心がけましょう。
• CSSアニメーションを最適化する: CSSアニメーションによってレイアウトがシフトする場合、アニメーションのタイミングや効果を調整しましょう。

サーバー側のレンダリング

• サーバーサイドレンダリング: 静的なHTMLを生成することで、クライアント側のJavaScriptによるレンダリングを減らし、レイアウトの安定性を高めることができます。

その他

• 広告の最適化: 広告のサイズを固定し、表示位置をあらかじめ決めておくことで、広告によるレイアウトシフトを防ぎます。
• サードパーティスクリプトの最適化: 外部スクリプトの読み込みを遅延させたり、数を減らしたりしましょう。

まとめ

CLS改善は、ユーザー体験向上とSEO対策の両方にとって重要な要素です。

この記事で紹介した方法を実践してください。

あなたのWebサイトのレイアウトを安定させましょう。