累積レイアウトシフトは、Core Web Vital指標です。ユーザーがウェブサイトにアクセスしていないにもかかわらず、予期せぬレイアウト変更が何回発生するかが、視覚的な安定性のレベルを決定します。ページのコンテンツが変更されるたびに、たとえリンクのクリックなどによるものでなくても、レイアウトが変更されたとみなされます。
累積レイアウトシフトの総合スコアは、これらすべてのシフトを合計して決定されます。.
累積レイアウトシフトとは何ですか?
CLSから最も多く報告されるのは、写真の読み込み遅延です。テキストがメディア要素よりも先に読み込まれるのが一般的です。さらに、すべてのグラフィック要素が完全に読み込まれた後に、Webページの構造が変わってしまうこともあります。これらの現象は、スクロールしているかどうかに関係なく発生します。
ウェブサイトのページのCLSスコアが高くても、読み込みが完了したかどうかが分かりにくい場合があります。ウェブサイトの複雑さやメディアコンテンツの量によっては、ユーザーがレイアウトの変更に遭遇する可能性が高くなります。.
WordPress で累積レイアウトシフトを削減しますか?
Google Web Vitals CLSデバッガーを利用することは、ウェブサイトの高いCLSスコアの原因となっているコンポーネントを特定する最も効果的な方法です。このデバッガーは、ウェブサイト上のすべての要素を示すGIF画像を表示します。高いCLSスコアの多くは、広告やメディアアセットによるものである可能性があります。CLSスコアを向上させるには、各コンポーネントを最適化する必要があります。.
この目的のために、Web サイトの CLS スコアを向上させるために使用できるいくつかの方法を次に示します。
1. すべてのメディアファイルにディメンション属性を追加する
ウェブブラウザは画像を読み込んだ後、画像のサイズとレイアウトの向きを判断する必要があるため、属性が不明なメディアアセットをアップロードすると、レイアウトがずれる可能性が高くなります。サイズが大きい写真や高画質のファイルは、小さいファイルよりもレイアウトがずれる可能性が高くなります。WordPressのメディアエディターで画像のサイズを変更してください
2. フォントがローカルに読み込まれていることを確認する
フォントの読み込み中もテキストは表示されたままである必要があります。そのため、この目標を達成するためにまず行うべきことは、フォントがサードパーティのホストフォントを持つウェブサイトから取得されるのではなく、ローカルで読み込まれるようにすることです。.
3. FOITとFOUTを避ける
Flash of Invisible Text ）現象は、フォールバックフォントが指定されていない場合に発生します。その結果、ウェブブラウザがフォントの読み込みや代替フォントの検索を試行している間、通常テキストが表示される場所に空白の領域が表示されます。
フラッシュ・オブ・アンスタイル・テキスト（FOUT）と呼ばれる期間中、ウェブブラウザは選択したフォントが読み込まれるまで、デフォルトのフォールバックフォントを使用します。この問題を解決するには、font-display: switch属性を追加します。.
Seahawk Media Blogで、このような記事をもっとお読みいただけます。
