WordPress の累積レイアウト シフト (CLS): それを除去する方法

公開: 2023-07-26

累積レイアウト シフトに関するこの章で、WordPress ユーザー向けのコア Web バイタルに関するミニシリーズも終わりに近づきます。 最大コンテンツフル ペイントと最初の入力遅延に関する前の章で、これらの用語の正確な意味と、それぞれの用語に合わせて Web サイトを最適化する方法についてすでに説明しました。 ここで、CLS に対しても同じことを行いたいと思います。

以下では、Cumulative Layout Shift とは何なのか、その計算方法、この領域で Web サイトのパフォーマンスをテストする方法、目指すべき適切な値について説明します。 その後、WordPress サイトに存在する可能性のある CLS 問題に対処して改善するための手順を段階的に説明します。

このシリーズの他の 2 つの投稿と合わせて、完了したら、あなたの Web サイトを Google の承認にふさわしいものにする準備ができていると感じていただければ幸いです。

累積レイアウトシフトの意味は何ですか?

いつものように、定義から始めましょう。 一言で言えば、CLS は、ユーザーの操作なしで Web ページ上の要素が移動 (または移動) するような、Web ページ上で何かが変化したときを測定します。

累積レイアウトシフト例
画像ソース: web.dev

読んでいる記事内のフォームや広告の読み込みが遅く、読んでいる段落の下に移動してしまうため、もう一度スクロールして目的の場所を見つける必要がある場合があります。 さらに悪いことに、ボタンやリンクの位置が都合の悪いタイミングで変更されてしまい、クリックしたくないものをクリックしてしまうことになります。

したがって、それは、軽度の迷惑なものから完全に腹立たしいものまで、さまざまなものになる可能性があります。 累積レイアウト シフトは、問題を理解して修正できるようにするために、この動作を捕捉するメトリックです。

どうしてそれが重要ですか？

Web サイトが不安定になると、現在行っている作業が完全に中断され、現実生活に迷惑な結果が生じる可能性もあります。 ご想像のとおり、これはユーザー エクスペリエンスに非常に悪影響を及ぼし、訪問者が離れる原因となる可能性があります。 これは、画面サイズの関係でデスクトップ マシンよりも小さな変化が大きな影響を与えるスマートフォンに特に当てはまります。

Android SDK仮想モバイルデバイス

これは非常に破壊的であるため、Google はこの指標に重点を置き、Web サイトを判断する中心的な値の 1 つとしています。 したがって、訪問者と、検索結果のどこに表示されるかを決定する人々 (つまりロボット) の両方を満足させたい場合は、Web サイト上の累積的なレイアウト シフトを排除するために最善を尽くしてください。

CLSの原因は何ですか?

Web サイトの要素が移動する原因は、通常、Web ページのファイルの読み込み速度が異なることが原因です。 もう 1 つの要素は、ページの読み込み中または読み込み後に動的に追加されるページ要素です。 典型的な例は次のとおりです。

  • サイズが正しく定義されていない画像やビデオなどのビジュアル
  • 広告、バナー、埋め込み、iframe などのサードパーティのコンテンツ
  • 最初に表示される代替フォントより小さいまたは大きい Web フォント

CLS のもう 1 つの原因は、CSS と JavaScript マークアップの競合である可能性があります。 相互にブロックすると、Web ページの読み込みプロセスが停止します。

累積レイアウト シフトはどのように計算されますか?

以前のバージョンとは対照的に、累積レイアウト シフトの計算は少し複雑です。 それを理解するには、まずいくつかの用語を理解する必要があります。

  • レイアウトのシフト— ページ上にすでに表示されている要素が、レンダリングされた後に開始位置から移動することです。 このような要素を不安定要素（クリエイティブですね）と呼びます。
  • 予想されるレイアウトの変化と予期しないレイアウトの変化— レイアウトの変化は、ユーザーが予期していない場合にのみマイナスになります。 Web ページとの対話後 (フォームの送信など) に、予想され歓迎されるレイアウトの変更もあります。 CSS アニメーションとトランジションは、予想されるレイアウトのシフトの他の例です。 これを考慮して、CLS はユーザー インタラクションの 500 ミリ秒以内に発生するすべてのレイアウト シフトを予期されるものとみなします。
  • 影響率— 移動要素が影響を与えるビューポート (画面上の Web サイトの表示部分) の割合を 10 進数で示します (たとえば、画面の 50% に影響を与える場合は 0.5)。
  • 距離の割合— シフト中に不安定な要素が移動する画面のパーセンテージとしての距離。 10 進数としても指定されます。
  • レイアウト シフト スコア— これは、衝撃率と距離率を乗算して計算されます (例: 0.4 x 0.15 = 0.06)。 その結果、長距離を移動する大きな要素は、短い距離を移動する小さな要素よりも高いスコアをもたらします。

CLS は、5 秒間隔で最も多く発生した予期しないレイアウト シフト スコアをキャプチャします。 明らかに、低い方が良いです。

結局のところ、詳細を知る必要はありません。 知っておく必要があるのは、CLS を測定する方法と、サイトがどのような価値を追求する必要があるかだけです。

優れたレイアウト シフト スコアとは何ですか?

良好なスコアは、CLS 値が 0.1 以下であることです。 0.25 までは改善が必要で、それを超えると悪影響があり、検索パフォーマンスが低下する可能性があります。

累積レイアウトシフトスケール

累積的なレイアウト シフトをテストする方法

ウェブサイトの CLS スコアを向上させるには、まず自分の立ち位置を知る必要があります。 Web ページはさまざまなデバイスで常に同じように動作するとは限らないため、実際にそのようなことが起こるかどうかを知るのは困難です。 したがって、開発現場では見られないかもしれませんが、訪問者は遭遇する可能性があります。 このため、テストしてみるのが最善です。

WordPress サイトで累積レイアウトシフトが問題かどうかを確認するには、いくつかの方法があります。 これらは、他の Core Web Vitals メトリクスとほぼ同じです。 最初の呼び出し先は常に PageSpeed Insights にする必要があります。結果ページにメトリクスが表示されます。

Pagespeed Insights の cls メトリクス

ラボの結果と Chrome ユーザー エクスペリエンス レポートの実際のデータの両方を使用していることに注意してください。 レイアウトの変更やソース要素の画像も表示されます。 そうすることで、問題が何なのか、どこで発生しているのかをよりよく把握できます。

ページスピードの洞察における累積的なレイアウト シフト要素

さらに、PageSpeed Insights では、各要素が CLS スコアにどの程度寄与しているかの比率が表示されます。 これにより、最も大きな悪影響を与えるものを優先することができます。

それ以外に、次のものも使用できます。

  • Google Search Console内のCore Web Vitalsレポート
  • Chromeブラウザの開発者ツール
  • 灯台
  • web-vitals JavaScript ライブラリ

CLS Visualizer という Chrome 拡張機能もあります。 Web ページ上の変化する要素を強調表示します。 Firefox の場合は、SpeedVitals を試してください。

WordPress サイトの累積的なレイアウトのずれを減らす方法

CLS が WordPress サイトの問題であることに気付いた場合は、おそらくそれを修正したくなるでしょう。 これがこの記事の残りの部分の内容です。

メディアの寸法を指定する

上記の累積的なレイアウト シフトの原因を確認すると、多くの解決策がすでに明らかになっています。 前述したように、CLS の一般的な原因の 1 つは、 widthとheight値が定義されていない画像やその他のメディアです。 寸法が固定されていないと、ブラウザーはどのくらいのスペースを予約すればよいのかわかりません。 これは、遅延読み込みなど、後でページに表示されるメディアに特に当てはまります。

残念ながら、レスポンシブ デザインでは特定の画像サイズを指定しないのが一般的です。 ほとんどの場合、画像はwidthまたはmax-width: 100%; height: auto; 。 画像をダウンロードするときに、実際のサイズがどのくらいかを判断するのはブラウザー次第です。

以前は、それがまさに私たちが避けようとしているタイプの行動につながることがよくありました。 イメージが突然存在し、他のすべてのものを動かしました。 したがって、ビジュアルの寸法、または少なくとも CSS アスペクト比を常に指定する必要があります。

幸いなことに、WordPress を使用している場合は、Web サイトによって画像のサイズが自動的に設定されます。 したがって、通常は問題が発生することはありません。

ワードプレスの自動画像寸法

特定の画像がそうでない場合は、Gutenberg エディターでこれを修正できます。

WordPressエディターで画像に高さと幅を割り当てる

広告、埋め込み、および類似のコンテンツの処理

ページに読み込まれるサードパーティのコンテンツは、多くの場合、CLS の最大のソースの 1 つです。 これらは、最終製品のサイズを必ずしも制御できない場合です。 また、その発行者は、それが表示されるサイトで利用可能なスペースがどのくらいあるのかを事前に知りません。 したがって、画像の場合と同じ方法でサイズを宣言する必要があります。

WordPress ユーザーにとって幸いなことに、Gutenberg エディターを使用してソーシャル ネットワーク、ビデオ ポータル、または同様のベンダーからのコンテンツをコンテンツに自動埋め込む場合、エディターは適切なwidthとheight宣言を自動的に追加します。

Wordpressの自動埋め込みによる累積的なレイアウトのシフトを避けるための自動幅と高さ

そうすることで、コンテンツの読み込みにページの他の部分よりも時間がかかる場合でも、コンテンツにはすでに正しいサイズが予約されています。 その結果、表示時にレイアウトが移動することはありません。

手動で追加する他のタイプのコンテンツの場合は、 widthとheight必ず手動で追加してください。 広告やその他の要素の正確な高さがわからない場合は、少なくともmin-heightプロパティを追加してください。 これにより、より大きな要素を使用できるようになりますが、ある程度のスペースが確保され、ページ上の CLS を排除または少なくとも削減できます。

WordPress でサードパーティ コンテンツの累積的なレイアウト シフトを最小限に抑えるもう 1 つのテクニックは、サードパーティ コンテンツをページの上位に配置しないようにすることです。 上位になるほど、下位にあるコンテンツがより多く押し下げられるため、CLS スコアが高くなります。 したがって、可能であれば中央または下に配置してください。

動的コンテンツの最適化

動的コンテンツは、ページがすでに読み込まれた後に追加されるページ要素です。 前の例は遅延読み込みされた画像でしたが、通常はスクロール時に表示されるバナー、フォーム、さらには関連製品なども含まれます。

カート放棄の理由

当然のことながら、それらを適切に計画しないと、レイアウトの変更が発生する可能性もあります。 それを回避する方法は次のとおりです。

  • 事前にスペースを予約する— 上記と同様に、コンテンツをロードできる固定サイズのコンテナーがある場合、後でコンテンツをロードした場合でも、レイアウトが安定した状態に保たれます。 固定コンテナはカルーセルなどにすることもできます。
  • ユーザー インタラクションと接続する— ユーザー アクションの後にコンテンツが動的に読み込まれる場合、レイアウトが変化しても CLS にペナルティはありません。 ただし、500ms のカットオフに注意してください。
  • コンテンツを画面外にロードする— ビューポートの外にコンテンツをロードし、それが利用可能であることをユーザーに通知し、そこにスクロールするオプションを提供する場合も、CLS はありません。 ソーシャル メディア プラットフォームは、新しい更新に対してこれを行うことを好みます。

Web フォントの処理を改善する

Web フォントもレイアウトのずれを引き起こす可能性があります。 一般的な 2 つの形式は、Web フォントが入力される前にスタイルのないテキストが最初に表示される (Flash of Unstyled Text または FOUT)、または最初はテキストがまったく表示されず、その後 Web フォントと一緒に表示される (Flash of Invisible Text または FOUT) です。 FOIT）。

どちらもレイアウトの変更につながる可能性があり、それに対してできることは次のとおりです。

  • 適切なフォント形式を使用する— WordPress Web サイトにカスタム フォントを読み込む場合は、必ず WOFF2 または WOFF 形式を使用してください。 これらはフットプリントが最小で、ロードが最も速く、上記の問題を回避するのに役立ちます。
  • 適切な代替フォントを使用する— 実際のフォントと非常に似ていない代替フォントを使用している場合、切り替えが発生した瞬間にレイアウトが移動する可能性があります。 最終製品に近いフォールアウト フォントを使用することで、これを回避できます。 フォント スタイル マッチャーは、フォント スタイル マッチャーを見つけるのに役立ちます。
  • フォントのプリロード— Web フォント リソースをドキュメントの前半に配置し、それらにrel=preload追加します。 そうすることで、ブラウザーはそれらを優先します。

また、フォントをローカルでホストするか、少なくとも CDN を使用して、ユーザーがフォントをできるだけ早く利用できるようにすることも役立ちます。 こうすることで、読み込み中にフォントが切り替わり、レイアウトが変わる可能性が低くなります。

累積的なレイアウトの変化によって WordPress サイトが台無しにならないようにする

累積レイアウト シフトは、Google が重要であると考える 3 つの指標の 1 つであり、この詳細なシリーズの最後の指標です。 これは、読み込み中および読み込み後もページ レイアウトの安定性を測定するため、ユーザー エクスペリエンスにとって重要な指標です。

Core Web Vitals の他の指標と同様、ユーザーにとって重要であるだけでなく、検索ランキングにも考慮されるため、Web サイトの成功にとって重要です。

もう、それが何であるか、どのように計算されるか、何が原因で、どのようにテストして対処するかがわかりました。 あなたのレイアウトが永遠に安定しますように、友よ。

WordPress での累積的なレイアウトシフトを防ぐ方法に関する追加のヒントはありますか? 以下のコメント欄でお知らせください。