2020年XNUMX月、Googleは「 コアWebバイタルこれらの指標は、ウェブサイト全体のユーザーエクスペリエンスを測定する方法です。目標はシンプルです。ウェブを誰にとってもより良い場所にすることです。Core Web Vitalsの3つは次のとおりです。
- 最大のコンテンツフルペイント（LCP）： これは、ページのメインコンテンツが画面に表示されるまでにかかる時間を測定します。
- 最初の入力遅延（FID）： これは、訪問者がページを操作できるようになるまでにかかる時間を測定します。
- 累積レイアウトシフト（CLS）： これは、ページが視覚的に安定しているかどうか、または読み込み中にページの要素が大きく移動するかどうかを測定します。
これらの指標は、単なる検索ランキングの数字ではありません。訪問者の体験に直接影響を与えます。これらの指標を改善することは、ランキングの向上だけでなく、ウェブサイトをより快適なものにすることにもつながります。
Cumulative Layout Shift とは何ですか?
累積レイアウトシフト（CLS） この記事の焦点はレイアウトシフトです。名前は専門的に聞こえるかもしれませんが、概念はシンプルです。ボタンをクリックしようとしたり、テキストを一行読もうとした途端、突然画像や広告が表示され、すべてが押し下げられた経験はありませんか？この不快な体験がレイアウトシフトです。CLSは、ページが読み込まれる際にページ上の要素がどれだけ移動するかを測定します。CLSスコアは0.1以下であれば良好です。0.25を超えると不良とみなされます。スコアが低いほどページの安定性が高く、ユーザーエクスペリエンスが向上します。
CLS はどのように計算されますか?
CLSスコアは0から1の範囲の数値です。スコア0はレイアウトのずれがなく完璧な状態ですが、スコアが1に近いほどレイアウトのずれが大きいことを示します。この数値の計算はそれほど複雑ではありません。 レイアウトシフトスコア = 影響率 * 距離率を選択します。 影響率 ページのどの部分がシフトの影響を受けるかを測定し、 距離分数 要素の移動距離を測定します。例えば、大きな要素がかなりの距離を移動すると、CLSスコアは低くなります。ユーザーがページを操作（クリックや入力など）してから0.5秒以内に発生するレイアウトの変化は、スコアにカウントされません。
CLS を見つけるにはどうすればいいですか?
CLSスコアを修正する前に、CLSとは何かを知る必要があります。CLSスコアを確認する方法はいくつかあります。
Google ページスピード インサイト
ページ速度チェックを実行できます Google ページスピード インサイトすると、CLSスコアが ラボデータ この報告書では、CLSの主な原因についても取り上げます。 診断法 セクション。ウェブサイトのトラフィック量に応じて、レポートには以下の項目も含まれる場合があります。 フィールドデータ実際のユーザーの体験に基づいています。
Google Search Console
検索コンソールには コアWebバイタル パフォーマンスが良いページと悪いページを示すレポートです。このレポートには、CLSスコアに加え、最大コンテンツペイントと初回入力遅延も表示されます。
グーグル灯台
使用することもできます Lighthouse ブラウザの開発者ツールで「ページスピード」タブを開いてください。累積レイアウトシフトを含む完全なパフォーマンスレポートを実行できます。これはPagespeed Insightsレポートと非常に似ていますが、まだ公開されていないページでも実行できるという利点があります。そのため、開発者にとって非常に便利なツールとなっています。
累積レイアウトシフトの原因は何ですか?
レイアウトのずれの最も一般的な原因は、いくつかの簡単な変更で修正できます。ここでは、最も一般的な原因とその修正方法をご紹介します。
寸法のない画像と動画
これはCLSの最も一般的な原因の一つです。ブラウザがページを読み込む際、まずHTMLコードが読み込まれ、次にCSS、そして画像と動画が読み込まれます。画像や動画の幅と高さを指定しないと、ブラウザはどれだけのスペースを確保すればよいか分からず、画像が読み込まれるとレイアウトがずれてしまいます。これは特に低速な接続環境で顕著です。
これを修正するには？
解決策は簡単です。HTMLで画像の高さと幅を必ず指定してください。これにより、ブラウザは確保すべきスペースを正確に把握できるため、ページの残りの部分が適切な場所に読み込まれます。また、画像に適切な代替テキストを設定することも重要です。代替テキストは、ページの印象を大きく左右します。 オンページSEO. 無料の AI 画像の代替テキスト ジェネレーター 画像に適切な説明を書くのに役立ち、SEO を向上させるのにも最適な方法です。
広告
広告はCLSの主な原因です。広告は特定の訪問者をターゲットとして読み込まれることが多く、読み込みに時間がかかることがあります。特に広告がページ上部にある場合、レイアウトが突然ずれてしまうことがあります。
これを修正するには？
画像と同様に、広告用に確保したいサイズを指定できます。これにより、広告が読み込まれた際にレイアウトがずれることがなくなります。たとえ小さな広告が配信される場合でも、広告用に可能な限り大きなスペースを確保するのがベストプラクティスです。
埋め込みとiフレーム
YouTube動画、Googleマップ、Twitterフィードなどの要素をページに埋め込む場合は、CLSに注意する必要があります。要素の正確なサイズが常にわかるとは限らないため、レイアウトがずれてしまうリスクがあります。
これを修正するには？
要素のサイズを正確に予測し、レイアウト内にそのスペースを確保する必要があります。確信が持てない場合は、その要素に最大の高さまたは幅を設定することを検討してください。
ウェブフォント
Google Fontsなどのサービスからフォントを読み込む場合も、レイアウトがずれることがあります。フォントの読み込み中は、ページが既にフォールバックフォントで表示されている場合があります。フォントが読み込まれると、フォントが置き換えられるため、レイアウトが少しずれます。
これを修正するには？
CLSに対するWebフォントの悪影響を軽減する方法は2つあります。CSS属性を設定することです。 フォント表示 〜へ swap ウェブフォントのプリフェッチとプリロードによってフォントの読み込みを高速化します。 swap 属性は、新しいフォントが準備されるまでフォールバック フォントを使用するようにブラウザに指示します。
動的に挿入されたコンテンツ
現代のウェブ開発の人気が高まるにつれ、動的に読み込まれるコンテンツを持つページが増えています。ページにはプレースホルダが含まれており、JavaScriptサーバー呼び出しが適切なコンテンツを返した後にのみ読み込まれます。この処理には時間がかかり、レイアウトがずれる場合があります。
これを修正するには？
後から追加するコンテンツのために、常にスペースを確保しておく必要があります。また、コンテンツができるだけ早く読み込まれるようにすることも重要です。これは技術的な作業ですが、開発者がサポートします。
結論
レイアウトシフトは訪問者にとって煩わしく、ユーザーエクスペリエンスの低下につながります。2021年以降、レイアウトシフトはGoogleのランキングにも悪影響を及ぼす可能性があります。幸いなことに、CLSにはいくつかの異なる原因があり、それぞれに比較的簡単な解決策があります。自動SEOプラットフォーム クリックランク オンページ SEO、技術的な問題、コンテンツの改善をサポートし、ランキングの高い強力な Web サイトを構築できます。
