この記事はAhrefs公式ブログの日本語訳です。
原文：What Is Cumulative Layout Shift (CLS) & How To Improve It
（著者：Patrick Stox / 原文の最終更新日：June 14, 2023）
※フルスピード註：この記事は2023年6月14日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
累積レイアウト シフト (CLS) は、ページの読み込み時の視覚的な安定性を測定します。これは、要素の大きさと要素の移動距離を調べることによって行われます。これは、Google がページ エクスペリエンスを測定するために使用する 3 つのコア Web Vitals 指標の 1 つです。
CLS は、最も多くのシフトが発生する 5 秒のウィンドウ中に計算されます。
注：ユーザーのアクション後など、予想されるレイアウトの変更は問題なく、予想通りです。ユーザー インタラクションから 500 ミリ秒以内のシフトは計算から除外されます。
測定方法は次のとおりです。
レイアウト シフト スコア = 衝撃率 x 距離率
より分かりやすく言うと、次のようになります。
レイアウト シフト スコア = 変更されたビューポートの % * 不安定な要素が移動した距離
CLS が重要な理由は、移動するページ上で何かをクリックしようとして、意図しないものをクリックしてしまうと煩わしいからです。
それはいつも私に起こります。あるものをクリックすると、突然広告をクリックするようになり、同じ Web サイトにさえアクセスしていなくなりました。ユーザーとして、それはイライラします
https://ahrefs.com/blog/wp-content/uploads/2023/06/image10.gif
CLS の一般的な原因は次のとおりです。
- 寸法のない画像。
- サイズのない広告、埋め込み、iframe。
- JavaScript を使用してコンテンツを挿入します。
- 読み込みの後半でフォントまたはスタイルを適用します。
CLS スコアがどうあるべきか、そしてそれを改善する方法を見てみましょう。
CLS の良いスコアとは何ですか?
良好な CLS スコアは 0.1 以下であり、Chrome ユーザー エクスペリエンス レポート (CrUX) データに基づいている必要があります。これは、サイトを訪問し、この情報の共有をオプトインしている Chrome の実際のユーザーからのデータです。 CLS スコアが 0.1 以下になるには、ページ読み込みの 75% が必要です。
ページは次のいずれかのバケットに分類される場合があります。
- 良い: <=0.1
- 改善が必要: >0.1 かつ <=0.25
- 悪い: >0.25
CLSデータ
2023 年 4 月の時点で、サイトの 72.8% が良好な CLS スコアを持っています。これはサイト全体の平均です。前述したように、良好と分類されるためには、ページ読み込みの 75% で CLS スコアが 0.1 以下である必要があります。
CLS は、Google が Web サイトの高速化を推進して以来、最も改良された Core Web Vital です。
Site Auditデータを使用してページ レベルで調査を実行したところ、CLS はデスクトップとモバイルで類似していることがわかりました。
また、多くのサイトが CLS、特に低速接続で苦労していることにも気付きました。
CLS は、元のデータよりもページレベルのデータで悪化します。他の多くのページのスコアが不合格のまま放置されている一方で、トラフィックが増えるメイン ページを改善している可能性があります。
CLSの測定方法
CLS を測定するには、フィールド データとラボ データというさまざまな方法があります。
フィールド データは、データの共有を選択した Chrome の実際のユーザーからのデータであるChrome ユーザー エクスペリエンス レポート (CrUX)から取得されます。これにより、実際の CLS パフォーマンスについての最良のアイデアが得られます。これは、Google によるCore Web Vitalsの実際の測定対象でもあります。
実験室データは、テストを再現可能にするために同じ条件でのテストに基づいています。 Google はこれを Core Web Vitals には使用しません。ただし、CrUX/フィールド データは 28 日間の移動平均であるため、変更の影響を確認するのに時間がかかるため、テストには役立ちます。
CLS を測定する最適なツールは、必要なデータのタイプ (研究室/現場)、および 1 つの URL に対して必要か、複数の URL に対して必要かによって異なります。
単一 URL の CLS の測定
Pagespeed Insights は、他の方法では CrUX データセットでクエリできないページレベルのフィールド データを取得します。また、Google Lighthouseに基づいてラボ テストを実行し、元のデータを提供するので、ページのパフォーマンスをサイト全体と比較できます。
多数の URL またはサイト全体の CLS を測定する
Google Search Console で CrUX データを取得でき、良好、改善が必要、不良のカテゴリに分類されます。
問題の 1 つをクリックすると、影響を受けるページ グループの内訳が表示されます。グループは、同じテンプレートを使用する可能性が高い、同様の値を持つページです。テンプレートで一度変更を加えると、その変更はグループ内のページ全体で修正されます。
ラボ データとフィールド データの両方を大規模に取得したい場合、それを取得する唯一の方法は PageSpeed Insights API を使用することです。 Ahrefs のSite Auditを使用して簡単に接続し、パフォーマンスの詳細を示すレポートを取得できます。これは、Ahrefs ウェブマスター ツール(AWT) アカウントを持つ検証済みサイトの場合は無料です。
表示される Core Web Vitals データは、セットアップ中にクロール用に選択したユーザー エージェントによって決定されることに注意してください。モバイルからクロールする場合は、API からモバイル CWV 値を取得します。
CLSを改善する方法
PageSpeed Insightsでは、「診断」セクションで CLS を選択すると、「大きなレイアウトの変更を避ける」など、関連する問題がすべて表示されます。これらはあなたが解決したい問題です。
ほとんどの場合、CLS を最適化するには、画像、フォント、または場合によっては挿入されたコンテンツに関連する問題に取り組むことになります。それぞれのケースを見てみましょう。
1. 画像、ビデオ、iframe 用のスペースを予約する
画像の場合、シフトが発生せずに画像がそのスペースを埋めるようにスペースを予約する必要があります。これは、次のように <img> タグ内で画像の高さと幅を指定して画像の高さと幅を設定することを意味します。
<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />
レスポンシブ画像の場合は、次のような srcset を使用する必要があります。
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons" />
ビデオや iframe などに必要なスペースも確保しておきます。広告などの動的コンテンツの場合は、必要な最大スペースを確保する必要があります。
アスペクト比と呼ばれる比較的新しい CSS プロパティもあります。これを使用すると、画面サイズに基づいて動的な幅を設定でき、ブラウザーが適切な高さを計算します。
2.フォントの最適化
フォントの場合、目標は、フォントをできるだけ早く画面上に表示し、別のフォントと交換しないことです。フォントがロードまたは変更されると、Flash of Invisible Text (FOIT) や Flash of Unstyled Text (FOUT) のような顕著な変化が発生します。
システムフォントを使用できる場合は、そうしてください。ロードするものは何もないので、シフトを引き起こす遅延や変更はありません。
カスタム フォントを使用する必要がある場合、CLS を最小限に抑えるための現在の最良の方法は、 <link rel=”preload”> (可能な限り早くフォントを取得しようとする) と font-display:Optional (これはフォントの読み込みに少し時間がかかります)。
フォントが間に合わない場合、最初のページ読み込みではデフォルトのフォントが表示されます。カスタム フォントはキャッシュされ、その後のページ読み込み時に表示されます。
3. レイアウトの変更を引き起こさないアニメーションを使用する
「box-shadow」、「box-sizing」、「top」、「left」など、アニメーション化すべきではない、レイアウトのシフトを引き起こすいくつかの CSS プロパティ値があります。代わりに、「変形」アニメーションを使用して、レイアウトの変更を避けることをお勧めします。
4. ページが bfcache に適していることを確認してください
バック/フォワード キャッシュは、ページをブラウザー キャッシュに保持します。すでにロードされているページを即座にロードできるため、レイアウトの変更は発生しません。
この 1 つの最適化にはかなりの量があります。主な戦略を以下に示します。詳細については、こちらをご覧ください。
主な戦略:
- アンロードイベントは絶対に使用しないでください
- Cache-Control の使用を最小限に抑える: no-store
- bfcache 復元後に古いデータまたは機密データを更新する
- window.opener 参照を避ける
- ユーザーが移動する前に、開いている接続を常に閉じます。
- ページがキャッシュ可能であることを確認するテスト
参考文献
- レイアウト/リフローを強制するもの–ポール・アイリッシュ
- 累積的なレイアウト シフトの最適化– web.dev
- レイアウト変更のデバッグ– web.dev
- 累積的なレイアウト シフトを理解する–アニー サリバン (ビデオ)
- Web フォントによって引き起こされるレイアウトの変化を回避する方法– Simon Hearne
- Web ツールにおける進化する累積的なレイアウト シフト
まとめ
CLS が導入されて以来、私たちはこの問題を解決する bfcache や CSS アスペクト比などの革新的な技術をすでに目にしてきました。将来的には、レイアウトの変更を防ぐためのさらなるイノベーションや新しい方法が登場すると期待しています。
著者プロフィール
ご質問がございましたら、Twitter でメッセージをお送りください。
Patrick Stox
Patrick Stox は、Ahrefs のプロダクト アドバイザー、テクニカル SEO、およびブランド アンバサダーです。彼は、2021 年の Web 年鑑の SEO の章の筆頭著者であり、2022 年の SEO の章の査読者でもありました。また、Ahrefs の『初心者のための SEO 本』の共著者であり、『The Art of SEO 第 4 版』のテクニカル レビューの編集者でもありました。彼は、Raleigh SEO Meetup (米国で最も成功した SEO Meetup)、Beer and SEO Meetup、Raleigh SEO Conference などのいくつかのグループの主催者であり、Technical SEO Slack グループを運営し、/r/TechSEO のモデレーターでもあります。レディット。
コメント