気ままな独り言

【ブログ、Google Search Console】「CLS/LCP/FIDの問題」への対応検討結果。「LCPの半減化」に成功。写真多めで分かりやすく。

本ブログ(blog)に対して、「Google Search Console」を使用ですが、「CLSに関する問題:0.25超(モバイル)」「ステータス:不良」が出ています。
・「ん? 放置して良いのか、よく分からない…」だったので、調査した結果をご報告です。写真多めで分かりやすく、を心がけました。

「ステータス:不良」を見かけた時に、気になっていました…

雲くん
雲くん
「CLSに関する問題」「LCPの問題」と言われても、よく分かりませんよね。特に、放置して良いのか、私も気になっていました…

本ブログの現在の状況(全体理解)

スマホアプリ「Google Search Console」で、「サマリー」の確認です。まず、アプリから「サマリー」の確認です。「エラーページ無し」なので、一安心です。

     

・次に、「ウェブに関する主な指標」で「モバイル:不良URL有り」が分かります。なお、数か月前から「不良URL→改善が必要なURL→不良URL」と推移ですが、件数に連続性があるので、「同様な原因では?」と推測です。「PC:不良URL有り」ですが、「改善が必要なURL→不良URL」と推移です。「モバイル」と同様な傾向ですが、前半の「不良URL無し」モードが無いので、「もしかしたら、前半と後半の不良URLは、少し違う原因かも…」と理解しました。

    

・「不良」を見ても、慌てない。全体を俯瞰してから、取り掛かる。
・そのため、「Google Search Console:サマリー」で他のエラー有無等も確認する。
・「不良」が、数か月単位で、どんな推移をたどっているのか、再確認する。また、「モバイル」と「PC」での差の有無も、理解しておく。

・それぞれ、下部の「①」をクリックすると、追加情報があります(どちらの「①」でも同じ追加情報でした)。なお、「モバイル」「PC」も、同じ追加情報でした。最初の発生日が「2月17日(水)」、次の発生日が「4月13日(火)」でした。
・それぞれをGoogle翻訳すると以下の記載です。「2月17日:以前は < (以下) であった LCP、FID、CLS の境界を定義するメトリックは、<=(以下)として定義されるようになりました。したがって、このレポートでは(良い)ステータスの変更が表示される場合があります。」、「4月13日:ページ上のレイアウトシフトをより正確に反映するように、CLS メトリックが更新されました。この変更を反映して、ページの CLS ステータス (ほとんどが正の状態) に変更が表示される場合があります。」。つまり、Google側の「基準変更のイベントのために、不良が発生」と理解しました。
・なお、これらの日付で、「新規記事アップ」等の「ブログ自身の大幅な変更が無い事」も念のため確認しました。もちろん、更新はしているので、それが原因かもしれませんが…

・また、それぞれ、右上「未解決」で、「不良の種類」が分かります。「モバイル:CLSに関する問題」、「PC:CLSに関する問題、LCPの問題」で、異なる事を理解です。本ブログは、モバイルからの訪問が多いので、「CLSに関する問題」に注力する事にしました。

  

・また、同じく、右上「未解決」で、「不良モード」「改善が必要モード」「良好モード」の説明が「?」クリックで分かります。「不良(低速)」モードでは、「何らかの低速」が原因のようです。「良好モード」では、「ユーザーに対するパフォーマンスが高い」と記載なので、それを目指したいモノです。

       

・「不良」の発生日とその理由を確認する。これらの日付で「新規記事アップ」等の「大幅なブログ変更の有無」も確認する。
・「不良」の種類を確認する。

「CLSに関する問題」とは?

「Google Search Console」から、「ウェブに関する主な指標」→「モバイル:未解決」で下部の「型(?)」クリックです。「CLS(Cumulative Layout Shift):ページの読み込み中にページのUI要素がどの程度移動するかを示します」とあります。要するに、「切り替え速度」と理解しました。「詳細」クリックで、「指標」が分かります。
・CLS指標で「0.25を超える:低速(不良)」と認識できました。

  

・「CLS」のより詳細な説明が、同じく「詳細」クリックで分かります。要するに、「切り替え速度」と理解です。

  

「CLSに関する問題」の対象記事は?

「Google Search Console」から、「ウェブに関する主な指標」→「モバイル:未解決」で左下「不良」クリックです。対象記事が分かりますが、「https://…door(2020年12月5日)」が対象でした。「CLS=0.27」なので、「基準の0.25を越えている」事も再確認できました。ただ、大幅に超えているわけでは無かったです。
・なお、「①」クリックで、谷の最初が「2月28日(日)」、谷の最後が「4月9日(金)」と日付確認も参考情報を入手しました。この日付で、本ブログで特別な事には、覚えがありません。
・このURLをクリックすると他の「類似のURL」も分かります。また、「類似のURL=18個」です。なお、本日が18個ですが、過去の経過も少し確認します。「前半が多く、後半が少ない」事が分かります。なお、本ブログは、約60件なので、18個なら、「約3割」となり、意外と多いです。

  

・なお、「CLS(集計値)」の「?」クリックで、「CLS(集計値):グループ内のURLのアクセスの75%で集計された最低のCLS」と記載です。つまり、「平均値ではなく、最低(最悪)のCLS」と理解です。

「CLSに関する問題」の対応策は?

「Google Search Console」から、「ウェブに関する主な指標」→「モバイル:未解決」で左下「不良」クリックです。対象記事が分かりますが、このURLをクリックして、「PAGESPEED INSIGHTS」起動です。

  

・起動中は、以下の画面となります。「分析」部に、対象URL(対象記事)が自動転記されているのか、ご確認ください。

・「モバイル」と「PC」で結果が異なります。なお、トータルスコア横の「i」クリックで、得点の意味が記載ですが「0 to 49 (red): Poor」「50 to 89 (orange): Needs Improvement」「90 to 100 (green): Good」なので、「モバイル:38点(悪い状態)」、「パソコン:72点(改善が必要)」です。
・「Cumulative Layout Shift(CLS)は、 「ビューポート内の視覚要素がどのくらい移動しているかを測定する指標です」と記載です。要するに、「切り換え速度」と理解です。

     

・なお、上記画面の下部に「改善できる項目」が記載です。なお、「パフォーマンススコアには直接影響しません」と記載なので、直接的な効果は、確約できないのですが…
・なお、「モバイル:改善できる項目が多い」「パソコン:改善できる項目が少ない」です。「モバイル:38点(悪い状態)」、「パソコン:70点(改善が必要)」にも対応しています。
・ただ、「切り替え速度」に対応する「改善できる項目」が見当たりません。「う~ん」です。

  

・ただ、「CLS=0.006」なので、「緑(良い状態)」なので、「改善の必要無し」です。「不良」原因である「CLS=0.27」と数値が大きく異なり、改善有無も異なります。異なる理由で、可能性があるのは、前者が「最新テスト」であり、後者が「長期間の現実的な数値」の点です。
・「Google Search Console」から、「ウェブに関する主な指標」→「モバイル:未解決」で左下「CLSに関する問題…」クリックです。「詳細を表示」→「?」で「十分な数のユーザーがアクセス」とあるので、「長期間の現実的な数値」である事が裏付けられます。なお、初検出日は、「2021年1月25日」と記載がありました。

     

他の類似URLの測定結果

類似URLの定義です。「Google Search Console」から、「ウェブに関する主な指標」→「モバイル:未解決」で下部「類似のURL」で「?」クリックで定義が分かります。つまり、「根本的な問題の原因が類似」なので、他の類似URLでも、「PAGESPEED INSIGHTS」起動の意味があります。「類似のURL」クリックでも、調べました。

  

・「類似のURL」で「https://…cat00(2020年11月21日)」「https://…buddhist_alter(2021年3月27日)」「https://…fence(2020年12月12日)」「https://…closet(2021年1月31日)」です。それぞれのCLSは、「0.006」「0.006」「0.009」「0.006」でした。要するに、「不良」原因である「CLS=0.27」と数値が大きく異なる結果でした。

・前述したように「平均値ではなく、最低(最悪)のCLS」が「0.27」です。上記結果をみると、「頻繁な不良発生」と判断です。従って、今回は、慌てないで「対応無し」が良さそうです。

「CLSに関する問題」で、初検出日と「類似のURL」の関係

・「CLSに関する問題」の初検出日は、「2021年1月25日」です。
・その日を境に、一斉に「類似のURL(18件)」をアップしていれば、それらのURLでの「共通作業が不良原因」と推測できます。
・ただ、最初の「https://…door(2020年12月5日)」も含めて、「類似のURL」で日付追記をしましたが、アップ日が、そもそもバラバラであり、初検出日以前のアップ日もあるので、この切り口では、原因追及は、難しいと判断しました。(もちろんの事ながら、個人ブログで、18件を同一日にアップするのは、困難です)

・今後は、定期的に「Google Search Console」を確認し、「ステータス:不良」があれば、「対象項目(今回は、CLS)」の「長期間の現実的な数値(0.27)」を確認する。
・その上で、「PAGESPEED INSIGHTS」を用いて、不良の「対象記事」で「最新テスト(0.006)」を行う。
・「長期間の現実的な数値(0.27)」と、「最新テスト(0.006)」を比較して、差が大きければ、その理由を再確認する。
・今回のCLSでは、前者が「最低(最悪)の値」、後者が「最新テスト」と考えて、「頻繁な不良発生では無い」と判断しました。今後は、「経過観察」とします。

「LCPの問題」の対応策は?

「LCP(Largest Contentful Paint): ページが最大の視認可能な要素をレンダリングするまでの時間」の定義です。これら資料(前述)から、「読み込み速度」と理解しました。また、「LCPが4秒を超える」と「不良(低速)」となります。

  

・本ブログでは、「パソコン:LCPの問題」は、「不良有り(4秒を超える)」で、詳細を確認しました。参考として「パソコン:CLSに関する問題(一山)」の詳細も以下です。なお、「モバイル:LCPの問題」でも、「改善が必要(2.5秒を超える):初検出日が2021年1月25日」なので、「どちらも、LCPの問題」を抱えています。ちなみに、「モバイル:CLSに関する問題」で「改善が必要(0.1を超える):初検出日が2021年2月28日」でした。
・「パソコン:LCPの問題(二山)」ですが、「類似のURL無し」で、情報が少ないです。(「CLSに関する問題」では、「類似のURL有り」でしたが…)
・参考情報ですが、「パソコン:CLSに関する問題」「パソコン:LCPの問題」の初検出日は、それぞれ、2021年3月5日/2021年3月6日で、非常に近いのですが、「モバイル」でも、検討したように、「初検出日からの原因追及」は、難しいです。

  

・「類似のURL無し」なので、やむを得ず、モバイルで使用した「https://…door」で「PAGESPEED INSIGHTS」起動です。トータルスコアは、「モバイル:38点(悪い状態)」よりも良く、「パソコン:72点(改善が必要)」でした。
・論点の「LCP(Largest Contentful Paint)」ですが、「本対象記事は、0.9秒」なので、「基準(2.5秒以下)クリア」です。

  

・「https://…cat00」「https://…buddhist_alter」「https://…fence」「https://…closet」においても、それぞれのパソコンでのLCPは、「1.1秒」「1.0秒」「0.9秒」「0.9秒」でした。「基準(2.5秒以下)クリア」です。

・「LCP」も、前述「CLS」と同様に、以下のように「最低(最悪)のLCP」と認識しました。頻繁な発生では無さそうなので、「対応無し」が良さそうです。

他ブログの改善例

サイトオーナーの許可を得て、他ブログの改善例を掲載します。基準値は、以下とします。

<モバイル>
・「トータルスコアが10点」なので、改善要です。Googleからも、「指標テストに合格していません」と記載です。
・特に、項目別では、「LCP(読み込み速度)が22秒」は、非常に遅いと思います。「画像コンテンツ」が課題のケースが多いと考えます。「プラグインで(モバイル向けの)画像圧縮」が、効いていない可能性もあります。「改善できる項目」でも、「画像」に関する記載がありました。この読み込み速度は、非常に重要です。「ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加」と記載です。皆さんが、すぐに、ブログから離脱するという意味です。
https://support.google.com/webmasters/answer/9205520?hl=ja
・また、「CLS(切り替え速度)が0.226」ですが、「改善が必要」モードなので、まずは、「LCP」対応が望ましいです。

     

<パソコン>
・モバイルよりも良いのですが、「トータルスコアが33点」は、低めの点数です。
・項目別では、「LCP(読み込み速度)が4.4秒」は、基準「4秒」を少し超えています。「プラグインで(モバイル向けの)画像圧縮」でモバイルと合わせて、改善できるかも、しれません。
・また、「CLS(切り替え速度)が0.146」は、「改善が必要」モードなので、まずは、「LCP」対応が望ましいです。

  

他ブログのLCPの半減化に成功

LCP(読み込み速度)なので、「画像コンテンツ」が候補です。「プラグインで(モバイル向けの)画像圧縮」は、有効でした。

・まずは、上記記事の「完全コピー記事」を作成しました。その後、本文内「画像コンテンツ」を削除しましたが、まったく変化無しです。「う~ん」…

・ただ、表示の様子を確認すると、「アイキャッチ画像」が最初に表示です。これも「画像コンテンツ」です。もしかしたらと考えて、「アイキャッチ画像の非表示(WordPressの設定)」にすると、LCPの半減化(約20秒→約10秒)に成功しました。ちなみに、対象画像は、「約1MB」ありました。

・つまり、「アイキャッチ画像」に使用している画像が重いので、LCP速度を劣化させてている事が判明しました。検証するために、「アイキャッチ画像の非表示」のまま、対象画像を、本文内に挿入したところ、LCPが元の約20秒に戻りました。

・好ましい設定は、以下の通りです。「①アイキャッチ画像の非表示」として、「②アイキャッチ画像に画像挿入」です。これで、以下の画像のように「人気記事ランキング」では、「②画像を活用」となります。実際の記事内には、「②画像が未使用」なので、LCPを劣化させません。
https://noriryoku.com/nikki/kobanorantana/

LCP(読み込み速度)の改善のために、本文内「画像コンテンツ」が「約1MB以上あるモノ」が改善候補です。また、加えて、「アイキャッチ画像の確認」もお願い致します。
・LCPの半減化(約20秒→約10秒)に成功しました。目標は、2.5秒以下なので、未達ですが、まずは、第一歩です。この改善により、同時に、CLS(切り替え速度)も「0.1以下」の基準を達成しました。

<モバイル>
※LCP(読み込み速度)が「21.8秒」→「11.2秒」と半減です。
※加えて、CLS(切り替え速度)が、「0.1以下」の基準達成です。

    

まとめ

ブログ(blog)における「Google Search Console」使用時の、「CLS(切り替え速度)に関する問題」「LCP(読み込み速度)の問題」「FIDの問題」への対応検討結果です。「ステータス:不良」となっても、慌てて対応しないで、まずは、「Google Search Console:サマリー」や「PAGESPEED INSIGHTS」で、「不良」の中身確認が肝要です。要するに、「PAGESPEED INSIGHTS」メイン使用が良いという意味です(「Google Search Console」は、あくまで、全体俯瞰でのキッカケの位置づけで)。

・本ブログは、「CLS(切り替え速度)」と「LCP(読み込み速度)」は、「最低(最悪)の値」で「ステータス:不良」であり、「PAGESPEED INSIGHTS」で、「頻繁な不良発生では無い」と判断しました。従って、「対応無し」で、「今後は、経過観察」としました。写真多めで分かりやすく、を心がけました。

・また、「他ブログの例」で示したように、「約1MBの画像コンテンツ割愛」で、「CLS(切り替え速度)の基準達成」「LCP(読み込み速度)の半減化」を達成しました。「PAGESPEED INSIGHTS」で「不良」の中身確認をお願い致します。

皆さんのご参考まで(^^) 何かあれば、お気軽にお問合せください。

2021年5月8日

関連記事

・WordPressプラグインのガイドライン(標準)を設定の記事です。https://daijoubudayo.com/diary/plugins/

・WordPressブログ管理者のセキュリティ対応のガイドライン(標準)の記事です。https://daijoubudayo.com/diary/admin_security/

・WordPressブログ管理者ログインでのトラブルの記事です。https://daijoubudayo.com/diary/administrator/

・【ブログ】パスワードへのXMLRPC攻撃(総当たり攻撃)の防御方法の記事です。https://daijoubudayo.com/diary/xmlrpc/

・「Googleアドセンス合格への道のり」の記事です。https://daijoubudayo.com/diary/adsense/

・本ブログの「お金の節約」カテゴリーの記事リスト(約20件)です。他の記事もどうぞ。分かりにくい「年金」の話もあります。

【まとめ版】本ブログの「お金の節約」カテゴリー(購入して良かったモノ、自動車関連、確定申告、年金、ネットワーク、メルカリ活用など)の記事リスト本ブログ「大丈夫だよblog」の「お金の節約」カテゴリー(購入して良かったモノ、自動車関連、確定申告、年金、ネットワーク、メルカリ活用など)の記事リスト(約20件)です。グループ別に記載しておきます。...
ABOUT ME
雲(関西人)です。DIY(猫モノ、リノベーション/リフォーム、ホームガーデン、バラフェンス)、お金・節約(購入して良かったモノ、自動車関連、確定申告、年金、ネットワーク)、独り言(水槽、仕事、ブログ、ン猫)を中心に、オリジナルな視点で、生活の知恵を書きたいと思います。写真多めです。 何かあれば、お問い合わせください。励みになりますので… 今後とも、よろしくお願い致します。Instagram(ユーザーネーム: shimaishitsupo)も、私なので、こちらも、どうぞ。