累積レイアウトシフト（CLS）

公開: 2020-07-14

私たちは皆、モバイルWebページで絶えず変化する写真にうんざりしていませんか？

興味のある記事を実際に読みやすくなると思いますが、そうではありません。 広告やポップアップで途切れ途切れになっているテキストや画像の変化に対処する必要があります。最終的に停止したと思ったときに、コンテンツの不正な行または列が再び実行されます。

この変化は数年前に流行していましたが、Googleのレスポンシブデザインのメトリクスは、現在それを抑制しています。

ユーザーエクスペリエンスは、特に最近、 Googleの改善指標の最前線にあります。 Webサイトの認識に焦点が移るにつれて、Web開発者は毎日UXを改善するために2倍の努力を払っています。累積レイアウトシフトは、主にこの開発からインスピレーションを得て、Webページ上の要素の詳細な方向を示すメトリックです。

累積レイアウトシフト（CLS）とは何ですか？

累積レイアウトシフトは、ページのダウンロード中に画像、動画、CTAなどのコア要素のシフトを測定する指標です。 CLSスコアが低いということは、ページ上のダウンロード可能な要素を最適化する必要性が高いことを意味します。改訂されたコーディングはこの問題を解決し、最適化されたCLSスコアにつながる可能性があります。

累積レイアウトシフト（CLS）の背後にある理由

CLSが機能するマイクロレベルは気が遠くなるほどです！シフトにつながる理由は1つではありません。 Webデザイナーは、日々改善を続け、草の根からデザインを磨く必要があります。

Googleは、累積レイアウトシフトの5つの主な理由を次のように挙げています-

無次元の写真
無次元の画像と広告の埋め込み
後で挿入されたコンテンツ
スタイルのないテキストのフラッシュ（FOUT）-フォントの原因
DOMを更新する前にネットワークからの応答を待機しているアクション

画像のアスペクト比は、柔軟な設計とレイアウトでデバイス全体で同期する必要があります。レスポンシブ画像には、プラットフォーム間で調和して存在するアスペクト比があります。ソースコードに書き留める前に、正確な数値を計算してください。

累積レイアウトシフト（CLS）の原因となる広告を修正するにはどうすればよいですか？

広告はCLSの提供を複雑にしますが、「不可能」とは言えません。広告を表示する要素を操作することで管理できます。たとえば、divをわずかに操作すると、広告の高さと幅を大幅に修正できます。それでも広告が表示されない場合は、2つのオプションがあります-

まず、空のスペースを埋めるために別のバナー広告またはプレースホルダー画像が表示されるように、広告を含む要素を設定します。

次に、Webページの上部、左側、または右側の行全体を埋め、ページ自体が表示されない広告の場合、シフトがまったく発生しないため、違いはありません。いくつかの散発的なテーマとレイアウトでは、状況が異なる場合があります。念のため、テストする必要があります。

動的に注入されたコンテンツ（DIC）

Dynamicly Injected Content（DIC）は、後でWebページに埋め込まれる種類のコンテンツです。後でWebページにリンクを埋め込んだツイートやFacebookの投稿の例をとることができます。

スタイルなしテキストのフラッシュ（FOUT）

インターネットからフォントをダウンロードしてWebページに組み込むと、Flash of Invisible Text（FOIT）またはFlash of Unstyled Text（FOUT）が発生することがあります。

フォントをダウンロードするときは、リンクでrel = 'preload'を使用してフォントを防止してください。

CLSの測定

Googleは、CLSの計算に2つの異なる方法を使用することをお勧めします-

研究所で
現場で

ラボで：この方法では、Webページをダウンロードしているユーザーのシミュレーションが行われます。 Moto G4は、ラボで生成されたCLSスコアを計算するためのGoogleの選択です。この演習のために必要とされているラボのツールは、灯台とChromeデベロッパーツールです。
フィールドで：名前が示すように、フィールドでの計算は、ライブWebサイトの訪問者とユーザーからデータを収集することによって行われます。この方法ではより正確なデータが得られますが、実際にテストする前にラボシミュレーションを実行することをお勧めします。

CLSの原因の診断

CLSの原因となる要素を診断しようとすると、暗闇の中で撮影しているように見えるかもしれませんが、適切なツールを使用すれば、それは簡単なことです。 Chrome DevToolsには、エクスペリエンス行をさらに開くパフォーマンスパネルが含まれています。ここでは、さまざまな要素が受けたレイアウトの変更とシフトを、レイアウトシフトスコアと影響を受ける領域の形式で見つけることができます。

CLSの問題の修正

CLSの原因となる要素を診断するだけでは不十分です。 それを修正することも同様に重要です。 これを行うためのいくつかの迅速で簡単な方法を次に示します。

フォントを利用する：カスタマイズされたフォントに加えて、値（自動、スワップ、ブロック、フォールバック、およびオプション）を表示します
比例アスペクト比を使用して、Webページに存在する画像およびビデオ要素の「幅」および「高さ」属性に言及します。
広告は、Webページ内のCLSの最大の静的ソースです。残念ながら、CLSを回避するために行うことができる広告関連の調整はごくわずかです。 折りたたみ可能な広告スペースには必ずプレースホルダー画像を割り当ててください。また、広告を埋め込む前に要素をスタイル設定して、広告スペースを予約してください。
HTTP応答の管理と、Webページ上のすべての要素の読み込み速度の同期により、CLSスコアが低下します。
Dynamicly Injected Content（DIC）は、Webページ要素の多くのシフトにつながり、CLSスコアの低下につながります。既存のものの上にコンテンツのレイヤーを追加した後にシフトしないように、必ずスケルトン画像またはバナーを追加してください。

別れの考え

私たちの日々の大半をモバイルデバイスにこだわっているWebサーファーとして、レスポンシブデザインが真剣に受け止められ、 CLSの問題がコアデザインの優先事項として扱われていることに感謝する必要があります。そうでなければ、飛んでいる物体を追跡するのはほんの少しの間だけ楽しいです。

多くのWeb開発者は、CLSメトリックの可能性を最大限に活用し始めたばかりですが、来年には最も重要なランキング要素になる予定です。