Cumulative Layout Shift（CLS）は、ウェブサイトのユーザーエクスペリエンスにおいて非常に重要な指標であり、特にページの読み込み中にレイアウトの変更がどれだけ発生するかを示すものです。CLSは、ウェブページの視覚的な安定性を測定するためにGoogleが導入したCore Web Vitalsの一部としても認識されています。この記事では、CLSがどのように計測され、なぜ重要なのか、そしてそれを改善するための具体的な方法について、包括的に説明します。
CLSとは何か？
Cumulative Layout Shift（累積的レイアウトシフト）は、ページの要素が予期しない位置に移動する現象を測定する指標です。たとえば、ユーザーがページを読み込み中に、ボタン、画像、テキストなどのコンテンツが動くと、それがCLSとして記録されます。これにより、ユーザーはページを操作する際に誤ってクリックしたり、スクロールが不便になったりすることがあります。
CLSは0から1の範囲で評価され、0に近いほど視覚的に安定しているページ、1に近いほど不安定であることを示します。Googleは、良好なユーザーエクスペリエンスを提供するために、CLSスコアが0.1未満であることを推奨しています。
CLSの計測方法
CLSは、ページの読み込み中に発生したレイアウトの変更がどれだけ累積的に起こったかを計算します。この計算には、ページ内の各要素の移動量を測定する必要があります。具体的には、次の2つの要素が関与します：
- シフトした領域の面積（移動した要素のサイズ）
- シフトの距離（移動した距離）
これらの情報を基に、CLSスコアが計算されます。たとえば、ページ内で大きな画像が読み込まれる前にテキストが表示され、その後画像が読み込まれると、画像が表示されるまでテキストが移動してしまう場合などがCLSの原因となります。
CLSが重要な理由
-
ユーザーエクスペリエンスへの影響
ページ内で予期しない移動が発生すると、ユーザーは混乱し、誤ってクリックしたり、ページ操作に対する信頼感が低下する可能性があります。特にモバイルデバイスでは、これが問題となることが多いです。たとえば、ユーザーがフォームを入力している最中にボタンが動くと、送信ボタンを押すつもりが他のリンクを押してしまうことがあります。 -
SEOへの影響
Googleは、ウェブサイトのユーザーエクスペリエンスをSEOランキングの一部として考慮しています。CLSが高いページは、Googleの検索ランキングで不利に働くことがあります。ユーザーの滞在時間や直帰率にも影響を与える可能性があり、これらが間接的にSEOに影響を及ぼすことになります。 -
ウェブサイトの信頼性向上
視覚的に安定したページは、ユーザーにとって信頼感を与えます。予測可能なレイアウトと快適な操作感を提供することで、ユーザーが再訪問しやすくなるため、コンバージョン率の向上にも繋がります。
CLSの改善方法
CLSを改善するためには、以下の方法を実施することが有効です。
1. 画像と動画に固定サイズを指定する
画像や動画がページに読み込まれる前にそのサイズが決まっていないと、ページのレイアウトが読み込み後にシフトします。これを防ぐためには、HTMLタグでwidthとheight属性を指定して、コンテンツのサイズを最初に決めておくことが重要です。
2. フォントの遅延読み込みを避ける
フォントが遅れて読み込まれると、テキストが表示される前にフォントのスタイルが変わることがあります。このような場合、最初にフォントが読み込まれたときにレイアウトがシフトするため、フォントの遅延読み込みを避けるか、フォントのスタイルを指定してレイアウトの変更を最小限に抑える必要があります。
このプロパティを使用すると、フォントが遅延読み込みされても、予め指定されたフォントが最初に表示され、その後にカスタムフォントが読み込まれるようになります。
3. 非同期でJavaScriptを読み込む
JavaScriptがページの読み込みをブロックすると、レイアウトシフトが発生することがあります。JavaScriptはできるだけ非同期に読み込むようにし、必要な場合にのみ実行することが推奨されます。これにより、ページのレンダリングがスムーズになり、レイアウトの移動を減少させることができます。
4. 動的コンテンツの読み込み
ページ内で動的にコンテンツが追加される場合、そのコンテンツのサイズを事前に確保しておくことが重要です。たとえば、広告やポップアップウィンドウなどのコンテンツが遅れて読み込まれることが原因でレイアウトシフトが起こることが多いです。これを回避するためには、これらの要素に固定サイズを設定するか、事前に予測できるサイズでスペースを確保することが必要です。
5. レイアウトの変更を最小限に抑える
ページがロードされる際、コンテンツが頻繁に移動することを避けるために、事前にレイアウトを調整することが求められます。特に、コンテンツが遅れて表示される場合や、JavaScriptで動的にコンテンツを追加する場合には、シフトが最小限に抑えられるように工夫しましょう。
6. 使用していないリソースの削減
不要なCSSやJavaScriptが読み込まれると、ページの描画が遅延し、予期しないレイアウトシフトが発生する可能性があります。不要なリソースを削減し、必要なリソースのみをロードするように最適化することが、CLSの改善につながります。
まとめ
CLSは、ユーザーエクスペリエンスを向上させるために非常に重要な指標です。予期しないレイアウトシフトを減らすことで、ページの視覚的安定性を保ち、ユーザーにとって快適な体験を提供できます。CLSの改善には、画像やフォントの管理、非同期JavaScriptの使用、動的コンテンツの読み込み最適化など、さまざまなアプローチがあります。これらの手法を実践することで、ウェブサイトのパフォーマンスを大幅に向上させ、SEO効果も得られるでしょう。