Cumulative Layout Shift（CLS）テスト
SEOptimerのCumulative Layout Shiftテストでは、実際の訪問者から収集したGoogle独自のフィールドデータを使用して、Googleの基準値に対するページのCLSを表示します。
数秒であらゆるサイトをSEO監査
+ あらゆる機能に対応する包括的なSEO／GEOツール
オンページSEO、ユーザビリティ、パフォーマンス、ソーシャル、リンクに関して、ウェブサイトを100項目以上チェックします。すべてのレポートにGEO分析も追加されました。SEOptimerでは、キーワード調査、順位追跡、バックリンク分析、サイト全体のクローリングも利用できます。
累積レイアウトシフトについて
累積レイアウトシフトとは？
累積レイアウトシフトは、ページの読み込み中にページ内の要素がどの程度移動するかを測定する指標です。訪問者の操作によらず、表示中の要素が新しい位置に移動するたびに、その移動がスコアとして記録され、スコアが累積されます。
最も身近な症状を持つ指標です。リンクに手を伸ばして押そうとしたところ、上部に広告や画像が読み込まれてページが下に押し下げられ、別のものを押してしまう、といった現象を表します。
他の2つとは異なり、時間では測定されません。画面のどの程度が、どれくらい移動したかを示す比率です。そのため数値は小さく、スコアが0.1でも、すでに目に見える移動が発生していることを意味します。
## 良好なCLSとは？
Googleは、実際のページ読み込みにおける75パーセンタイルで、0.1以下を良好、0.1～0.25を改善が必要、0.25超を不良として扱います。
訪問者自身が引き起こしたレイアウトシフトはカウントされません。アコーディオンを開いたりバナーを閉じたりすることでページが移動するのは正当な動作であり、操作から0.5秒以内に発生した移動のみが除外されます。これは、人がその移動を自分の操作によるものだと判断するおおよその時間枠です。
これは通常、3つの中で最も達成しやすいものです。LCPとINPではパフォーマンス改善が必要ですが、レイアウトシフトの大部分は、スペースをあらかじめ確保することで解消できます。これはアーキテクチャではなく、マークアップを変更する作業です。
レイアウトシフトの一般的な原因
- width属性とheight属性のない画像や動画。これらは読み込みが完了するまでスペースが確保されません。
- サイズが設定されていないコンテナに、広告や埋め込みコンテンツが後から挿入される。
- Webフォントがフォールバックフォントと異なるサイズで読み込まれ、テキストがリフローする。
- 既存のコンテンツの上に、バナー、通知、Cookieバーが挿入される。
- ページがすでに描画された後に、スクリプトによってコンテンツが挿入される。
これらすべてに共通するパターンは同じです。何かが遅れて表示され、そのために確保されていなかったスペースを占有します。その結果、それより下にあるすべての要素が押し下げられ、訪問者が触れようとしていたものが移動します。
改善方法
- すべての画像と動画に幅と高さを設定し、ブラウザがそのスペースをあらかじめ確保できるようにする。
- 広告枠や埋め込み要素には、空の状態でも固定の最小サイズを設定します。
- 重要なフォントを事前に読み込み、フォールバックフォントのメトリクスを一致させて、切り替え時にレイアウトが再配置されないようにします。
- バナーや通知は既存のコンテンツの下に挿入するか、コンテンツを押し下げるのではなくオーバーレイ表示します。
- スクリプトが後から追加する要素のために、あらかじめスペースを確保します。
- モバイルで確認しましょう。狭いカラムでは、小さなずれが大きなレイアウトシフトにつながります。
このツールがチェックする項目
CLSテストでは、そのページに関するGoogleのフィールドデータ（Chromeを使用する実際の訪問者から収集した測定値）を読み取り、上記のしきい値に対してどの位置にあるかを表示します。
結果が表示されない場合、そのページについてGoogleがレポートするにはトラフィックが不十分です。それまでの間、手動で確実に確認できる指標はレイアウトシフトです。スマートフォンで低速な接続環境を使ってページを読み込み、どの要素が移動するかを確認してください。
他の2つの指標、または3つすべてについては、Core Web Vitalsテストを使用してください。
次に行うこと
レイアウトシフトの原因の多くは、画像や遅れて読み込まれるアセットです。ページ上の画像の最適化、ウェブページのファイルサイズチェックで確認できるページの容量、モバイル対応テストで確認できるスマートフォン上での動作を確認してください。
55種類以上のツールを備えた包括的なSEOツールボックス
タイトル、メタディスクリプション、見出し、スキーマ、コアウェブバイタル、SSL、robots.txtをチェック。AIライティングツールを使って、メタタグ、サイトマップ、.htaccessルールを生成し、CSS、JS、HTMLを圧縮、コンテンツの草案を即座に無料で作成できます。
関連記事
もっと見る
コアウェブバイタル：それは何か？SEOにとってなぜ重要なのか？
あなたのウェブページをシームレスなユーザー体験のために最適化するべきです。しかし、サイト上のユーザー体験の質をどのように測定できますか？それがCore Web Vitalsの出番です。 Core Web Vitalsは、ユーザーがウェブページをどのように体験する...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
ウェブページのサイズ - なぜ重要なのか？ そして、どのように最適化するのか？
ウェブページのサイズとは何ですか？ SEOの世界における用語「webpage size」は、特定のウェブページのダウンロードされたファイルサイズを指します。 ウェブページのサイズは、ページを構成するすべてのファイルで構成されています。典型的なウェブ...