この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Web Vitals（ウェブバイタル）はGoogleがWebサイトの健全性を示す重要指標（ユーザーエクスペリエンス）、即ちWebサイトに訪れたユーザ目線での使いやすさの指標でもあります。
今回Google Search Consoleで2024年5月7日に全てのモバイルWebページがCLS 0.1超（問題のあるURL）と表示され、アクセル数が1/3以下に落ちてしまいました。
今後もGoogleの仕様の見直しによって同様のことが起こる可能性があります。
全ての皆さんに当てはまるわけではありませんが、参考までにご覧下さい。
2021年6月からGoogleのWeb検索の指標として導入されたCore Web Vitalsは、ユーザーエクスペリエンスの3指標として、読み込み時間（LCP）・インタラクティブ性（FID）・Webページの視覚的安定性（CLS）があります。
詳しくはこちらをご覧下さい。
今回問題になっているCLS（Cumulative Layout Shift）とは、Webページが読み込まれる時にページがどのくらい安定しているかを示し、視覚的な安定性を測定して予期しないレイアウトのズレや崩れを定量化したものです。
CLSの測定値範囲は0～1で、0.1未満が「良好」・0.25以下が「改善が必要」・0.25を超えると「低速」のWebページと判定されます。
CLS低下の主な原因には次のようなことがあげられます。
- サイズ指定のない画像・動画
- サイズの指定がない広告・埋め込み要素・iframe
- 動的なコンテンツが埋め込まれている。
- Webフォントの読み込み
私はWordPressでテーマに用意された速度改善の設定やプラグインの設定を見直してみました。
画像に関しては画像サイズの最適化で必要以上にサイズを避けて容量も多くならないようにしています。また最近は動画の埋め込みを辞めてリンクだけにしています。
動的なコンテンツやWebフォントは基本的に使用していないので原因が最初は分かりませんでしたが、WordPressの「EWWW Image Optimizer」の設定で「Web P変換」の設定をしてないことに気が付きました。
Web P形式の画像とは、2010年にGoogleが開発した次世代画像形式で拡張性は〇〇.webpです。現在はほとんどのWebブラウザに対応しているだけでなく多くのメリットがありますが、画質をほとんど変えないでJPEG（ジェイペグ）形式では25～34％の容量の圧縮、PNG（ピング）形式の画像は背景透過も使えて約26％も容量が圧縮できるため、Webページの表示速度の向上に貢献できます。
●「EWWW Image Optimizer」プラグインの詳細設定は「WordPressブログ 立ち上げ隊」様の記事を参考にして下さい
「EWWW Image Optimizer」プラグインでWeb P変換する設定では、表示さえたコードをお使いのレンタルサーバーの「.htaccess」に追記する必要があります。
レンタルサーバーによって「.htaccess」の編集場所が異なりXサーバーなどはサーバーパネルからすぐ項目が見つかりますが、私の利用しているmixhostサーバーではcPanelのファイルマネージャーから目的の「.htaccess」を探していきますが、既定では非表示なっているので非表示ファイルを表示してから探していかなければなりませんでした。
成功すると右下の赤い色「PNG」が緑色「WEBP」に変わります。
私はこれでモバイルのCLS値がギリギリ1.0未満になりました。
Jimdo（ジンドゥー）・Wix（ウィックス）などのCMSの場合は、初心者でもホームページが始めやすいですが、Webサイトの表示速度は早くありません。
Word Pressのように個人で対応することが難しくできるとすれば、画像を圧縮して負担を軽くするなどの方法になります。
Jimdoは今のところWeb P形式の画像を扱うことができません。Wiｘは画像をアップロードすると自動的にWeb P形式に変換されます。
Website Planet
画像圧縮Webサービスはいくつもありますが「Website Planet」のオンラインPNG・JPEG圧縮は、画質をほとんど変えずに最大元画像の20％までファイル容量を圧縮できます。
サルカワ道具箱 Web P変換
JPEG/PNG/GIFに対応した無料で使える「サルカワ道具箱」の画像をWeb P変換するサービスです。
こちらは「サルカワ道具箱」の便利ツールの１つになります。
Googleは今後もさらにCore Web Vitalsへの適応を進めていくようなので、今問題のないWebサイトも対応を迫られていく可能性があります。解決方法は１つでありませんが、地道に最適化に取り組んでいく必要がありそうです。
ホームページの新規作成やサポートをパソコン教室ならでは視点から提案していきます。
お気軽に市民パソコン教室長野校までお問い合せ下さい。
