過去記事のCLS編からの続きです。 PageSpeed Insights のモバイルにおいて「ウェブに関する主な指標の評価」中のCLSスコアーが１ヶ月前から何も思い当たる所が無く 0.1から急激に0.45に悪化し、このため「ウェブに関する主な指標の評価：不合格」になってしまいました。(^_^;) 今回は、モバイルCLSの改善に取り組んだ顛末の紹介です。
ウェブに関する主な指標の合否・基準
| 良好 | 改善が必要 | 低速（不良） | |
| LCP | 2.5 秒以下 | 4 秒以下 | 4 秒を超える |
| INP | 200 ミリ秒以下 | 500 ミリ秒以下 | 500 ミリ秒を超える |
| CLS | 0.1 以下 | 0.11〜0.25 以下 | 0.25 を超える |
2024 年 3 月に Core Web Vitals としての FID は削除され、INP に置き換えられました。
当サイトのwordpress環境（CLSが0.45に悪化した時点）
- Webサーバー：ロリポップ・ハイスピードプラン PHP8.3
- WordPress ：バージョン 6.7.1
- Affinger6 テーマ：バージョン20250108
- WP Fastest Cache Premium(有料版) プラグイン：バージョン 1.7.1
- Autoptimizeプラグイン：バージョン1.3.3
- アドセンスの遅延読み込み：アリ
（備考）WP Fastest Cache の画像の遅延読み込みは使用せず、代わりにAutoptimizeで「画像の遅延読み込み (Lazy-load) を利用」を使っています。
モバイルのCLS改善に向けて(悪化要因の特定)
CLS悪化要因の特定のため、Google ChromeのコンソールにCore Web Vitalsの指標を表示できる「Web Vitalsツール」という機能拡張を使いますので、事前にこのツールをインストールしておきました。
（注記）このWeb Vitalsツール(1.6.0)は、現在残念ながら、chrome ウェブストアの拡張機能から除外されインストール出来ません。
LCP、CLS、INP、FCP、TTFB
悪化要因の特定と改善策
当サイトのページを表示し、Chromeの「表示」＞「開発/管理」＞「デベロッパーツール」を開き、モバイルサイズを指定して、ページを上下にスクロールなどの操作をすると、「Web Vitalsツール」により、コンソールにCore Web Vitalsの指標が表示されます。 評価は3段階で表示され「good」「needs-improvement」「poor」です。 下にコンソール部の表示例を示します。
この方法でCLSに着目して確認したところ、アドセンスのアンカー広告が表示されることでCLSが「needs-improvement」に悪化し、さらに折りたたみ式のアンカー広告が表示されると、スコアが「poor」に悪化することがわかりました。また、上から表示されるアンカー広告より、下から表示されるアンカー広告にした方がCLSへの影響が軽減されることも確認できました。
更に、試しにアドセンスの遅延読み込みを停止してみた場合、アンカー広告があってもCLSスコアが「good」に改善されることがわかりました。
これらの結果から、下の項目をCLSの改善策として様子をみることにしました。
- 「アドセンスの遅延読み込み」→ 停止
- 折りたたみ式のアンカー広告 → 停止
- 下から表示されるアンカー広告に変更
モバイルCLS・改善効果の検証
『「アドセンスの遅延読み込み」を停止し、折りたたみ式のアンカー広告も止めて、下から表示されるアンカー広告』を改善策として実行し、モバイルCLSがどの様に日を追って改善するか否か？を、PageSpeed Insights「ウェブに関する主な指標の評価」のCLSスコアをプロットしてみました。 下のグラフは、２０日間のモバイルCLSスコアのトレンドフラフです。
以上のトレンドグラフから、改善策・実行後 10日目で、「ウェブに関する主な指標の評価」は0.1以下の「合格」ラインに達しています。 そして、20日目を経過した所で0.02付近で略一定になりました。
「ウェブに関する主な指標の評価」結果（改善策後 21日目）
下で示す様に改善策後 21日目で、モバイルCLSが、0.01になり、「ウェブに関する主な指標の評価：合格」に戻り改善策の効果が確かめられました。
ただし、「ビューを開く」をクリックしてパーセンタイル割合を見ると、不良：11% あり一桁％にすることが望ましいと思います。
なお、Google Search Consoleで、「ウェブに関する主な指標」を見てみると、当然ながら全てのページで「良好」に変わっていました。
「実際のユーザの環境で評価する（オリジンデータ）」について：Google Chromeブラウザを使ってWebページを閲覧しているユーザーから収集されるWebパフォーマンスデータは、自動的にGoogleに送信され、匿名化されたデータとして Chrome User Experience Report (CrUX) に組み込まれます。 このデータがPageSpeed Insightsに反映され、サイトの実際のユーザー体験に基づくパフォーマンス評価が提供されます。 よって、シミュレーションを使った「パフォーマンスの問題を診断する」のパフォーマンススコアより、オリジンデータの方が実情に即していると言えます。
なお、アクセス数が少ない場合、十分なデータが集まらないため、オリジンデータが表示されないか、表示されるまでに時間がかかることがあります。
アドセンスの遅延読み込みを止める弊害は？
アドセンスの遅延読み込みを行っていた場合は、PageSpeed Insights「パフォーマンスの問題を診断する」のパフォーマンススコアがモバイルで80前後、PCで略100でしたが、アドセンスの遅延読み込みを止めることで、20日間の平均パフォーマンススコアは、モバイルで59、PCで91でしたので確かにアドセンスの遅延読み込みを止めることでパフォーマンススコアが悪化しました。
ここで、アクセス数が大きい大手サイトをPageSpeed Insightsで確認するとパフォーマンススコアが50前後と低いが「ウェブに関する主な指標の評価」が合格になっているのが散見されます。 つまり、下の「参考になる関連記事」にある様にパフォーマンススコアを追いかけるよりフィールドデータの「ウェブに関する主な指標の評価」が合格する方にウエイトを置くべきと思います。 当サイトの現状のWordPress環境では、パフォーマンスは低下するが、アドセンスの遅延読み込みを止める方がベターであると思います。
参考になる関連記事
AdSense広告の影響について（後記）
「アンカー広告を下部」にして、「折りたたみ式のアンカー広告を停止」させたことでCLSが改善しました。 Google AdSense サポートページによれば、「収益拡大の機会を逃す可能性もあります」との表記があり、「折りたたみ式のアンカー広告」などを元に戻したらどうなるかをトライした経過を下に示します。
AdSense広告とCLS（2025/3/20追記）
- 2/23: CLS=0.01になったところで、「折りたたみ式のアンカー広告」を復活（表示）させてみた。
- 3/6 : CLS=0.14に悪化し、再び「ウェブに関する主な指標の評価」が不合格に逆戻りしたので、「折りたたみ式のアンカー広告」 を停止させる。
- 3/10: CLSが一向に改善せず、更にAdSenseの「関連トピックの発見」と[ページ内広告]をオフさせる。
- 3/12: CLS=0.08に改善し、「ウェブに関する主な指標の評価」が合格に。
- 3/18: CLS=0.01になり元に戻る。
以上の結果から、AdSense広告の種類によって、少なからずCLSの値に影響することが分かりました。 CLS値を見ながらAdSense広告の種類を決める必要がある様です。