Tabla de contenidos
Googleを満足させることは不可能です。など、解決すべき課題はあるものの、ずいぶん前に見切りをつけました。 CLS(累積レイアウトシフト）。
累積レイアウトシフト
累積レイアウトシフトは、レイアウトの累積変化量です。この指標が重要なのは、分析を行うからです。 視力安定と、訪問者が予期せぬレイアウト変更を経験する頻度についてです。
簡単に言うと、読み込み中にページの上部にある要素のあらゆる変位を測定するものです。
低いCLSを 達成することは、ページが目に優しく、読み手が重要なナビゲーション要素を見失ったり、その位置を見失ったりするような、煩わしい動きを防ぐのに役立ちます。
CLSが0.1を超えなければ良いユーザーエクスペリエンスとされ、0.25までは改善が必要で、そこから先は悪いスコアとされます。これは、ご存知の通り、いくつかの方法で測定することができます。最も一般的に使用されているのは PageSpeed Insights.
のドキュメントに記載されているように コアウェブ・バイタル例えば、寸法が不明な画像やビデオ、代替フォントよりも大きく表示されたり小さく表示されたりするフォント、サイズが動的に変化するサードパーティの広告やウィジェット、アニメーション効果などが原因です。
逆説的だが、CLSをブラッシュアップしがちな要素にGoogle Adsenseの広告がある。特に オートアドオプション（非推奨）。読み込み速度まで完全にダメにするケースもある。
スクロールを検出する方法
ここで、問題の核心は、具体的に何をどう探せばいいのか、ということです。まあ、ロード中にサイズが変わったり、スクロールしたりするものなら何でもいいんですけどね。
さて、Adsenseの問題を解決しようとしている今、CLSを太らせている可能性のある残りの要素を見てみましょう。さまざまな方法がありますが、ここではそのいくつかをご紹介します。
を見てみると
最も素朴な方法は、目視による単純な観察です。目立つ動きであればすぐにわかりますが、あまり目立たない動きで、じっくりと観察する必要があるものもあります。
Search Consoleで
GSCの「トップウェブメトリクス」では、CLSやLCPの問題があるURLのリストを取得できるので、それを使って一つずつ詳しく見ていくことができます。
累積レイアウトシフトデバッガ
累積レイアウトシフトデバッガ。は、解析したいURLを入力すると、モバイル版とデスクトップ版のデザイン変更をすべて表示したアニメーションGIFを作成するサイトです。
Chromeのエンジニアによって作られたこのツールは、CLSの問題を発見するための最も有用なツールの一つです。
ページ上のほとんどのテキストがハイライトされている場合、フォントがレイアウトのずれを引き起こしている可能性があります。
レイアウトシフトGIFジェネレーター
レイアウトシフトGIFジェネレーターは同じことをする別のウェブサイトで、モバイル版とデスクトップ版の変位を示すgifを生成しています。結果を比較するために、試してみてはいかがでしょうか。それぞれのツールの測定値には常にわずかな違いがあり、ある時点で他のツールでは表示できない、あるいは検出できないものを見つけることができるかもしれません。
CLSビジュアライザー
このツールは、最もシンプルでありながら、私が最もうまくシフトを捉えることができたツールです。
CLSビジュアライザー は非常に便利な拡張機能で、その名の通り、どの要素がどのように変化しているかを正確に表示することで、ページの累積レイアウトシフトメトリックを視覚化するのに役立ちます。なお、このツールは、お使いのデバイス、ブラウザ、画面解像度、接続形態に応じたデータを提供するラボツールでもあります。
拡張機能を有効にすると、CLS測定値がリストで表示され、それぞれをクリックすると、その原因となる要素のアニメーションが赤く表示されます。
この拡張機能のおかげで、多くのページでCLSゼロを達成することができました。原因となるものは非常に多いので、焦らずurlを見直すためにインストールしたままにしていますが。
Chrome Dev Toolsでサイトの読み込み速度を変更する
Chrome Dev Toolsには興味深い可能性があります。このCLSというものを手に入れるために最も役に立つのが、ページの読み込み帯域を減らすオプションで、デザインの変更がいつ発生し、どの要素がそれに寄与しているかを明確に把握することができます。
これを行うには、ブラウザでChrome Dev Toolsを開き、右クリック/あなたのウェブサイト上で検査し、ネットワークで画像に示すWifiアイコンを探して、その横にあなたがカスタム速度を追加することができますドロップダウンを見つけるでしょう。
新規にプロファイルを作成し、100Kb以下を追加して「スローモーション」でテストしてください。
インターネットが遅かった頃のスピードで閲覧することで、読み込み中に何が問題になっているのか、より簡単に特定できるようになりました。
レンダリング
Chrome Dev ToolsのLayout Shift Regionsでは、リアルタイムでページを閲覧しながら、レイアウトの変更を青くハイライトして確認することもできます。
以下は、レイアウトシフトリージョンを有効にするための手順です
：コンソールで「レンダリング」を検索します。
レンダリング領域チェックボックスと、その他試したいチェックボックスにチェックを入れます。
これで、ページを閲覧したときに、レイアウトの変更が青くハイライトされます。
ブラウザの拡張機能で
Chromeの場合は CLSチェッカー – さらに旅に出るで、スコアの悪いURLをすべてテストしてください。さらに、この拡張機能は、赤いラベルの形で手がかりを与え、要素のリストとそれらが消費するCLSを表示します。Toogle」をクリックすると、該当する要素がハイライトされます。私の場合、Adsense広告の問題が既に解決されていたため、1つしか表示されません。
ウェブページテスト
でテストができる別の測定ページ。 ウェブページテスト.orgで、生成される動画やアニメーションGIFを見ることができます。
動画を一時停止すると、小さな変位を見つけやすくなります。
よく見ると、メニュー項目だけでなく、タイトルやテキストもフォントサイズや位置の変更と思われるもので少し右にずれていますが、タイトル上の広告スペースはすでに確保されているので、コンテンツが下にずれることはありません。H1を少し小型化し、付随するテキストのラッピングを整理することで解決しました。
しかし、それは別問題で、今度は広告の挙動を処理しましょう。
広告ブロック枠の予約に関するソリューション
最良かつ最短の解決策を探したところ、各広告ブロックの周りのラッパー（div）に高さの最小値を追加してそのスペースを確保し、読み込み後のスクロールを回避することが最良の解決策であることがわかりました。
しかし、このCSSプロパティを指し示すクラスだけでは不十分で、ラッパーにIDを使用する必要があるようです。Google AdSenseのJavaScriptは、理由は不明ですが、任意の親オブジェクトから最小高さのディレクティブを削除しているようです。ただし、CSSターゲティングにIDを使用した場合は、削除されません。
これについては、以下のように説明されています。 これ漫ろに より詳細をGoogleのドキュメントに掲載しています。この方法は、すべてのブロックをチェックする必要があり、面倒だと思ったので、代替案を探し続け、うまくいく方法を見つけました。 アドインサーター.これがその手順でした。
アダプティブ広告を固定サイズに変更
まず、アダプティブ・アドブロックの使用を中止したことです。すべてのブロックを固定サイズに変更しました。
この決定については、あなたの具体的なケースを研究し、評価する必要があります。
Googleは、適応型はより多くの収益を生むと主張しているが（明らかに異なるサイズを表示できる可能性があるため）、これはかなり弾力的で、さまざまなシナリオに応じて変化する可能性がある。人気のあるサイズを選ぶと、常に広告が表示されることになります。
サイズ最適化の無効化
ブロックのサイズは固定されているはずですが、モバイル広告のサイズをGoogleが独自に決定できるオプションは無効にしておくとよいでしょう。このオプションは、アドセンス管理画面の「広告/グローバル設定」で確認できます。
こうすることで、万が一、手作業で掲載した広告を見落とした場合でも、サプライズを回避することができるのです。いずれにせよ、サイズが固定だからといって、レスポンスが悪くなるわけではありません。
Ad Inserterによる広告枠の確保
Ad Inserterは、他のコンテンツの追加までできる広告管理用のプラグインとして最適だと思います。
各広告のスペースを確保するには、「表示」から各ブロックの幅と高さを定義するだけです。
suを使用する場合 PRO版また、Lazy Loadもチェックすると、CLSがもう少し緩和される傾向にあります。
いくつかの検討事項
アドセンスのスペースを予約すると、そのサイズでは広告が配信されないため表示できない、またはある時点であなたのサイトに広告主がいない場合、予約したスペースのサイズの空白が表示されるという欠点があります。
Ad Inserter では、サーバーサイドの挿入の場合のみ、コードで直接高さを設定することができます。 カスタムCSSo.
なお、広告の高さは、広告コードで定義されます。アダプティブ広告のコードでは、利用可能なスペースに応じて広告の高さを設定できます。
また、一部の広告ネットワーク（AdSenseなど）では、利用可能なスペースより小さい広告を配信する場合があります。Ad Inserterで定義されているブロックの高さは、挿入されたブロックの高さ、つまり、それを包むdivの高さです。広告を掲載するために確保されたスペースです。予約する場合、次のようなことが起こり得ます。
- 広告の高さが予約スペースの高さ（ブロックの高さ）と同じであれば、レイアウトの変更はなく、CLSに影響を与えることはありません。
- 広告の高さが予約スペースの高さ（ブロック高）より大きい場合、広告を入れるためにデザインを下にずらし、CLSに影響を与える場合があります。
- 広告の高さが予約スペースの高さ（ブロックの高さ）より小さい場合、広告の下に空白ができますが、レイアウトは変更されず、CLSに影響を与えることはありません。
AdSenseのアダプティブ広告コードなど、一部の広告コードでは、メインコンテナの高さが上書きされる場合があります。この場合、ブロックの高さは上書きされ、適用されません。
つまり、レイアウトの変更を最小限に抑えてCLSの問題を解決することが急務の場合、可能な限り固定広告サイズを使用することが最も手っ取り早い選択肢となります。
ついでに、画像に欠けた寸法がないことを確認することもできます。これも、さまざまな方法で修正することができます。手軽で簡単な方法としては パーフマターズ o WPロケット(いずれも有料）。
またはプラグイン Litespeedキャッシュライトスピードのサーバーでブログをホストしている場合。
うまくいけば、数時間後にフィールドレポート、数日後にラボレポートでCLSの低下が確認できます。 PageSpeed Insights.
