GSCのコアウェブバイタルにおけるCLS問題エラーの修正

Web Vitals Search ConsoleでのCLS修正

コアウェブバイタルがGSCに導入されたことで、Googleはページのウェブバイタルをランキング要因として考慮することを明確にしました。これは、ページスピード、HTTPS、モバイルフレンドリー、セーフブラウジングなどのGoogleの他のランキング要因と連携して機能します。まだ多くの詳細は公開されていませんが、Googleサーチコンソールはコアウェブバイタルのレポートを表示し始めています。

それは、次の3つのウェブパフォーマンスメトリックで構成されています；

LCP: 最大コンテンツペイント
FID: 最初の入力遅延
CLS: 累積レイアウトシフト

現在、これらの問題を修正する方法に関する情報はあまりありませんが、ウェブページの累積レイアウトシフト（CLS）‘ More Than’を解決するのに役立ついくつかの実践があります。

GSCのCLS More thanエラー

累積レイアウトシフトとは？

これはページの安定性を報告するメトリックです。簡単に言えば、ウェブページを読み込んでいるときに、突然コンテンツや要素がジャンプしたり変わったりすると、ユーザーの視聴体験に問題を引き起こす可能性があります。

CLSは、ページの全ライフサイクル中に発生するすべての予期しないレイアウトシフトのレイアウトシフトスコアの合計を測定します。

ページの不安定性

上記の例は、注文確認ボックスの上に要素が突然読み込まれたために偶発的なクリックが発生したことを示しています。CLSは、すべてのページコンテンツシフトの平均です。

良好なユーザー体験を提供するために、サイトはCLSスコアを0.1未満にするよう努めるべきです。

高いCLSの原因は？

高いCLSを引き起こす可能性のある問題はいくつかありますが、主要な理由をいくつか挙げます；

レイジーロードコンテンツの再フロー
寸法のない画像
広告の挿入
寸法のない埋め込みやiframe
遅い応答のために読み込みを待っているコンテンツ

レイジーロードコンテンツの再フロー

レイジーロードは、ページがスクロールされ、コンテンツがビューポートに入るときにのみ画像を読み込む素晴らしいプラグインです。しかし、多くの場合、これによりコンテンツが上下にシフトし、再フローが発生し、画像の下または周囲のコンテンツが新しく読み込まれた画像のために押し出されます。

広告の挿入

広告は、表示しているコンテンツをページの下に押し下げることで、ウェブ上のレイアウトシフトの最大の要因の1つです。これは、ページが読み込まれた後に広告ユニットを読み込むことで、重要なジャンクを引き起こします。

遅い応答のために読み込みを待っている要素

時には、遅いHTTP応答のために、いくつかの要素が読み込むのに時間がかかり、コンテンツが上下にシフトすることがあります。

ウェブバイタルで高いCLSエラーを修正する方法は？

画像の読み込みに時間がかかり、コンテンツが画像のためにスペースを占有する場合、コンテンツが読み込まれると、コンテンツが下にシフトし、レイアウトの不安定性を引き起こします。

コンテンツシフト（ジャンク）を引き起こす画像については、CSSアスペクト比ボックスで必要なスペースを予約します。このアプローチにより、メディアが読み込まれている間、ブラウザがドキュメント内で正しい量のスペースを割り当てることができます。ジャンクフリー画像読み込みについては、この投稿をお読みください。

レイジーロードされた画像も問題を引き起こす可能性があり、画像スペースを占有する前に大きなスペースを作成することがあります。画像のレイジーロードによるコンテンツ再フローの問題に直面している場合は、解決策についてこの記事をお読みください。

コンテンツ内に広告を配置する場合は、スロットサイズを予約することでシフトを排除してください。広告が返されない場合は、予約されたスペースを崩さずにプレースホルダーを使用してください。WordPressを使用している場合は、Ad-Inserterのような良い広告プラグインが広告のために正しいスペースを保持するので、心配する必要はありません。

GSCのコアウェブバイタルでのCLS修正

動的コンテンツは避けてください。動的コンテンツは、ページが読み込まれた後に挿入されるものです。特にファーストビューの上のコンテンツ、例えばニュースレター、サインアップ、関連投稿などは、可能であればポップアップボックスを使用して、この種のコンテンツをファーストビューの上に読み込むことを避けてください。

サーバーからの遅いHTTP応答もコンテンツの不安定性を引き起こす可能性があります。CDNを使用していて、要素の読み込みに高いミリ秒がかかり、これがコンテンツのジャンプを引き起こす場合は、DOM内にスペースを作成するか、他の要素との読み込みを同期させる必要があります。

高いCLSの他の原因もあります。Web.Dev公式サイトでCLSを最適化するための詳細なガイドを見つけることができます。

結論: この投稿には技術的またはコード関連の解決策は含まれていませんが、問題の原因とその修正アプローチについての概要を提供します。

GSCのコアウェブバイタルにおけるCLS問題エラーの修正についてのご意見があれば、下のコメントボックスにお気軽にお寄せください。また、動画チュートリアルのために私たちのDigitBin YouTubeチャンネルに登録してください。乾杯！