Google検索の仕様変更対応

Google Search Consoleの「ウェブに関する主な指標」に「不良」または「改善が必要」と表示されている場合の修正方法です。CLSとLCPはGoogle検索結果に影響するようになったので、すぐに修正する必要があります。

私は以下のもので「不良」または「改善が必要」となっていましたが、全て合格しました。
CLS に関する問題: 0.25 超（パソコン）
CLS に関する問題: 0.1 超（パソコン）
CLS に関する問題: 0.1 超（モバイル）
LCP の問題: 2.5秒 超（パソコン）
LCP の問題: 2.5秒 超（モバイル）

現在のCLSとLCPの値は PageSpeed Insights で確認できます。
https://developers.google.com/speed/pagespeed/insights/

CLSは0.1以下、LCPは2.5秒以下で合格です。CLSの内容はPageSpeed Insightsの「レイアウトが大きく変わらないようにする」という項目をクリックすると原因を確認できます。

効果が高かった順に修正方法を紹介します。基本的に（モバイル）を直せば（パソコン）も直ります。

Google検索の仕様変更はスマホで利用する人が多くなったので、スマホ対応されたサイトをGoogle検索の上位に表示する仕様変更です。

Google Search Consoleに追加された「モバイルでのページ エクスペリエンス」には4つの項目があります。
1.ウェブに関する主な指標
2.モバイル ユーザビリティ
3.セキュリティの問題
4.HTTPS

この4つに対応したサイトがGoogle検索結果の上位に来るように仕様変更されました。

1.ウェブに関する主な指標 は主にCLSとLCPのことで、今回修正するものです。
2.モバイル ユーザビリティ はスマホサイズでも見やすいサイト。
3.セキュリティの問題 はセキュリティに問題ないサイト。
4.HTTPS は https:// で始まるhttps対応された http:// で始まらないサイト。

LCPはスピードが遅い、CLSは表示がズレることです。スマホでもすぐに表示され、リンクをクリックしようと思ったら広告が表示されて広告をクリックしてしまうようなサイトではないことを証明する基準です。「不良」または「改善が必要」と判定された場合の修正方法です。

インターネットの回線スピードが速くなったので、スピードを気にせずにjQueryや画像を大量に使ったサイトが流行っていましたが、スマホでも問題なく見れるような一世代前の回線スピードが遅かった時代のホームページに戻すような作業になります。

1. CLS に関する問題: 0.1 超（モバイル）の修正方法
2. LCP の問題: 2.5秒 超（モバイル）の修正方法