CLS(Cumulative Layout Shift )を視覚化することで、この指標の意味を理解しよう。

Googleの新しいCumulative Layout Shift (CLS) 指標の大きな課題の一つは、どの要素が、いつ、どれだけページを移動したかを理解することです。そこで、CLSスコアのデバッグに役立つように、SpeedCurveに新しい視覚化を追加しました。これは、各レイアウトのシフトと、各シフトが最終的なCLSにどのように加算されるかを示します。

各レイアウトシフトについですが、シフトの直前と直後にフィルムストリップフレームを表示します。次に、移動した要素の周りに赤いボックスを描画し、移動の原因となった要素を正確に強調表示します。各シフトの 「≪レイアウトのシフト・スコア|Layout Shift Score|Planning≫」 も、そのシフトの影響と累積スコアへの加算方法を理解するのに役立ちます。

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

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

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

以下のAmazonホームページでは、画像カルーセルを使用して、ページ全体で多数のプロモーションをスライドさせています。ユーザーエクスペリエンスは良好ですが、レイアウトシフト分析は要素がページ上でどのように移動するかのみを調べるため、CLSはこれに悪いスコアを与えます。 CSS変換を使用して要素をアニメーション化することにより、CLSスコアの低下を回避できます。

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

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

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

ポイント:レイアウトの変更を視覚化、可視化することで、より優れたユーザエクスペリエンス向上を図れます。

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

 

 

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

 

 

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

 

 

 

 

>サイトが重い、ファーストビューが速く表示されないこんなお悩み、ご相談ください。

サイトが重い、ファーストビューが速く表示されないこんなお悩み、ご相談ください。