【CLS】コミュレイティブ　レイアウトシフト ・Cumulative Layout Shiftの「ズレ」とは何か？

Cumulative Layout Shift (CLS) 指標の課題は、どの要素が、いつ、どれだけページが移動したかを理解することです。

SpeedCurveには、CLSスコアのデバッグに役立つ視覚化機能があります。これは各レイアウトのシフトと、各シフトが最終的なCLSにどのように加算されるかを示します。

各レイアウトシフトは、シフトの直前と直後にフィルムストリップのフレームを表示します。

移動した要素の周りに赤いボックスを描画して、移動原因となった要素を強調して表示します。各シフトの 「レイアウトのシフト・スコア|Layout Shift Score|Planning」 は、そのシフトの影響とCLSスコアへの加算方法を理解することができます。

各レイアウトシフトを視覚化すると、ページのレンダリングに関する問題を特定できます。ここでは、レイアウトのシフトを分析する際に観察した問題を紹介します。

シフトする要素のサイズが重要

フィルムストリップやページの読み込みのビデオだけを見ると、レイアウトのずれを見つけるのは難しいでしょう。以下の例ですが、The Irish Timesのメインコンテンツは少ししか移動しませんが、サイズが大きいため「レイアウトシフトスコア」が非常に高く、Cumulativeスコアに0.114が追加されます。

下のAmazonのページでは、画像カルーセルを使用して、ページ全体で多くのプロモーションをスライドさせています。

ユーザーエクスペリエンスは良好ですが、レイアウトシフト分析では要素がページ上でどのように移動するかのみを調べるため、CLSとしては悪いスコアとなりあす。 CSSでの変換を使用してコンテンツをアニメーション化すれば、CLSスコアの低下を回避できます。

Webフォントと不透明度の変更によってもCLS問題が発生する可能性があります。

Webフォントと不透明度の変更は、レイアウトのシフトの問題が発生する一般的なものです。Webフォントがロードされるのを待っている間はコンテンツを非表示にしないのは良い習慣ですが、Webフォントがレンダリング時に要素を移動すると、CLSスコアに悪影響を及ぼす可能性があります。

レイアウト変更がDOMに反映されないように、既定のフォントと描画されるWebフォントのサイズを一致させるか、最終的に描画されるテキスト用の領域を確保することをお勧めします。また、CLSでは不透明度の変更も考慮されないため、不透明度「0」の要素を追加して移動すると、CLSスコアに影響します。

ポイント：レイアウト変更を視覚化すれば、優れたUX向上を図れます。

ページのレンダリング中にレイアウト変更を1つ1つ確認すれば、ページがどのように構成されているかを理解できます。移動する要素を強調表示するのに非常に役立ち、ユーザーの操作性の低下やCLSスコアの低下につながります。テストページでレイアウトのシフトを確認してください。Addyは、ページのシフトを最小限に抑えるためにページを最適化する方法を紹介しています。

※この記事はSpeedCurve社の英文情報を元に、内容を分かりやすく編集、翻訳した記事です。

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.