コラム

webサイトにアクセスして読みたい記事のリンクをクリックしようとしたところ、
レイアウトが突然移動して広告が表示され、読みたい記事をクリックする代わりに、
役に立たない広告をクリックしたご経験はありませんか？

ページ上のその突然の動きは、レイアウトシフトと呼ばれます。

そのレイアウトシフトを防ぐための最適化方法をご紹介したいと思います。

web開発者コミュニティがユーザーエクスペリエンスに重点を置いていることを
考えると、アクセス数がたくさんあるWEBサイトのユーザーエクスペリエンスにとって
邪魔な広告を詰め込んでいることがよくみられます。

Googleにとって、ユーザーエクスペリエンスは最優先な重要事項です。

そのため、Googleはレイアウトシフトをページエクスペリエンスの指標の1つにしました。
これらの指標は、ユーザーエクスペリエンスの技術的側面を捉えて定量化しようとします。

■CLS（Cumulative Layout Shift）とは

CLS スコアとは、ユーザーの操作によって起こされたものではない
全てのレイアウトシフトを合計することによって計算されるコアWebバイタルです。
CLSは、ビューポートの比率と、移動した要素の移動距離を測定します。
これは、webサイトの視覚的な安定性を測定します。

ロード中に画面上で何かが動き回っているのをよくみますが、それはどのくらいの頻度で起こりますか？ 読み込みの遅い広告がその場所に表示されたときにボタンをクリックしようとすることほどイライラすることはありません。

■CLSスコアが良い条件

完全に静的なページのCLSスコアは0まで低くすることができ、
ページで発生するレイアウトシフトが多いほど高くなります。
スコアが低いほど、レイアウトはより安定しています。
Googleのパフォーマンスツールで使用される公式のCLSスコアは次のとおりです。

良好– CLSが0.1未満、
改善が必要– CLS 0.1〜0.25、
悪い–0.25を超えるCLS。
CLSスコアを0.1未満に保つことをお勧めします。

CLSスコアはSEOに影響

CLSは、2021年6月にGoogleのページエクスペリエンスアップデートが公開される
重要なランキング要素となります。
つまり、CLSスコア（LCPおよびFIDメトリックと共に）がSEOに影響を与えます。
非常に大きな要因となる可能性もありますが、CLSスコア（および他のWeb Vitals）は、
Googleや他の検索エンジンからのトラフィックに反映される場合があります。

さらに、CLSはユーザーの行動指標と相関関係がある可能性があります。

Googleは、ランキングの目的で滞留時間やバウンス率などの指標を
使用していないと主張していますが、
Bingなどの他の検索エンジンは、ランキングアルゴリズムで
これらの指標を使用することを認めています。

これらの理由から、CLSの最適化はSEO戦略において間違いなく優先される事項になる可能性があります。

CLSについて

重要なことは、CLSスコアの数値が高いということは、
ユーザーがページを閲覧するのに苦労していることを意味します。
複数のレイアウトシフトの悪影響は、軽度の煩わしさから、
誤って間違った製品を購入することさえあります。
それはそのサイトやサービスに悪い評価をもたらし、
ユーザーがサイトにいくことを思いとどまらせ、
新しいクライアントが閲覧する機会を減少させる可能性があります。

CLSの計算方法

累積レイアウトシフトの計算に使用される要素は、ビューポートの高さ、
移動距離、影響領域です。
CLSには、影響の割合と距離の割合の2つの要素があります。

Impact Fraction
影響の割合を計算するには、最初に影響領域を計算する必要があります。

影響領域は、レイアウトシフトの影響を受ける領域を定義します。
Googleは影響を受けるすべての要素を特定し、元の領域とシフトされた
バージョンを組み合わせて、影響を受ける領域を定義します。

インパクト領域は通常長方形になるのですが、水平方向と垂直方向の両方で
複数のレイアウトシフトがある場合は、より複雑な形状になる可能性があります。
影響の割合を計算するには、影響領域の領域をビューポートの領域＝下に
スクロールせずに画面に表示されるページの一部で除算します。