累積レイアウトシフト：GoogleCLSスコアを改善
公開: 2022-05-09注文しようとするとチェックアウトボタンが消えるという状況になったことはありますか？
はい！ イライラします。
真実は、それはあまりにも頻繁に、そして私たちの多くで起こります。
ありがたいことに、いつものように、Googleはユーザーエクスペリエンスを何よりも優先しています。
これが、2021年以降、コアWebバイタルの一部として3つの新しいパフォーマンスメトリックをロールする理由です。
Core Web Vitalsは、ページの読み込み速度、双方向性、視覚的な安定性を測定するように設計されています。
これらを表す3つのメトリック：
1.最大のコンテンツフルペイント（LCP）
2.最初の入力遅延（FIP）
3.累積レイアウトシフト（CLS）
ユーザーとウェブマスター（SEO）の両方の観点からCLSを理解しましょう。
累積レイアウトシフトとは何ですか？
累積レイアウトシフト（CLS）は、Webサイトの視覚的な安定性を表します。
これは、ページ上の重要でないレイアウトシフトの量を測定します。
予期しないレイアウトの変更は、ユーザー入力なしでWebページが移動した結果です。
Google CLSは、ページ要素の予期しない動きがユーザーエクスペリエンスに影響を与える頻度を測定することで、問題を解決するための一種のインジケーター（信号）です。
レイアウトのシフトは、表示されている要素の位置がレンダリングされたフレームから次のフレームに変わるときにいつでも発生する可能性があります。
一般的な意味を理解し、簡単な言葉で「累積レイアウトシフト」を定義してみましょう。
累積は量の増加です。
レイアウトはフレームです
シフトは位置の変化です
簡単に言えば、累積レイアウトシフトは、Webサイトのデザイン位置におけるすべての個々のフレーム変更の合計です。
web.devから供給された画像
標準のCLSスコアは0.1未満である必要があります。
同じことを測定するための適切なしきい値は、モバイルデバイスとデスクトップデバイス全体のページ読み込みの75パーセンタイルです。
上の画像では、 Googleによると次のことが明らかです。
1. CLSスコアが0.1未満の場合、それは良いシグナルです。 これは、サイトでレイアウトの変更に問題がないことを意味します。
2. CLSスコアが0.1〜0.25の場合、サイトのビジュアルレイアウトをある程度改善する必要があることを意味します。
3. CLSスコアが0.25を超える場合は、信号が不十分です。これは、視覚要素の動きが非常に頻繁に発生していることも意味します。
累積レイアウトシフトはどのように計算されますか？
Googleは、予期しないレイアウトシフトごとに、影響の割合と距離の割合を計算することにより、ページのCLSを計算します。
CLSの影響率
これは、不安定な要素が2つのフレーム間のビューポート領域で占めるスペースの量を測定します。
CLSの影響率を計算する式
レイアウトシフトスコアを計算するには、影響率が必要です。
CLSの影響率を計算する方法は？
グラフィカルな表現は、影響の割合をよりよく理解するのに役立ちます。
影響の割合=[影響領域の領域] /[ビューポートの領域]影響の割合=[330x 490 ] / [375x667]影響の割合=[161700]/[250125]影響の割合= 0.645CLSの距離分数
これは、ページ要素が元の位置から最終的な位置に移動したスペースの量の尺度であり、基本的にレイアウトがシフトします。
過度のペナルティケースを回避するには、Distance Fractionを導入することにより、大きな要素を少しずつシフトします。
CLSの距離分数を計算する式
CLSの距離分数を計算する方法は？
グラフィカルな表現は、距離の割合をよりよく理解するのに役立ちます。
距離の割合=[Max。 移動距離]/[ビューポートの高さ]距離の割合=[120]/[667]距離の割合=0.179
GoogleCLSスコアを計算する式
累積レイアウトスコアは、衝撃の割合に距離の割合を掛けて計算されます。
累積レイアウトシフト（CLS）=影響の割合x距離の割合 CLS = 0.645 x 0.179 CLS=0.1154 。
CLSスコアは、影響と距離の割合が増加するにつれて上昇し続けます。
簡単な例で累積レイアウトシフト。
あなたはあるサイトを訪れ、何か面白いものを見ました。
リンクをクリックしてください。
しかし、リンクをクリックしようとしたとき、Webページ内で0.5インチ下に移動し、そのすぐ上に配置された広告をクリックすることになります。
出典：nitropack.io
不公平に聞こえますよね？
予想外のレイアウト変更です。
これは、元のWebページに戻らなければならない場所から不要なランディングページにリダイレクトされることを意味するだけです。
予想されるレイアウトシフトとも呼ばれるものがあります。
Webページ上の何かをクリックすると発生し、ページの現在のレイアウトが変更されます。
たとえば、特定の情報を探しているブログにアクセスします。
検索バーにトピック名を入力するとすぐに、特定のブログ投稿が取得され、必要な情報が見つかるか、トピックに関連するいくつかのブログ投稿が表示されます。
出典：nitropack.io
これはWebページから予想される結果であり、予想されるレイアウトの変更と見なすことができます。
CLSの問題の原因は何ですか？
検索エンジンの巨人であるグーグルによると、累積レイアウトシフトには5つの理由が考えられます。
寸法のない画像と動画
画像や動画の幅と高さを常に指定することをお勧めします。
また、CSSアスペクト比ボックスを利用して、画像の読み込み中にブラウザがWebページに適切な量のスペースを割り当てることができるようにすることもできます。
寸法のない広告、埋め込み、iframe
広告サイズは、高いCTRを通じて収益を増やすことができます。
ただし、これにより、コンテンツがページに表示されるため、ユーザーエクスペリエンスの品質が低下する可能性があります。
このレイアウトのずれは、広告スロットのスペースを予約するか、広告スロットに可能な最大サイズを予約するか、履歴データに基づいて広告スロットの可能な限り最適なサイズを選択することで、ずれをなくすことで軽減できます。
動的に挿入されたコンテンツ
ユーザーの操作に応じる場合を除いて、既存のコンテンツの上に新しいコンテンツを挿入することは避けてください。
これにより、画像やテキストが予期せず移動するのではなく、発生するレイアウトの変化が常に予想されるようになります。
FOIT/FOUTの原因となるWebフォント
不要なレイアウトシフトを防ぐために、auto、swap、block、fallback、optionalなどのカスタムフォントでfont：display値を使用してみてください。
レイアウトシフトがないことを確認するには、link rel = preloadとともにfont：displayを使用します。
そのフォントを使用する要素は、フォントアセットが完全にダウンロードされるまで非表示になります。これは、FOIT（非表示テキストのフラッシュ）と呼ばれます。
アニメーションソース： malthemilthers.com
カスタムフォントがロードされるまでのフォントスタックでのフォールバックフォントの表示は、FOUT（スタイルなしテキストのフラッシュ）と呼ばれます。
DOMを更新する前にネットワーク応答を待機するアクション
レイアウトの変更をトリガーするプロパティのアニメーションには、常に「変換」アニメーションを使用してください。
Google CLSスコアは広告を通じてどのように影響を受けますか？
CLSの原因となる広告を処理するには、広告が表示される要素のスタイルを設定する必要があります。
したがって、div、WordPressの画像または動画の分割、または特定の高さと幅の測定値を持つWebサイト要素のスタイルを設定すると、広告は上記のサイズ内にのみ制限されます。
広告を含む要素に広告が表示されない場合は、代替バナー広告またはプレースホルダー画像が空きスペースを埋めることができるように設定できます。
または、特定のレイアウトでは、ページの右または左のガターの列の上部にある行全体を広告で埋めることができます。
ページが表示されない場合、シフトは発生せず、モバイルでもデスクトップでも違いはありません。
ただし、テーマのレイアウトによって異なり、広告枠に問題がある場合はテストする必要があることに注意してください。
Web開発中にCLSはどのようにスライドできますか？
GoogleCLSは開発段階をすり抜けることができます。
これが起こり得ることです。
Webページをレンダリングするために必要なアセットの多くは、ブラウザのキャッシュにロードされます。
次回開発者が開発中のページにアクセスしたとき、ページ要素はすでにダウンロードされているため、レイアウトの変更に気付くことはありません。
したがって、フィールドまたはラボで測定することをお勧めします。
累積レイアウトシフトテスト
累積レイアウトシフトパフォーマンスWebサイトのメトリックは、次のいずれかの方法で測定できます。
フィールドツール
フィールドで：実際にページを操作している実際のユーザー。 次のフィールドツールを使用して測定できます。
Chromeユーザーエクスペリエンスレポート
これは、実際のChromeユーザーがウェブ上で人気のある目的地をどのように体験するかについてのユーザーエクスペリエンス指標を提供します。
PageSpeed Insights
このツールは、Webページのコンテンツを分析し、そのページを以前よりも高速にするための提案を生成します。
検索コンソール（コアWeb Vitalsレポート）
検索コンソールは、実際の使用状況データ（フィールドデータと呼ばれることもあります）に基づいてページのパフォーマンスを表示します。
ラボツール
ラボで：ツールを使用して制御された環境でページの読み込みをシミュレートするには、次のラボツールを使用して測定できます。
Chrome DevTools
Chrome DevToolsを使用すると、ページをオンザフライで編集し、問題をすばやく診断できます。これにより、最終的には、より優れたWebサイトをより迅速に構築できます。
灯台
LightHouseは、Webページの品質を向上させるためのオープンソースの自動化ツールです。
公開されている、または認証が必要な任意のWebページに対して実行できます。
パフォーマンス、アクセシビリティ、プログレッシブWebアプリ、SEOなどの監査があります。
WebPageTest
詳細な最適化の推奨事項を備えた消費者接続速度で実際のブラウザを使用して、世界中から無料のWebサイト速度テストを実行します。
web.devによると; 注意：ラボツールは通常、合成環境でページを読み込み、ページの読み込み中のレイアウトシフトのみを測定します。
その結果、特定のページのラボツールによって報告されるCLS値は、実際のユーザーが現場で経験する値よりも低くなる可能性があります。
累積レイアウトシフトを確認するためのクイックツール
1. ChrisJohnsonによるDefacedToolからのGIF形式のCLSで、問題のあるLSを特定します。
2.累積レイアウトシフト計算機
CLS計算の欠陥
Googleは、CLSメトリックが長期間開いているウェブページを測定するには不十分であり、スコアが低いとペナルティを課すというフィードバックを受け取りました。
GoogleはCLSのスコアを更新するための3つのソリューションをレビューしたため、この変更によってCLSスコアが悪化することを心配する必要はありません。
CLSを測定するためのセッションウィンドウ
Googleは、CLSを測定するためにセッションウィンドウアプローチを採用しました。
ページ要素の測定は、セッションウィンドウで測定されます。これは、ユーザーがWebページを下にスクロールするときに到達するWebページのさまざまな部分に対応します。
各セッションウィンドウの合計スコアは、累積レイアウトシフト、つまりページ全体の合計シフトです。
多くのCLSスコアが変更されます
Googleによると、ウェブページの約55％は、累積レイアウトシフトスコアに変化が見られません。 スコアのわずかな改善が見られるのは、サイトの約42％のみです。
無限スクロールのWebページまたはユーザーインタラクションへの反応が遅いユーザーインターフェイスハンドラーを備えたWebページの3％は、スコアが良い評価に上がるのを見るでしょう。
更新によりCLSスコアがより正確になります
これは、新しいスコアリングシステムがより公平になることで、特に長い間開いているか、無限のスクロールを使用していて、そのために不当にスコアリングされていたWebページの場合にメリットになります。
2021年5月にCoreWebVitalsメトリックがランキング要素になりつつあるため、土壇場で行うことが重要な変更です。
結論
累積レイアウトシフト（CLS）を理解すると、今後数日間でより優れたユーザーエクスペリエンスを提供するのに役立ちます。
この指標はUXを改善するためのコアウェブバイタルの一部であり、2021年にランキングシグナルになる予定であるため、その重要性とサイトへの影響を理解することが重要です。