PageSpeed Insights で１年前に投稿した記事のCLSは0.01（モバイル）で合格していたが、現在は要・改善レベルの0.11になり、「■ウェブに関する主な指標の評価: 不合格」になっていました。
今回の記事は、 CLS（Cumulative Layout Shift）項目の改善への顛末紹介になります。（改善内容が反映するまでに時間が掛かるので約１ヶ月ほど要します。）
ウェブに関する主な指標の合否・基準
| 良好 | 改善が必要 | 低速（不良） | |
| 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環境について（2024/7/23現在）
- Webサーバー：ロリポップ・ハイスピードプラン PHP8.3.9
- WordPress ：バージョン 6.5.5
- Affinger6 テーマ：バージョン20240625
- WP Fastest Cache Premium(有料版) プラグイン：バージョン 1.7.1
- Autoptimizeプラグイン：バージョン3.1.11
- アドセンスの遅延読み込み：アリ（参照ページ）
google Search ConsoleでCLS問題が生じているURLを確認
Search Consoleを開き 「ウェブに関する主な指標」 ＞ 「モバイル」の「レポートを開く」 をクリックすると「良好な URL と判断されなかった理由」に遷移し、「改善が必要の項目」をクリックすると、「URL グループ」 が表示されます。 今回の場合URLグループ総数が25 になっていました。 ここを更にクリックするとURLが表示されるので、このURLのCLS値を、PageSpeed Insightsで「パフォーマンスの問題を診断する」の中のCLS値で確認します。
グループ総数25で示されるURL全てのCLS値を確認したところ、最大でも 0.036 で 0.11 より低い状況でした。（本来は合格の筈） 何故「■ウェブに関する主な指標の評価: 不合格」になる理由は不明ですが、グループ総数25のURLに対して
極力 CLS値「0」に近づけることを目標に対策を行うことにしました。
参考：Web Vitalsツール
Core Web Vitals対応のGoogle Chrome機能拡張を使うと、リアルタイムでコンソールにCLS値が表示されるので非常に有用です。 以下のURLをクリックしてChromeにインストールし、表示 ＞ 開発/管理 ＞ デベロッパーツール で確認できます。
Web Vitalshttps://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja&utm_source=ext_sidebar
計測出来る指標
- 最大のコンテンツの描画時間 – Largest Contentful Paint (LCP)
- 累積レイアウトシフト – Cumulative Layout Shift (CLS)
- 最初の入力遅延 – First Input Delay (FID)
- 次のペイントまでのインタラクション – Interaction To Next Paint (INP)
- 最初のコンテンツの描画時間 – First Contentful Paint (FCP)
- 最初の1バイト受信までの時間 – Time To First Byte (TTFB)
CLSに関係すると思われる表示機能とCLS値の変化を確認
CLS（Cumulative Layout Shift）は、ページ表示時に、累積的なレイアウトの動きの量がどのぐらい発生するかを示しています。 つまり、ページ表示する時に、描画を変位（移動）させる機能（要素）がCLS値を悪化させる可能性が高いと思われます。 以下リストアップ
- TOC＋プラグインによる目次作成
CLS値の変化：[toc] アリでCLS値悪化 無しでCLS値 0 になる。 - 画像の遅延読込
CLS値の変化：Autoptimize「指定枚数目から遅延読み込み」を1に設定して全て遅延読込みにするとCLS値悪化 「指定枚数目」を2に設定して2枚目以降遅延設定でCLS値 0 になる。
- Affinger6のスマホ・フッターメニュー
CLS値の変化：フッターメニュー表示アリで悪化、非表示で、CLS値 0 になる。 - AdSenseのアンカー広告
CLS値の変化：アンカー広告表示の有無で、スクロールで表示されるのでCLS値 0 で変化無し。
「■ウェブに関する主な指標の評価」結果は？
改善対策を行ってまだ日が浅いのでPageSpeed Insights の「■ウェブに関する主な指標の評価」は完全ではありませんが、CLSが 0.1 になり、以下の通りギリギリ合格に至りました。 取敢えず今回の対策で様子をみることにします。
後日談：再度CLSが悪化（2025/2/9追記）
PageSpeed Insights のモバイルにおいて「ウェブに関する主な指標の評価」中のCLSスコアーが１ヶ月前から何も思い当たる所が無く 0.1から急激に0.45に悪化し、このため「ウェブに関する主な指標の評価：不合格」になってしまいました。(^_^;) 下の記事に顛末を記していますので参照してください。
-
-
参 照アドセンスの遅延読込を止めてPageSpeed InsightsのモバイルCLSを改善（CLS編-2)
過去記事のCLS編からの続きです。 PageSpeed Insights のモバイルにおいて「ウェブに関する主な指標の評価」中のCLSスコアーが１ヶ月前から何も思い当たる所が無く 0.1から急激に0. ...