累積レイアウトシフトの説明: スコアを修正する方法

公開: 2023-01-05

Web サイトで累積レイアウトシフトの問題に悩まされていませんか? それとも、Cumulative Layout Shift が何を意味するのかわからないですか?

Cumulative Layout Shift (略して CLS) は、Google の Core Web Vitals イニシアチブの一部である指標です。

簡単に言うと、ウェブページのコンテンツが「予期せず」どの程度変化したかを測定します。高い CLS スコアは、ユーザーエクスペリエンスが低いことを示している可能性があり、サイトの SEO の妨げになる可能性もあります。

この投稿では、Cumulative Layout Shift と、それが WordPress サイト (および一般的な Web) に与える影響について知っておく必要があるすべてのことを学びます。

累積レイアウトシフト (CLS) とは累積レイアウトシフトの意味を説明する

Cumulative Layout Shift は、標準化されたパフォーマンステスト API である Layout Instability API によって測定される、ユーザーの訪問中にサイト上のページが予期せず移動する量の測定値です。

Cumulative Layout Shift (CLS) は、Largest Contentful Paint (LCP) および First Input Delay (FID) とともに、Google の Core Web Vitals イニシアチブの 3 つの指標の 1 つです。

累積レイアウトシフトの意味を理解するには、レイアウトシフト全般について説明することが重要です。

サイトのコンテンツが予期せず「移動」または「移動」すると、レイアウトシフトが発生します。

または、技術的に言えば、ビューポートに表示されている要素が 2 つのフレーム間で開始位置を変更したときです。

一般的な例の 1 つは、テキストブロックを読んでいる最中に、読み込みが遅い広告が突然表示され、テキストコンテンツがページの下に押し出されてしまうことです。

これが起こっていることを示す Google の別の画像の例を次に示します。

その名前を知らなくても、Web をブラウジングしていると、ほぼ確実にレイアウトの変化に遭遇したことがあります。

1 回の訪問で、複数の個別のレイアウトシフトイベントが発生する可能性があります。そのため、Cumulative Layout Shift メトリクスは、ページ上の予期しないレイアウトシフトの合計量を測定することにより、全体像を把握することを目的としています*。

*正確な測定値は、Google によるいくつかの変更の後、もう少し技術的になりますが、それは依然として基本的な考え方です。 核心的な詳細に興味がある場合は、ここで読むことができます。

Web サイトで累積レイアウトシフトの問題に悩まされていませんか? このガイドで、スコア (および SEO!) を向上させる方法を学びましょう。

累積的なレイアウトシフトが悪いのはなぜですか?

Cumulative Layout Shift が良くない主な理由は、サイトのユーザーエクスペリエンスが低下することです。

せいぜい、それはあなたの訪問者にとって少し迷惑です. 最悪の場合、訪問者が実行したくないアクションを実行する可能性があります。

たとえば、ユーザーが [キャンセル] をクリックしたいのに、レイアウトシフトによってボタンの位置がクリックされたときに誤って [確認] をクリックしてしまった場合を想像してください。

悪い累積レイアウトシフトスコアは、人間の訪問者のエクスペリエンスに影響を与えるだけでなく、サイトの検索エンジンランキングの足かせにもなります。

Google のページエクスペリエンスアップデート (2021 年 8 月にロールアウトが終了) の時点で、Google は Core Web Vitals を SEO ランキング要素の 1 つとして使用しています。 Cumulative Layout Shift は Core Web Vitals の一部であるため、サイトの検索パフォーマンスに影響を与える可能性があります。

基本的に、サイトの Cumulative Layout Shift の問題を修正すると、人間の訪問者と検索エンジンの両方にとってサイトが改善されます。

では、何が累積的なレイアウトシフトを引き起こしているのでしょうか? 次にそれについて説明しましょう…

累積レイアウトシフトの原因は？

レイアウトシフトの最も一般的な原因について簡単に説明します。

画像、iframe、動画、その他の埋め込みのサイズを設定しない。
カスタムフォントの読み込みに関する問題。カスタムフォントが読み込まれると、テキストが見えなくなったり、サイズが変わったりする可能性があります。
さまざまなサイズのレスポンシブ広告 (AdSense など) を配信する (これらの広告用のスペースを予約しない)。
プラグインを使用してコンテンツを動的に挿入する (Cookie 同意通知、リード生成フォームなど)。
CSS Transform プロパティなしでアニメーションを使用する。

これらの問題については、この投稿の後半でさらに詳しく説明し、一般的な問題のそれぞれを修正する方法を示します。

累積的なレイアウトシフトを測定する方法: 最適なテストツール

サイトの累積レイアウトシフトスコアをテストするために使用できるツールは多数あります。

Cumulative Layout Shift は Lighthouse 監査の一部であるため、監査の一部として Lighthouse を使用する速度テストツールには CLS データが含まれます。これには、PageSpeed Insights、GTmetrix、Chrome 開発者ツール、およびその他の多くの一般的なテストツールが含まれます。

ここでは、その有用性が際立っている累積レイアウトシフトテストツールの一部を紹介します。

PageSpeed インサイト

PageSpeed Insights は、次の 2 つのデータソースを提供するため、サイトのレイアウトシフトの状態を評価するための最も有用なツールの 1 つです。

フィールドデータ– Chrome UX レポートからの実際のユーザーデータ (レポートに含めるのに十分なトラフィックがサイトにあると仮定します)。これにより、実際の人間の訪問者の実際の累積レイアウトシフトデータを確認できます。これは、Google がランキングシグナルとして使用するデータでもあります。
ラボデータ– Lighthouse によって収集されたシミュレートされたテストデータ (これは、PageSpeed Insights がパフォーマンス分析レポートを生成するために使用するものです)。

タブを切り替えることで、デスクトップとモバイルの両方のデータを表示することもできます。

注– ラボデータは、ページの読み込み中に発生するレイアウトの変化のみを測定できるため、ページの読み込み後にレイアウトの変化が発生した場合、実際のユーザーの結果はわずかに高くなる可能性があります。

Chrome デベロッパーツール

Chrome デベロッパーツールには、CLS の測定と、サイトで発生している個々のレイアウトシフトのデバッグの両方に役立つリソースがいくつか用意されています。

まず、Lighthouse 監査を実行して、サイトの CLS スコアを確認できます。方法は次のとおりです。

Chrome デベロッパーツールを開きます。
[灯台] タブに移動します。
テストを構成します。
[ページ読み込みの分析] ボタンをクリックして、テストを実行します。

少し待つと、通常の Lighthouse 監査インターフェースが表示されます (これは PageSpeed Insights によく似ています)。

ただし、Chrome 開発者ツールでは、レンダリング分析を使用して CLS をより深く掘り下げることもできます。これにより、サイト内の個々のレイアウトシフト領域を強調表示できるため、デバッグに役立ちます。

方法は次のとおりです。

Chrome デベロッパーツールインターフェイスの右上隅にある「3 つのドット」アイコンをクリックします。
More Tools → Renderingを選択すると、下部に新しいインターフェイスが開きます。
Layout Shift Regionsのチェックボックスをオンにします。

ここで、テストするページをリロードすると、Chrome は青いボックスを使用してレイアウトシフトのある領域を強調表示します。これらのハイライトは、コンテンツの読み込み中に実際のページに表示され、シフトが完了すると消えます。

ハイライトの発生が速すぎて追えない場合は、サイトの速度を落として、[パフォーマンス] タブを使用してフレームごとに読み込まれるのを確認できます。

Googleサーチコンソール

Google Search Console では、ラボテストを実行して Cumulative Layout Shift を判断することはできませんが、Chrome UX レポートで測定されるように、サイトの Cumulative Layout Shift に関する問題を簡単に確認できます。

他のツールよりも Google Search Console を使用する利点は、ページごとにテストするのではなく、サイト全体の問題をすばやく確認できることです。

サイトの潜在的な問題を表示する方法は次のとおりです。

Googleサーチコンソールにアクセスします。サイトをまだ確認していない場合は、Google Search Console を確認する方法に関するガイドに従ってください。
[エクスペリエンス] の下にあるCore Web Vitalsレポートを開きます。
分析対象に応じて、[モバイル]または [デスクトップ]の横にある [レポートを開く]をクリックします。

該当する場合、Google は累積レイアウトシフトスコアに問題のある URL を強調表示します。

Search Console で CLS に問題のある URL を表示する方法。

注– ここにデータが表示されるのは、Chrome UX レポートに含めるのに十分な月間トラフィックがサイトにある場合のみです。

レイアウトシフトGIFジェネレーター

名前が示すように、レイアウトシフト GIF ジェネレーターは、サイトのレイアウトシフトの GIF を生成するため、どのコンテンツが問題を引き起こしているかを正確に確認できます。ツールの主な目的ではありませんが、スコアも表示されます。

テストする URL を追加して、モバイルかデスクトップかを選択するだけです。次に、変化している正確な要素を示す緑色のハイライトでサイトの GIF を生成します。

どの要素が変化し、Cumulative Layout Shift スコアに寄与しているかを確認することで、サイトのスコアを改善する際にどこに焦点を当てる必要があるかを正確に知ることができます。

良い累積レイアウトスコアとは?

Google の Core Web Vitals イニシアチブによると、適切な Cumulative Layout Shift スコアは0.1 以下です。

累積レイアウトシフトスコアが 0.1 ～ 0.25 の場合、Google はそれを「要改善」と定義します。

また、累積レイアウトシフトスコアが 0.25 を超える場合、Google はそれを「悪い」と定義します。

これらのスコアを視覚的に示す Google の Core Web Vitals Web サイトのグラフィックを次に示します。

WordPress (または他のプラットフォーム) での累積的なレイアウトシフトを修正する方法

Cumulative Layout Shift で何が起こっているかを理解したところで、WordPress で Cumulative Layout Shift を修正する方法に関するいくつかの実用的なヒントに移ります。

これらのヒントは WordPress の観点からのものですが、すべて普遍的なものであり、他の Web サイト構築ツールにも適用できます。

画像のサイズを常に指定する

レイアウトシフトの最も一般的な原因の 1 つは、特に遅延読み込みなどの戦術を使用している場合に、画像の読み込みが遅れてコンテンツが移動することです。

これを避けるために、画像を埋め込むときにコードで画像のサイズを指定できます。そうすれば、画像がまだ読み込まれていない場合でも、訪問者のブラウザーはそのスペースを予約します。つまり、画像がコンテンツを移動する必要はありません。

WordPress エディター (Gutenberg ブロックエディターまたは従来の TinyMCE エディター) を介して画像を埋め込む場合は、WordPress が自動的に行うため、画像のサイズを手動で指定する必要はありません。

同じことが、Elementor、Divi、Beaver Builder などの一般的なページビルダープラグインにも当てはまります。

ただし、プラグインにコンテンツを追加したり、子テーマのテンプレートファイルを編集したりする場合に、独自のコードを使用して手動で画像を埋め込む場合に問題が発生する可能性があります。

基本的な画像埋め込みの HTML コードは次のようになります。

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

寸法を指定するには、高さと幅のパラメーターを追加できます。 600x300px の画像の例を次に示します。

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

多くの WordPress パフォーマンスプラグインには、WP Rocket や Perfmatters のAdd Missing Image Dimensions機能など、これを自動化する機能も含まれています。

動画、iframe、およびその他の埋め込みのサイズを常に指定する

画像と同様に、ビデオ、iframe、またはその他の埋め込みを追加するときはいつでも寸法を指定する必要があります。

ほとんどの Web サイトの埋め込みツールは、埋め込みのサイズを自動的に指定する必要があります。

たとえば、YouTube の埋め込みコードを見ると、ディメンションが含まれていることがわかります。

同じことが他の多くのサービスにも当てはまります。

ただし、埋め込みコードで高さと幅が指定されていない場合は、これらの寸法を埋め込みコードに手動で追加できます。

フォント読み込みの修正と最適化

フォントの読み込みと最適化に関する問題は、次の 2 つの潜在的な問題によるレイアウトシフトのもう 1 つの一般的な原因となる可能性があります。

目に見えないテキストのフラッシュ (FOIT) – ページは、テキストコンテンツがまったく表示されずに最初に読み込まれます。カスタムフォントが読み込まれると、テキストが突然表示されます (既存のコンテンツが移動する可能性があります)。
スタイルなしテキストのフラッシュ (FOUT) – テキストコンテンツは、システムフォント (スタイルなし) を使用して読み込まれます。カスタムフォントが読み込まれると、テキストがそのカスタムフォントに変更されます。これにより、テキストのサイズと間隔が異なる可能性があるため、コンテンツがシフトする可能性があります。

これらの問題を回避するには、サイトにフォントをロードする方法を最適化する必要があります (これは、サイトのパフォーマンスにもメリットがあります)。

フォントをローカルでホストし、フォントをプリロードする

フォントをローカルでホストし、プリロードを使用することで、訪問者のブラウザーにカスタムフォントファイルの読み込みを優先するように指示できます。

他のリソースの前にフォントファイルを読み込むことで、ブラウザーがコンテンツのレンダリングを開始したときにフォントファイルが既に読み込まれていることを確認できます。これにより、FOUT と FOIT の問題を防ぐことができます。

WordPress でフォントをローカルにホストする方法については、WordPress でフォントをローカルにホストするための完全なガイドをご覧ください。

そこから、フォントのプリロードを手動またはプラグインを使用して設定できます。ほとんどのパフォーマンスプラグインには、WP Rocket、Perfmatters、Autoptimize などのフォントをプリロードするオプションが含まれています。

Google Fonts を使用している場合は、無料の OMGF プラグインを使用してフォントをローカルでホストし、プリロードすることもできます。

サイトの<head>セクションにコードを追加して、手動でフォントをプリロードすることもできます。

コードの例を次に示します。プリロードするフォントファイルの実際の名前/場所に置き換えてください。

<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>

WordPress の子テーマを使用して直接追加するか、wp_head フックとコードスニペットなどのプラグインを使用して挿入できます。

Font-Display を Optional または Swap に設定する

CSS の Font-Display プロパティを使用すると、サイト上のフォントのレンダリング動作を制御し、FOIT を回避できます。

ダウンタイムや WordPress の問題に悩まされていませんか? Kinstaは、時間を節約するために設計されたホスティングソリューションです! 私たちの機能をチェックしてください

基本的に、カスタムフォントがまだ読み込まれていない状況で代替フォントを使用できます。

CLS に対処するために使用できる主なオプションは 2 つあります。

スワップ– カスタムフォントの読み込み中にフォールバックフォントを使用し、フォントが読み込まれるとカスタムフォントに変更します。
オプション- 訪問者の接続速度に基づいてカスタムフォントを使用するかどうかをブラウザーが決定できるようにします。

Swapを使用すると、ブラウザが読み込まれると、常にカスタムフォントに変更されます。

スワップは FOIT を完全に解決しますが、FOUT につながる可能性があります。これを最小限に抑えるには、フォールバックフォントがカスタムフォントと同じ間隔を使用するようにする必要があります (少なくとも可能な限り)。そうすれば、フォントスタイルが変わっても、間隔が同じになるので、レイアウトがずれることはありません。

Optionalを使用すると、ブラウザーはカスタムフォントの読み込みに 100 ミリ秒かかります。ただし、それまでにカスタムフォントが利用できない場合、ブラウザはフォールバックフォントをそのまま使用し、そのページビューのカスタムフォントに変更することはありません (その後のページビューではカスタムフォントが使用されます。ファイルはそれまでにダウンロードされ、キャッシュされています)。

Optionalは FOIT と FOUT の両方を解決できますが、欠点は、訪問者が最初のページビューでフォールバックフォントに固執する可能性があることです。

CSS の操作に慣れている場合は、子テーマのスタイルシートで Font-Display プロパティを手動で編集できます。

それが苦手な場合は、役立つプラグインをいくつか見つけることもできます。

Swap Google Fonts Display – Google Fonts の Font-Display Swap を簡単に有効にします。
アセットクリーンアップ – 無料の Google フォントと、Pro バージョンのカスタムローカルフォントをサポートします。
Perfmatters – Google Fonts の機能を提供します。

Elementor を使用している場合、Elementor にはこれを行うための組み込みオプションも含まれています。 Elementor → 設定 → 詳細設定に移動します。次に、好みに応じて、 Google Fonts Loadドロップダウンを Swap または Optional に設定できます。

複雑すぎる？システムフォントスタックを検討してください。

プリロードと Font-Display に関するこのすべての話が少し混乱している場合、1 つの簡単な修正方法は、カスタムフォントスタックの代わりにシステムフォントスタックを使用することです。

これによりデザインオプションが制限されますが、Cumulative Layout Shift フォントの問題、FOIT、および FOUT は完全に解決されます。さらに、サイトの読み込みを大幅に高速化するのにも役立ちます。

これに興味がある場合は、WordPress でシステムフォントスタックを使用するための Brian のガイドをご覧ください。

広告用のスペースを確保する (ディスプレイ広告を使用する場合)

ディスプレイ広告を使用している場合は、サイトのコードでこれらの広告用のスペースを確保することが重要です。これは、画像、動画、および埋め込み用のスペースを予約するのと同じ考え方に従います。

ただし、ディスプレイ広告については特筆に値します。入札技術を使用している場合、ディスプレイ広告の読み込みが遅れることはよくあることです。これは、入札テクノロジーが機能し、表示する広告を判断するのに時間がかかるためです。

動的な広告スロットがある場合、AdSense 自動広告でも問題になる可能性があります。入札の問題に加えて、AdSense はさまざまなサイズの広告も読み込むためです (そのため、事前に広告のサイズがわからない場合があります)。

Mediavine や AdThrive などの一般的なディスプレイ広告ネットワークを使用している場合は、広告のレイアウトシフトを回避するためのツールがすでに提供されているはずです。たとえば、Mediavine の広告設定エリアを開くと、CLS 向けに広告を最適化するトグルを有効にすることができます。

Cumulative Layout Shift 用に AdSense を最適化するには、少し手間がかかります。

一般的な修正方法の 1 つは、 min-height CSS プロパティを使用して最小の高さを指定する <div> ラッパー要素を各広告ユニットの周りに追加することです。メディアクエリを使用して、ユーザーのデバイスに基づいて最小の高さを変更することもできます。

min-height を可能な限り最大の広告サイズに設定することをお勧めします。これにより、小さい広告が配信されるとスペースが無駄になる可能性がありますが、レイアウトシフトが発生する可能性を排除するための最良のオプションです。

このラッパー要素を設定するときは、クラスではなく CSS ID を使用してください。AdSense は親オブジェクトから CSS クラスを削除することが多いためです。

CSS は次のようになります。

AdSense の埋め込みは次のようになります。

フロントエンドでは、空であっても、サイトがその広告用にスペースを確保していることがわかります。

プラグインでコンテンツを動的に挿入するときは賢く

多くの WordPress サイトは、Cookie 同意通知、関連コンテンツ、電子メールのオプトインフォームなどの機能のためにコンテンツを動的に挿入します。

これは問題ありませんが、レイアウトの変更を引き起こすような方法で行うことは避けるように注意する必要があります。

ここでの優れた Web デザインのベストプラクティスは、ユーザーが特に操作 (ボタンのクリックなど) を行わない限り、既存のコンテンツの上にコンテンツを挿入しないことです。

たとえば、Cookie 同意通知を追加する場合、コンテンツが押し下げられるため、ページの上部に挿入したくありません ( Cookie 同意バナー用のスペースを既に予約していない限り)。 .

代わりに、ページの下部に通知を表示する必要があります。これにより、表示されるコンテンツが下に移動することを回避できます。

動的コンテンツが問題の原因であるかどうかを確認するには、上記の視覚化ツール (例: レイアウトシフト GIF ジェネレーター) を使用できます。

特定のプラグインのコンテンツがレイアウトシフトを引き起こしていることがわかった場合は、そのプラグインの設定を調整するか、別のプラグインに切り替えることを検討できます。

たとえば、一部の Cookie 同意プラグインは、レイアウトの変更に関して他のプラグインよりも優れているため、問題が発生した場合は別のプラグインを試してみる価値があります。

プラグインの動作をさらに深く掘り下げたい場合は、アプリケーションパフォーマンス監視ツールを使用できます。 Kinstaでホストしている場合、KinstaのAPMツールはMyKinstaダッシュボードで無料で利用できます。または、他のAPMツールを見つけることができます.

プラグインのテストを支援するために、Kinsta のステージングサイトまたは DevKinsta ローカル開発ツールを使用することもできます。

可能な限り、アニメーションに CSS Transform プロパティを使用する

サイトでアニメーションを使用している場合、これらがレイアウトシフトのもう 1 つの一般的な原因になる可能性があります。

レイアウトシフトを引き起こすアニメーションの問題を回避するには、他の方法ではなく、アニメーションに CSS Transform 関数を使用する必要があります。

高さと幅のプロパティを使用する代わりに、 transform: scale()を使用します。
要素を移動したい場合は、 top 、 bottom 、 right 、 leftの代わりにtransform: translate()を使用してください

これは技術的なヒントなので、独自の CSS を追加しない限り、これを行う必要はほとんどありません。詳細については、CLS とアニメーション/トランジションに関する Google のページをご覧ください。

(そうではありません) 面白い事実: CLS スコアが高い場合、ユーザーエクスペリエンスが低いことを示している可能性があり、サイトの SEO の妨げになる可能性もあります。ここであなたのものを修正する方法を学びましょう️ クリックしてツイートします

概要

Web サイトの Cumulative Layout Shift スコアが高い場合は、人間の訪問者にとってより良いエクスペリエンスを作成し、Google の検索結果でのサイトのパフォーマンスを最大化するために、それを修正することが重要です。

最も一般的な 2 つの問題は、画像/埋め込みのサイズが見つからないことと、フォントの読み込みに関する問題です。それらを修正すれば、はるかに良いスコアに向かっているはずです。

他のサイトでは、さらに進んで、広告の読み込み、動的コンテンツ、およびアニメーションを掘り下げる必要があるかもしれません. この種の最適化を自分で実装するのに苦労している場合は、WordPress 代理店またはフリーランサーと協力することを検討できます.

Core Web Vitalsの一般的な詳細については、KinstaのCore Web Vitalsガイドをご覧ください。

また、Core Web Vitals でうまく機能する高性能サイトの作成に役立つ WordPress ホストが必要な場合は、Kinsta のマネージド WordPress ホスティングの使用を検討してください。WordPress サイトを無料で移行します!

累積レイアウト シフトの説明: スコアを修正する方法

累積レイアウト シフト (CLS) とは累積レイアウトシフトの意味を説明する

累積的なレイアウト シフトが悪いのはなぜですか?