サイトのCLSに関する問題でお困りですか？そもそも、CLSとは何なのかご存知でしょうか？
Cumulative Layout Shift（「累積レイアウトシフト」の意味）、略してCLSは、Googleの検索ランキング指標であるCore Web Vitalsを構成する測定値の1つです。
一言で言えば、ウェブページのコンテンツがどれほど「意図せず」動いてしまったかを測定するもの。CLSの数値が高いほど、ユーザー体験の質が下がることを意味し、サイトのSEOに悪影響を与える可能性があります。
この記事では、CLSについて知っておくべきこと、そしてWordPressサイト（およびウェブ全般）に与える影響についてご説明します。
CLSとは
CLSとは、サイトの閲覧時に、ページのレイアウトにどれだけずれが生じたかを数値化したものです。標準化されたパフォーマンステストAPIであるLayout Instability APIによって測定されます。
CLS、LCP（Largest Contentful Paint）およびFID（First Input Delay）は、GoogleのCore Web Vitalsを構成する3つの指標です。
Cumulative Layout Shift（CLS）についての理解を深めるため、まずはレイアウトシフトについてご説明します。
レイアウトシフトとは、サイト上のコンテンツがずれてしまう（シフトする）現象です。
技術的に説明すると、2つのフレームの間で、ビューポートに表示されている要素の開始位置が変化しています。
よくある例としては、テキストブロックを閲覧している途中で、読み込みが遅れた広告が突然表示され、テキストコンテンツが画面下に押し出されてしまうことがあります。
Googleがこれをわかりやすく画像で説明しています。
レイアウトシフトという言葉に馴染みがない方でも、日々ブラウジングを行なっていれば、ほぼ間違いなくこの現象に遭遇した経験があるはずです。
また、一度の訪問でレイアウトシフトが複数回発生することもあります。そのため、CLSは、ページ上のレイアウトシフトの総量を測定して、全体像を把握します*。
*正確な測定方法は、Googleがいくつか変更を加えた後、やや専門的になっていますが、依然として基本の考え方は同じです。詳細についてはこちらをご覧ください。
CLS値の高さが問題となる理由
CLSの数値が高いと、サイトのユーザー体験に悪影響が出ている可能性があります。
サイト訪問者にとってストレスになるだけでなく、最悪の場合は、訪問者が望んでいない行動を促してしまうこともあります。
例えば、「キャンセル」をクリックしようとしたのに、その瞬間にレイアウトシフトによってボタンの位置がずれてしまい、誤って「確定」をクリックしてしまった…など。
さらに、CLSの数値が高いと、ユーザー体験だけでなくサイトの検索順位にも影響します。
Googleのページエクスペリエンスアップデート（2021年8月に展開終了）では、Core Web VitalsがSEOの順位決定要因の1つとされています。つまり、Core Web Vitalsの指標であるCLSは、サイトの検索エンジン表示順位を左右する可能性があるということです。
サイトのCLSを改善することで、サイト訪問者と検索エンジンの両方にとって良い結果をもたらします。
では、そもそもなぜCLSの問題が生じるのでしょうか。
CLSの問題が生じる原因
レイアウトシフトが生じる一般的な原因には、以下が挙げられます。
- 画像、インラインフレーム、動画、その他の要素の埋め込みにサイズが設定されていない
- 独自に指定したフォントの読み込みの問題（指定したフォントを読み込む際に、テキストが表示されなくなったり、サイズが変わったりすることがある）
- レスポンシブ広告（Google AdSenseなど）をさまざまなサイズで配信している（適切な広告用スペースが確保されていない）
- プラグインでコンテンツを動的に注入している（Cookieの使用同意、リードジェネレーションフォームなど）
- アニメーションにCSSのTransformプロパティを使用していない
各項目と一般的な解決方法は、この記事の後半で詳しくご紹介します。
CLSの測定方法とおすすめテストツール
CLSの数値を測定するツールはいくつかあります。
CLSは、ウェブページ監査ツールであるLighthouseの監査対象の一部であり、Lighthouseを採用した速度テストツールの結果には、CLSの数値が含まれます。PageSpeed Insights、GTmetrix、Google Chrome デベロッパーツールなどがその一例で、その他にも多数、人気のテストツールが存在しています。
以下、特におすすめのテストツールをご紹介します。
PageSpeed Insights
PageSpeed Insightsには、2つのデータソースがあり、サイトのレイアウトシフトの状態を評価するのに非常に役立ちます。
- フィールドデータ─Chrome UXレポートの実際のユーザーデータ（サイトがレポートの対象となるのに十分なトラフィックがある前提）。実際の訪問者のCLSデータを確認可能。Googleが使用しているランキングシグナルのデータでもある。
- ラボデータ─Lighthouseが収集したシミュレーションテストデータ（PageSpeed Insightsがパフォーマンス分析レポートの生成に使用）
また、タブを切り替えると、PCとモバイル端末別のデータも確認できます。
注意）ラボデータは、ページ読み込み中に発生したレイアウトシフトのみを測定します。ページ読み込み後に発生するレイアウトシフトがある場合は、フィールドデータの結果の方が数値が高くなることがあります。
Google Chrome デベロッパーツール
Chromeのデベロッパーツールには、CLSのスコア測定とサイトで発生しているレイアウトシフトのデバッグの両方に役立つ機能があります。
まずは、Lighthouseの監査を実行して、サイトのCLSスコアを確認しましょう。手順は以下の通り。
- Chromeのデベロッパーツールを開く
- 「Lighthouse」タブを選択
- テストを設定
- 「Analyze page load（ページ読み込みを解析）」ボタンをクリックしてテストを実行
しばらくすると、通常のLighthouse監査インターフェース（PageSpeed Insightsに似たもの）が表示されます。
Chromeのデベロッパーツールでは、レンダリング機能によってCLSを詳しく解析することができます。これによって、サイト内の個々のレイアウトシフト領域を表示することができるため、デバッグに有用です。手順は以下の通り。
- Chromeのデベロッパーツールのインターフェース右上にある縦三点リーダーをクリック
- 「More tools（その他のツール）」＞「Rendering（レンダリング）」を選択すると、新規インターフェースが表示される
- 「Layout Shift Regions（レイアウトシフト領域）」にチェックを入れる
テストしたいページを再読み込みすると、レイアウトのずれた部分が青いボックスで表示されます。この青いボックスは、実際のページではコンテンツの読み込み中に表示され、シフトが終了すると非表示になります。
ボックスが消えるのが速すぎてうまく確認できない場合には、「Performance」タブでサイトの速度を落として、フレームごとに読み込みを確認することができます。
Google Search Console
Google Search Consoleでは、CLSを測定するためのラボテストは実行できませんが、Chrome UXレポートで測定されたサイトのCLSの問題を簡単に特定することができます。
Google Search Consoleを使用するメリットは、ページごとではなく、サイト全体の問題をすぐに確認できることです。
サイト上の潜在的なCLSの問題は、以下の手順で確認可能です。
- Google Search Consoleにアクセスする（まだサイトを検証していない場合は、Google Search Consoleを使ったサイトの検証方法を参照してください）
- 「エクスペリエンス」の「ウェブに関する主な指標」を選択
- 分析したい内容に応じて、「モバイル」または「PC」の横にある「レポートを開く」をクリック
CLSの問題が見られるURLがあると、この画面に表示されます。
注意）サイトの月間アクセス数がChrome UXレポートの対象となる件数を下回る場合は、データは表示されません。
Layout Shift GIF Generator
Layout Shift GIF Generatorを使えば、その名の通り、サイト上のレイアウトシフトのGIFを生成して、どのコンテンツに問題があるかを正確に把握することができます。また、メインの機能ではないものの、CLSスコアも確認可能です。
テストしたいURLを貼り付けて、「MOBILE」または「DESKTOP」のどちらかを選択するだけでOKです。「GENERATE」をクリックすると、サイトのGIFが生成され、ずれが生じている要素が緑色で表示されます。
具体的にどの要素がずれて、CLSの数値を上げているかを確認することで、CLSの改善が容易になります。
CLSの理想的な数値
GoogleのCore Web Vitalsによると、CLSのスコアは0.1以下が理想的とされています。
CLSが0.1～0.25の場合は要改善、0.25を超えると不良とみなされます。
以下は、GoogleのCore Web Vitalsの公式サイトに掲載されているCLSスコアを図で表したものです。
CLSの改善方法
CLSについて理解したところで、次にWordPressサイトのCLSを改善する実践的な方法を見ていきましょう。
今回は、WordPressサイトを想定してご説明していきますが、すべて他のウェブサイト構築ツールでも適用可能です。
画像は必ずサイズを指定する
レイアウトシフトの主な原因の1つは、読み込みに時間のかかる画像です。特に、遅延読み込みなどの手法を使っている場合には注意が必要です。
これを改善するためには、画像の埋め込み時にサイズを指定してください。すると、画像が読み込まれる前からブラウザで適切なスペースが確保されるため、コンテンツが後からずれることがなくなります。
WordPressのエディター（GutenbergブロックエディターまたはTinyMCEエディター）で画像を埋め込む場合は、サイズは自動で設定されます。
また、ElementorやDivi、Beaver Builderなど、人気のページビルダープラグインでも同様です。
ただし、プラグインにコンテンツを追加する場合や、子テーマのテンプレートファイルを編集する場合など、自分でコードを記述して画像を埋め込む際には、問題が発生する可能性があります。
以下は、画像埋め込みの基本的なHTMLコードです。
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
サイズを指定するには、これにheightとwidthのパラメータを追加します。例えば、600x300pxの画像を埋め込む場合は、以下のようになります。
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
多くのWordPressパフォーマンスプラグインには、WP RocketやPerfmattersにある画像のサイズを設定する機能のように、設定を自動化する機能が組み込まれています。
動画、インラインフレーム、その他の要素の埋め込みも必ずサイズを指定する
画像と同様、動画、インラインフレーム、その他の要素を埋め込む際にも、そのサイズを指定してください。
これについても、ほとんどのサイトの埋め込みツールで自動化されています。
例えば、YouTube動画の埋め込みコードには、以下のようにサイズが設定されています。
その他多くのプラットフォームも同様です。
ただし、埋め込みコードに高さと幅が指定されていない場合は、自分で入力しましょう。
フォントの読み込みを修正・最適化する
フォントの読み込みと最適化については、以下2つの問題が原因で、レイアウトシフトが生じる可能性があります。
- テキストが一瞬表示されない（FOIT）─ページを表示する際、テキストコンテンツの読み込みが遅れ、テキストが瞬間的に見えなくなる現象。指定フォントが読み込まれると、テキストが突然表示されます（読み込み済みのコンテンツがずれてしまう可能性がある）。
- テキストが一瞬代替フォントで表示される（FOUT）─設定したフォントが読み込まれるまでの間、テキストコンテンツがスタイルの適用されていないシステムフォントで読み込まれる現象。その後指定したフォントが読み込まれると、テキストがそのフォントに変わります（フォントのサイズと間隔が異なる場合は、コンテンツにずれが生じる可能性がある）。
この問題を改善するには、フォントの読み込み方法の最適化が必要になります。これは、パフォーマンス改善にもつながります。
フォントをローカルにインストールして事前読み込みを設定する
フォントをローカルにインストールして、事前読み込みを設定することで、訪問者のブラウザに指定したフォントファイルの読み込みを優先させるように指示することができます。
フォントファイルが他の要素よりも先に読み込まれることで、ブラウザによってレンダリングが行われる前に、フォントファイルが読み込まれた状態になり、FOUTやFOITの問題を回避することができます。
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フックとCode Snippetsのようなプラグインで実装可能です。
font-displayをoptionalまたはswapに設定する
CSSのfont-displayで、サイト上のフォントのレンダリング動作を管理して、FOITを防ぐことができます。
これで、指定のフォントがまだ読み込まれていない場合に、フォールバックフォント（指定フォントを読み込む間使われる予備のフォント）が使用できるようになります。
CLSの改善には、以下のいずれかを使用してください。
- swap─指定フォントの読み込み中はフォールバックフォントを使用し、読み込みが完了したら切り替える設定
- optional─訪問者の接続速度に応じて、指定フォントを読み込むかどうかをブラウザに判断させる設定
swapを選択すると、読み込みの完了後、必ずフォールバックフォントが指定フォントに変更されます。
swapでFOITは回避できるものの、FOUTが生じる可能性があります。FOUTの発生を最小限に抑えるには、指定フォントとできる限り同じ間隔を持つフォールバックフォントを使用すること。これによって、フォントが変わってもレイアウトのずれを防ぐことができます。
optionalを選択すると、ブラウザでの指定フォントの読み込みが100ミリ秒までに制限されます。100ミリ秒以内に指定フォントを読み込めない場合には、ブラウザの判断でフォールバックフォントが読み込まれ、そのページビューでは指定フォントが適用されなくなります（次回以降のページビューでは、それまでにフォントファイルがダウンロードされキャッシュされ、指定フォントが表示される確率が高い）。
optionalでFOITとFOUTの両方を回避することができますが、この選択肢のデメリットは、初回のページビューで指定フォントが適用できない可能性があることです。
CSSの扱いに慣れていれば、子テーマのスタイルシートにあるfont-displayプロパティを直接編集してください。
CSSの編集に馴染みがない場合は、以下のようなプラグインを利用しましょう。
- Swap Google Fonts Display（Google Fontsのfont-displayのswap設定が簡単に行える）
- Asset CleanUp（無料版ではGoogle Fonts、Pro版では任意のローカルフォントの設定が可能）
- Perfmatters（Google Fonts対応）
また、Elementorにもこの機能が内蔵されています。「Elementor」＞「設定」＞「高度な設定」に移動し、「Google Fonts Load」のドロップダウンメニューから「Swap」または「Optional」を選択してください。
システムフォントを採用するという手も
事前読み込み設定とフォント表示の話がよくわからないという方には、シンプルな解決策として、指定フォントにシステムフォントを使うこともできます。
デザインに制限が出てしまうことにはなりますが、CLSの問題、FOITおよびFOUTをすべて解決することができます。さらに、サイトの表示速度も格段に上がります。
詳しい方法については、Brian Jackson氏によるWordPressのシステムフォント使用方法をご覧ください。
広告用スペースを確保する（ディスプレイ広告を使用している場合）
画像や動画の埋め込みにスペースを確保するのと同じ考え方で、ディスプレイ広告を使用する際には、コードで広告用のスペースを確保しましょう。
特に、ディスプレイ広告は要注意。何らかの入札技術が使われている場合は、ディスプレイ広告の表示が遅くなる傾向にあります。これは、入札技術が動作し、表示する広告の把握が必要になるためです。
さらに、動的な広告を配信している場合、上の入札技術の問題に加えて、AdSenseによってさまざまなサイズの広告が読み込まれることから（したがって広告サイズを事前に確認できないことが多い）、AdSenseの自動広告も問題になり得ます。
MediavineやAdThriveなどの一般的なディスプレイ広告ネットワークを利用していれば、広告のレイアウトシフトを防ぐ機能があるはずです。例えば、Mediavineの「Ad Settings（広告設定）」を開くと、「Optimize Ads for CLS（CLSに広告を最適化）」を有効化できます。
AdSenseをCLSに最適化する方法はもう少し複雑になります。
一般的な方法の1つとして、各広告ユニットの周囲に<div>を追加し、CSSのmin-height CSSを使って、高さの最小値を指定することができます。あるいは、メディアクエリを使用して、ユーザーのデバイスに応じて高さの最小値を変更することも可能です。
Googleは、高さの最小値をできる限り最大広告サイズと同じに設定することを推奨しています。小さい広告が配信される際には、スペースが無駄になる可能性がありますが、レイアウトのずれを防ぐにはベストな解決策です。
AdSenseは親オブジェクトからCSSクラスを排除されることが多いため、ラッパー要素を設定するときは、クラスではなくCSS IDの使用をお勧めします。
以下、CSSコード例です。
AdSenseの埋め込みは、以下のようになります。
以下のように、サイトが空白であっても、フロントエンドに広告用のスペースが確保されます。
プラグインでコンテンツを動的に注入する際の注意事項
多くのWordPressサイトでは、Cookieの使用同意、関連コンテンツ、メールのオプトインフォームなどの機能にコンテンツが動的に注入されています。
ここでも、レイアウトシフトに気をつけましょう。
ウェブデザインのベストプラクティスとしては、ユーザーが特定のインタラクション（ボタンのクリックなど）を行わない限りは、既存のコンテンツの上にコンテンツを挿入しないことです。
例えば、Cookieの使用同意に関する通知を表示する際、ページの最上部に挿入することは避けるのが賢明です（Cookieの使用同意に関するバナーのスペースを事前に確保している場合を除く）。
ページの上部ではなく、下部に通知を表示することで、メインのコンテンツが下にずれることはなくなります。
動的コンテンツが問題を引き起こしているかどうかを確かめるには、先ほどご紹介したツール（Layout Shift GIF Generatorなど）を活用してください。
特定のプラグインのコンテンツがレイアウトシフトを引き起こしていることがわかれば、そのプラグインの設定を変更するか、別のプラグインを使用することをお勧めします。
例えば、Cookie使用同意プラグインの中には、レイアウトシフトを考慮したものも存在するため、問題があれば、違うプラグインを試してみてください。
プラグインの動作をさらに詳しく分析するには、アプリケーションパフォーマンス監視ツールを使用しましょう。Kinstaのお客様であれば、MyKinstaでAPMツールを無料でご利用いただけます。他にも、さまざまなAPMツールがあります。
プラグインは、Kinstaのステージングサイトまたはローカル開発ツールのDevKinstaでテストすることをお勧めします。
アニメーションにCSS Transformプロパティを使用する
サイトでのアニメーションの使用も、レイアウトシフトを引き起こす原因となり得ます。
これを回避するには、アニメーションにCSSのtransformプロパティを使用してください。
- heightやwidthの代わりにtransform: scale()を使用
- 要素を移動する場合は、top、bottom、right、leftの代わりにtransform: translate()を使用
これは高度な操作になるため、独自のCSSを追加していなければ、ほとんど必要になることはありません。詳細については、GoogleのCLSとアニメーションとトランジションに関するページをご確認ください。
まとめ
サイトのCLS（累積レイアウトシフト）値が高い場合は、サイト訪問者のユーザー体験を向上するため、そしてGoogleでの検索順位を最適化するために、対策を講じることが重要です。
最も一般的な原因は、画像/埋め込み用のサイズが指定されていない、そしてフォントの読み込みに関する問題の2つです。この2つを解決すれば、CLSのスコアを改善することができます。
広告、動的コンテンツ、アニメーションを扱っている場合には、さらに掘り下げる必要があるかもしれません。自分で最適化を行うのが不安であれば、WordPressに強いWeb制作会社やフリーランサーの力を借りることも検討してみてください。
Core Web Vitalsに関する詳細についてはこちらをご覧ください。
また、Core Web Vitalsで評価されるパフォーマンスに優れたWordPressサイトの構築を後押しするホスティングサービスをお探しなら、KinstaのWordPress専用マネージドホスティングをご検討ください。すべてのプランに無料のサイト移行サービスが付帯しています。
コメントを残す