★目次『改善できる項目を１つずつ見る』を随時更新中
WordPressでテーマはザ・トールを使用しています。
Googleのサーチコンソールでカバレッジではエラー０・警告も０でクリーンなサイトだと思っていましたが、【ウェブに関する主な指標】に移ると黄色で改善が必要なURL１７０件と出ました。
詳しく知りたくてレポートを開くをクリックし、さらに【改善が必要】をクリック。
すると２つの問題があることがわかりました。
・改善が必要 LCP の問題: 2.5秒 超（モバイル）
LCPは聞いたことがあるけど何かわからない。
CLSは聞いたこともない・・・。
しかし、解決できましたよ！
CLS・LCPは2021年からGoogleのページ順位トップ３に入る為の重要な項目なので何が改善が必要なのかを調べ、修正することでエラー０へ改善できたので改善方法をまとめました。
CLS に関する問題: 0.1 超（モバイル）の原因
CLS (Cumulative Layout Shift)とは、
記事を読み込む時にページのレイアウトの移動量を示します。
例えば、サイトを閲覧して『次へ』をクリックしようと思ったら、急にページが動いて広告や思ってもいない部分をクリックしてしまう経験はないですか？
『CLS に関する問題: 0.1 超（モバイル）』はこのようなページの移動により、読者を意図しないクリックから守ることでサイトの離脱を防ぐための指標です。
| ０．１未満 | 良好 |
| ０．２５以下 | 改善が必要 |
| ０．２５以上 | 低速 |
と判断されます。
『CLS に関する問題: 0.1 超（モバイル）』とは、簡単に言うとサイトスピードが遅いということ。
・記事を読んでいる途中で画像などが遅れて読み込まれ、読んでいる箇所がずれる。
・タイムラグが原因で、意図しない誤クリックが発生する。
これではサイトからの離脱者が出してしまうので、たしかに改善が必要です。
サイトも人生もサクサク行きたい（生きたい）よね。
CLS に関する問題: 0.1 超（モバイル）を解決
問題の記事をGoogleのPageSpeed Insights（サイトスピードを計れる所）で計測してみました。
GoogleのPageSpeed Insightsではサイト全体のスピード・記事のスピードが計れます。
４２・・・だと・・・？
コレはひどい。
仮にもウェブサイト運営者を名乗っていてこの数字はナイ・・・。
しかしその後キチンとサイトスピードを【良好】に戻すことに成功したので、安心してくださいね！
悲しみつつも下へスクロールしていくと、サイトスピードを早くする方法として【改善できる項目】がサイトスピードを短縮できる順番に教えてくれています。
親切！
改善できる項目をクリックすると、改善方法をより詳しく教えてくれます。
例えば、わたしのサイト記事に出ている改善項目【次世代フォーマットでの画像の配信】をクリックすると
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。【WordPress】
PageSpeed Insights
アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。
と出てきます。
つまり、画像が大きいということです。
わたしはサイトをWordPressで作っているので、WordPressのプラグインを使った改善方法も提示されているのでしょう。
１つの記事に対して６つの改善・・・それが１７０記事・・・。
ちなみに300日間、毎日更新をしてサイトの記事数自体は300記事を越えています。
仕事の合間にチマチマ頑張って直していきます・・・。
ただし！
わたしのようなブログ運営者はGoogleのPageSpeed Insightsがいうような『JPEG 2000、JPEG XR、WebP』の運用は不向きです。断言します。
くわしくは下記の目次『改善できる項目を１つづつ詳しく見る』で紹介しています。
他の改善できる項目についても説明しています。
CLS に関する問題: 0.1 超（モバイル）の改善点としては３つ。
・画像を圧縮する
・不要な画像を削除する
わたしの場合、改善する点は２つありました。
１つ目が、サイトを運営し始めた初期の頃、画像の大きさを一切考えずに貼り付けていました。
画像を適切なサイズにしなければならないと知ってから、全ての記事内の画像を差し替えましたが、アイキャッチのことをすっかり忘れており、アイキャッチの画像サイズが過去の大きいままだったのです。
２つ目が広告に問題がありました。
元々は広告を『手動で少なめ・位置を調整』していましたが、先日WordPressのテーマを無料から有料に変更した際に広告が自動広告になり、広告の量は少なめに設定していましたが、広告の位置が悪くサイトスピードが大幅に下がっていたようです。
記事内の本文に関係のないような画像は削除することでエラーが０へ改善できました。
LCP の問題: 2.5秒 超（モバイル）の原因
LCP（Largest Contentful Paint）とは、
簡単に言うと、読者がサイトURLをクリックして画像・動画・音声を生成するまでにかかる時間のことです。
『LCPの問題：2.5秒 超（モバイル）』はサイトURLをクリックしてもなかなか画像・映像・音声が再生されないことによる、サイト離脱者を防ぐための指標です。
LCP の問題: 2.5秒 超（モバイル）を解決
| 2.5秒未満 | 良好 |
| 4秒以下 | 改善が必要 |
| 4秒以上 | 低速 |
となっています。
『LCPの問題：2.5秒 超（モバイル）』とは簡単に言うと、画像・動画・音声が表示されるのに時間がかかるということ。
解決策としては記事全体が『良好』と判断される2.5秒以下で表示されるようにする。
具体的な解決策としては記事をGoogleのPageSpeed Insightsで検索し、『改善できる項目』を確認・実行していきます。
各改善できる項目については次の見出しで１つずつ紹介しています。
【CLS に関する問題】改善できる項目を１つずつ詳しく見る
サーチコンソールの【ウェブに関する主な指標】でCLS・LCPに改善が必要と判断されました。
CLS・LCPはサイトスピードに関連する改善が必要な項目です。
GoogleのPageSpeed Insights（サイトスピードを計れる所）で問題の記事を計測すると改善できる項目がサイトスピードを短縮できる順番で表示されます。
CLS・LCPの改善できる項目を１つずつ見ていきましょう。
自分用の覚書です。
よかったら活用してくださいね。
次世代フォーマットでの画像の配信を解決
今までは記事に載せる画像は『PNG・JPEG・GIF』が一般的でしたが、次世代フォーマットとして『JPEG2000・JPEG XR・WebP』を使用することで、ページ表示速度が上がるとGoogleのPageSpeed Insightsで推奨されています。
JPEG2000とはなんぞや？
JPEG2000
JPEG2000はJPEGの進化系。
2000年から公開されています。・・・知らなかった。
拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」。
進化系なので、もちろんJPEGよりも高性能でJPEGではできなかった可逆圧縮ができるようになっています。
現在のカバー率はおよそ14%、Safariのみ対応しているためWindowsやAndroidのユーザーを想定すると導入は好ましくありません。またその表現力の高さゆえ、画像処理の負担が大きく、画像点数の多いサイトには向きません。Webp同様、閲覧できないブラウザへの対応が必要になります。
WEBLAB
JPEG XR
JPEG XRはMircorosftにより開発された、JPEGに替わる規格として画像フォーマットです。
拡張子は「.hdp」「.wdp」「.jxr」。
WEBLAB
JPEGと比べてノイズが少なくキレイな画像表現が特徴で、圧縮率が高いです。半透明の表現もでき、可逆圧縮・不可逆圧縮の双方に対応しています。
IE、Edge のみ対応しているため、macやiPhoneのユーザーを想定すると導入は好ましくありません。
WebP（ウェッピー）
WebPはGoogleが開発している静止画のフォーマットです。
ファイルの拡張子は「.webp」。
WEBLAB
JPEGやPNGをそれぞれ30％程度圧縮できるといわれています。アニメーションの表現もでき、PNGのような透過表現にも対応しています。
WebPは、IE、Safariが未対応のため、iPhoneユーザーの多い日本ではWebPを閲覧できるユーザーは35%程度です。閲覧できないブラウザでは、JPGやPNGなど別の画像を表示させる対応が必要となります。
GoogleのPageSpeed Insightsでは『JPEG2000・JPEG XR・Webp』が推奨されているが、わたしのようなサイトには不向きということです。
なので、『次世代フォーマットでの画像の配信』の改善策としてあげられるのは3つ。
１）広告を調整する
アドセンス広告を自動広告にしていませんか？
自動広告でも広告の量は調整できますが、記事のいたるところに広告が出るため、タイトルのすぐ下などに出るとサイトが重く、レイアウトの移動の原因になります。
手動広告に切り替え、広告の量・場所を適切にすることでサイトスピードを上げ、サイトの離脱者を減らすことが期待できます。
２）不要な画像を削除する
記事に載せている画像で必要性の低い装飾のための画像は削除していきましょう。
過度な装飾は避け、できるだけテキストで表示させることでサイトスピードを上げられます。
３）画像のファイルサイズを最適化する
サイトに合った画像サイズにすることでサイトスピードを上げることができます。
写真ならJPEG・単色イラストならGIFに使い分ける。
圧縮ファイルを使用する。
WordPressなら投稿した画像を自動で圧縮してくれるプラグイン『EWWW Image Optimizer』がオススメ！
わたしも使用しています。
レンダリングを妨げるリソースの除外を解決
レンダリングとは画像・動画・音声を生成すること。
つまり記事内の画像・動画・音声を生成するときに邪魔になる要素を除外する、ということになります。
読者がサイトに訪れると記事を上から下に向かって読み進めますよね。
記事を読み進めていく上で、大きな画像や動画・音声ファイルがあると、読み込みに時間がかかり記事を読む行為が止まってしまう・離脱者が出てしまうおそれがあります。
これはぜひとも回避したいですよね。
レンダリングを妨げるリソースの除外の解決策としてWordPressのプラグインがあります。
・Autoptimize + Async JavaScript (無料)
プラグインAutoptimize + Async JavaScriptを入れます。