2024.12.22以降CLS悪化への対応

ずっと問題なかったモバイルのCLSがいつの間にかまた悪化していたので再度修正を検討。修正を開始した2月22時点ではまだ順位の低下はない。

PageSpeed Insightsでは改善する余地があまりなかったので、今回はGoogleデベロッパーツール(DevTools)を使用して原因を調べることにした。chromeの拡張機能の大御所WebVitalsはDevToolsに組み込まれる形で提供終了している。

DevToolsはGoogleChromeを開いてF12を押すことで開くことができる。

一番上の行の左から2番目のデバイスのツールバーを切り替えボタンでモバイル画面にした状態で、これまた一番上の行のパフォーマンスタブをクリックすれば、モバイル画面のWebVitalsを確認できる。モバイル画面を下にスクロールしていけばリアルタイムにCLSがどのように変化するかを確認できる。

12/22以降の状態

実際の対策

  • DevToolsでCLSが広告ブロックの状態では低下せず、広告ブロックを解除すると上昇したため、アドセンスが問題である可能性が高い考えた。こちらのサイトを参考に一旦対策してみた。
  • 上部の折りたたみ広告をやめて、下部のみの折りたたみ広告に切り替えることは、除外エリアを設定しているのにアドセンスの自動広告表示を使うと無理っぽいので、いっそのことオーバーレイフォーマットの折りたたみ広告は一旦注意することにした。
  • まさかの遅延読み込みが問題の可能性があるため、遅延読み込みの記述を削除して、通常のコードで対応開始(R7.2.22より)→結果待ち
  • 上記参考サイトにあるように、アドセンスの遅延読み込み解除することでせっかく改善したパフォーマンススコアは悪くなる。しかし、競合他社の上位表示サイトを見てみてもスコアが悪くCLSが合格しているサイトが多いことから、スコア悪化よりもCLS悪化(不合格)する方が順位に対する影響が大きいということがわかる。もちろんアドセンス自体無いのが最もよいのは言うまではない・・・。
  • 1週間では目立った効果が見られなかったので、テストサイトで経過を見ていくことにする。

2023.10.6以降CLS悪化への対応

SEO対策を10年してこなかったが、2023.10.6のコアアップデートで劇的に順位が低下したため、やむを得ず対策することに。その際のメモです。

  • CLS(Cumulative Layout Shift)・・・描画要素のレイアウトの安定性。ページ閲覧の間に発生する描画のレイアウトのズレ。PageSpeed Insightsを元にスピードを修正してもなかなか改善しない数値
  • LCP(Largest Contentful Paint)・・・ページの表示速度
  • FID(First Input Delay)・・・ユーザー操作への応答速度

10/6のコアアップデート以降の状態

以下、Google Search Consoleのスクショ。

CLSが致命的な問題だったため、PageSpeed InsightsLinghthouseのCromeアドオンで状況を整理。以下10/15時点でのスクショ。

10/29までに少し改善したが平均だから?すぐには反映されず、以下。

11/23には以下のように改善してきた。

モバイルのパフォーマンスがやや低い。100にするにはjavascriptを切らないと厳しい。

実際の対策

  • 試しにドメインを変更(リダイレクトはした)したところ、1週間で古いドメインが検索結果から消え、新しいドメインに切り替わったが、順位がさらに低下。やはり新規ドメインではきびしいか。
  • サーチコンソールへのサブドメイン登録のエラー:サブドメイン名のTXTレコードを設定した場合は、ワイルドカード「*.nkdesk.com」が参照されないため、サブドメイン名のAレコードを明示的に設定する必要がある。「*.nkdesk.com」が参照されないためにサイトへのアクセスができなくなる。問題解決のため、サーバーパネル「DNSレコード設定」にて、サブドメイン名「kanri.nkdesk.com」の【Aレコードを追加】する
  • サイトマップ作成はsitemap.xml Editorで行うが1000までしかダメなので、除外フォルダを使って2回に分けて作成する。homepage.nkdesk.comがサイトでサイトマップを作成できないかったため、Website Explorer (ウェブサイト・エクスプローラ)でサイトマップを作成(この方が早い)。このツールはページのリンク切れ(404エラー)もわかる。
  • ページスピードインサイトやライトハウスでのパフォーマンス診断で、リクエストしたページを Lighthouse で正確に読み込めませんでした。テスト対象の URL が正しいこと、サーバーがすべてのリクエストに適切に応答していることを確認してください。(ステータス コード: 403)
    のエラーには、.htaccessファイルで海外URLをブロックしている?のが原因ポイ。.htaccessファイルを削除すると計測できるようになった。
  • 新アドセンスコード:<script data-ad-client="ca-pub-xxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    これを遅延読み込み対応させるには、GoogleAdSenseの遅延読込みでページ表示速度を改善を参照。新コードなのでコメントアウト部分を復活させてコードを記入する。
    2023.10.20古いコードとの混在も対処し、上記コードへ変更(変更前の古いコード入りはゴミ箱へ)。
  • アナリティクス遅延読み込みは、Google Analyticsの遅延読み込みのコードを使用。GA4対応なのでG-からUA-ではなく始まるコードで

コメントor補足情報orご指摘あればをお願いします。

(件名or本文内でキーワード検索できます)



  • << 前のページ
  • 次のページ >>
ページトップへ