累積レイアウトシフト（CLS）：それは何でありそしてそれのためにあなたのウェブサイトを最適化する方法
公開: 2021-08-22これを想像してみてください。あなたはウェブサイトを読み込んでいて、準備ができているように見えます。 ブログの注目の画像をクリックして記事を読むと、何か他のものが読み込まれたために、突然ページ全体がシフトします。 そして、まったく異なるものをクリックして、意図しないページをロードします。 この問題を自分で経験したことがある場合は、累積レイアウトシフト（CLS）がサイトのユーザーエクスペリエンス（UX）にどのように悪影響を与える可能性があるかをご存知でしょう。
累積レイアウトシフトは、ページの読み込み中にページのレイアウトがどれだけシフトするかを表す用語です。この記事では、その意味についてもう少し詳しく説明します。 CLSの測定方法を示し、良いスコアとは何かを説明します。 次に、WebサイトのCLSスコアを最適化する方法について説明します。 仕事に取り掛かろう！
私たちのYoutubeチャンネルを購読する
累積レイアウトシフト（CLS）とは何ですか？
高いCLSスコア（GoogleのPageSpeed Insightsから0.10を超えるものを意味する）が何を表すかを説明するのに、視覚的な例よりも優れた方法はありません。 これは、ページが読み込まれるときにシフトし続けるレイアウトのWebサイトです。 これをキャプチャするときは、まったくスクロールしないことに注意してください。 ビューポートは同じままですが、ページはそれ自体で大幅にシフトします。
このWebサイトにアクセスするユーザーは、実際にいつロードが完了したかわからない場合があります。 レイアウトが大幅に変化する場合にのみ、ニュース記事をクリックしてみてください。 その結果、あなたは間違ったページに行き着き、あなたは戻って時間を無駄にしなければなりません。 ページによっては、これが複数回発生する可能性があります。 もしそうなら、あなたがただ去る可能性が高いです。
そして、ユーザーもそうなります。
Webサイトが複雑になるほど、CLSスコアが高くなる可能性が高くなります。 象徴的なGoogleホームページなどのシンプルなレイアウトでは、要素が非常に少ないため、CLSはありません。
それはすべての複雑なウェブサイトが高いCLSスコアを持っているということではありません。 たとえば、Amazonについて考えてみましょう。 eコマースの巨人が単純なWebデザインを使用しているとは誰も言いません。 それでも、カタログを閲覧しているときに見られるレイアウトの変化はほとんどまたはまったくありません。
ブラウザはページ要素を非同期にロードする傾向があるため、レイアウトのシフトが発生します。 さらに重要なのは、最初はサイズが不明なメディア要素がページにある可能性があることです。 この組み合わせは、読み込みが完了するまで、ブラウザが個々の要素が占めるスペースを認識しないことを意味します。 したがって、大幅なレイアウトの変更。
CLSは、さまざまなツールを使用して客観的に測定できるという点で興味深いですが、各ユーザーのデバイスがサイトのレイアウトの変化に影響を与える可能性があるという点でもユーザー中心です。 その側面を制御することはできませんが、影響を最小限に抑えるための予防策を講じることはできます。
CLSは、ウェブサイトが強力なユーザーエクスペリエンス（UX）を提供しているかどうかを判断するためにGoogleが測定する3つのコアウェブバイタルの1つです。 他のコアWebVitalsは、First Input Delay（FID）とLargest Contentful Paint（LCP）です。これらも、最適化に費やす努力の価値があります。
CLSの測定方法
あなたのウェブサイトがマークされたレイアウトシフトを示しているかどうかを理解することは比較的簡単です。 まず、さまざまなデバイスからWebサイトにアクセスしてみて、他の人にも同じように依頼することをお勧めします。 あなたがするように、ページがロードされている間、レイアウトが一貫しているかどうかを観察することができます。
あなたがおそらく見つけることは、CLSの経験が大きく異なる可能性があるということです。 それはあなたのウェブサイトがどれだけ最適化されているかだけでなく、あなたが使っているデバイスにも依存します。 それを念頭に置いて、WebサイトのCLSを測定するための最良のツールはPageSpeedInsightsです。 これはGoogleのCoreWeb Vitalsに直接関連しているため、CLSスコアがGoogleによるサイトの表示にどのように影響するかを直接確認できます。
このサービスを使用すると、URLを入力し、Googleが収集した過去28日間のデータに基づいてURLの全体的なパフォーマンススコアを受け取ることができます。 このスコアは、CLS、FCP、LCPなどのいくつかの指標を考慮に入れています。
このテストでは、CLSが識別できないWebサイトを選択しました。 PageSpeed Insightsは、強力なCLSスコアで圧倒的にポジティブな結果を返したため、私たちの疑いを確認しました。
PageSpeed Insightsは、スコアごとにパーセンテージの内訳を提供していることに注意してください。 この場合、ユーザーの91％は、テストWebサイトのロード中にレイアウトシフトがゼロでした。 ただし、残りの訪問者は、ある程度のレイアウト変更を経験しました。
これは、CLSおよびその他のコアWebバイタルに関しては予想されることです。 ユーザーエクスペリエンスは、アクセス元のデバイス、インターネット接続、およびその他の多くの要因によって大幅に異なります。 CLSを経験したことのないユーザーを説明する方法は事実上ありませんが、パーセンテージができるだけ低くなるように最適化するための予防策を確実に講じることができます。
PageSpeed Insightsは、フィールドデータに加えて、ラボデータと呼ばれるものも提供します。 これらは、長期間にわたって収集されたデータ（フィールドデータと見なされます）ではなく、単一のテストに基づくパフォーマンススコアです。
私たちのテストでは、CLSスコアがゼロでした。これは、レイアウトの変更がなかったことを意味します。 この1つの特定のテストのために。 それでは、CLSスコアがそれほど高くなかった別のWebサイトと比較してみましょう。
Googleの基準を満たすには、 CLSスコアが0.10未満である必要があります。 それを超えると、レイアウトに大幅な目立った変化が生じ、ユーザーエクスペリエンスが低下します。
レイアウトシフトの原因を特定する方法
ウェブサイトでレイアウトシフトの原因となっている要素を特定する場合は、Chrome開発ツールを使用して行うことができます。 ツールを開いて（CTRL-SHIFT-I）、[パフォーマンス]タブにジャンプすると、Webをナビゲートするときにパフォーマンステストを記録できます。
記録を停止すると、Chrome Dev Toolsは、読み込み時間、個々のリクエスト、コアWebバイタルを示すタイムラインを返します。 このタイムラインから、[エクスペリエンス]の下にリストされている個々のレイアウトシフトイベントを選択できます。 そうすれば、それらがどの要素に対応しているかを確認できます。
どの要素がレイアウトシフトを引き起こしているのかがわかったら、問題を解決するための手順を実行できます。 これについては次のセクションで説明します。
ウェブサイトのコアウェブバイタルを監視する場合は、Google検索コンソールアカウントを設定することをお勧めします。 検索コンソールからパフォーマンスメトリクスとコアWebバイタルを監視できるようになります。これは検索エンジン最適化（SEO）に関しては恩恵です。 関係なく、検索コンソールを定期的に監視することが最善の利益であると考えていますが、追跡している特定の指標があることは決して害にはなりません。
CLSスコアを最適化する方法
概して、CLSスコアが高い場合、メディアファイルと広告という2つの大きな原因があります。 たとえば、高解像度の画像ファイルをアップロードしても、その高さと幅を指定しないと、ページのレイアウトが崩れる可能性があります。
ウェブサイトのパフォーマンスに関しては、表示する正確なサイズの画像を使用するのが最善です。 そうすれば、ブラウザはそれらを適切にサイズ変更するために処理能力（および時間）を費やす必要がありません。 ただし、それが常に可能であるとは限りません。 そうでない場合は、表示するすべての画像に幅と高さの属性を設定する必要があります。 そうすれば、ユーザーのブラウザは画像がどこに収まるかを正確に認識し、可能な限り最後の1秒でレイアウトをシフトする必要がなくなります。
これらの属性がHTMLでどのように表示されるかを次に示します。
<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">
WordPressを使用している場合、一部の画像最適化プラグインは、アップロード時にファイルのサイズを自動的に変更できます。これにより、必要な幅と高さの属性が設定されます。
レスポンシブ画像に関しては、幅と高さを手動で宣言する代わりに、CSSに頼ることができます。 CSSを使用すると、 max-width属性を使用して、画像が占めるビューポートの割合をブラウザに指示できます。
img {
max-width: 90vw;
height: auto;
}この例では、ユーザーのビューポートの90％を占めるように、画像を拡大縮小するようにブラウザに指示しています。 同時に、 height属性をautoに設定して、ブラウザが画像の新しい幅とアスペクト比に基づいて理想的な高さを計算できるようにします。
画像と同じ基本が広告にも当てはまります。 通常、iframeを使用しますが、広告ネットワークで動的なサイズの要素を使用する場合もあります。 これは、ページのレイアウトに大混乱をもたらす可能性があります。
広告ネットワークにウェブサイト上の広告の大きさを決定させる代わりに、それらのために領域を予約することができます。 つまり、広告領域の幅と高さの属性を宣言し、それらが読み込まれない場合に備えてフォールバックを設定することを意味します。そのため、空のスペースによってレイアウトがシフトすることはありません。
同じ種類のCSSとインラインスタイルを任意の広告コンテナに使用して、配信される広告に関係なく、所定の位置にロックしたままにすることができます。
累積レイアウトシフト（CLS）に関するよくある質問
CLSは、LCPおよびFCPメトリックよりも把握が少し複雑になる可能性があります。 そのことを念頭に置いて、CLSに関してユーザーが抱く一般的な質問をいくつか調べて、重要な情報を見逃していないことを確認しましょう。
CLSは私のウェブサイトのパフォーマンスにどのように影響しますか？
理論的には、CLSスコアが比較的低い非常に高速なWebサイトを作成できます。 他のコアWebバイタルと同様に、CLSスコアはサイト全体のパフォーマンスと直接相関しない場合があります。 あなたのサイトは非常に速く燃えているかもしれませんが、それがロードされると、それはアコーディオンのように展開します。 それでも、大きなレイアウトの変更は間違いなくサイトのUXに悪影響を及ぼします。 Googleはそれを非常に重要だと考えています。 これが、Googleがこのデータポイントに非常に大きな重みを付けている理由です。
CLSはFCPまたはLCPスコアよりも重要ではありませんか？
多くのユーザーは、CLSよりもFCPおよびLCPスコアに注意を払っています。 これは、これら2つの指標がウェブサイトのパフォーマンスとの相関が容易だからです。 FCPは特にユーザー中心の指標でもありますが、CLSは多数のユーザーにわたって一貫して測定するのが困難です。
3つの指標すべてがGoogleCore WebVitalsを構成しています。 これは、それらの1つを無視すると、関連する検索結果の下位に配置されるリスクがあることを意味します。 サイトが低CLSに最適化されていることを確認しても、通常、LCPやFCPなどのサイトのパフォーマンスにプラスの影響を与えるだけです。 最大のコンテンツフルペイントがユーザーに表示されるとすぐに画面に押し込まれた場合、その高速な読み込み時間はどの程度役に立ちますか？
良いCLSスコアとは何ですか？
数字からすると、Googleは0.10未満のものをCLSスコアとして適切と見なしています。 ただし、適切な手順を実行すれば、CLSスコアを0にすることは問題外ではなく、十分に最適化されたWebサイトでは比較的一般的です。 ただし、定期的にスコアが0のサイトでも、シフトを経験するユーザーの割合がわずかになる可能性があることに注意してください。 それはあなたのコントロールの外にあり、あなたができることは、CLSが0のほとんどのユーザーを説明することだけです。
結論
あなたのウェブサイトで強力なUXを提供することに入る多くの要因があります。 理想的には、高速にロードする必要があります。 簡単に操作できる必要があります。 要素が表示されるときにレイアウト位置をシフトするべきではありません。 大幅なレイアウトの変更は、フラストレーションとミスクリックにつながります。 それらはより高いバウンス率につながります。 これはどのウェブサイトにも良くありません。
CLSは、Googleがサイトの全体的なUXを測定するために使用するコアWebバイタルの1つです。 そして、ユーザーはあなたがそもそもウェブサイトを持っている理由です。 彼らの経験が優先されます1。CLSスコアが低い（0.10未満）ということは、Webサイトがスムーズに読み込まれ、レイアウトのあらゆる側面が最初から適切な場所に表示されることを意味します。
CLSについて、またはCLSを減らす方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！
兄/shutterstock.com経由の注目の画像