LCPの問題:2.5秒超について
Search Console の『ウェブに関する主な指標』を何となくクリックしてみたら改善が必要なURLがモバイル・PC共に100ページ以上あるとの表示が。
LCPの問題とは
LCP (Largest Contentful Paint)
簡潔に言うとページの読み込みが遅いという事。ページ全体の読込速度ではなく、該当ページ内で1番大きなサイズのコンテンツ(主に動画や画像)が表示されるまでの時間がGoogleの推奨する時間を超えているという事です。
影響
Search Console のヘルプセンターには直帰率に影響するという具体的な数値が掲載されていました。直帰率が高い当サイトとしては疎かにできないところです。
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
・ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。
・ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加します。
2020/10/5 Search Console ヘルプセンター ウェブに関する主な指標レポート
私自身、読み込みが遅〜いサイトは見る前に閉じてしまう事もありますので、気持ちが分かると言ったら変ですが他人事ではありませんね。
対策
検証には PageSpeed Insights を利用しました。実際に試してみた対策は以下のとおりです。
- PageSpeed Insights【検証用】
- 高速化【Cocoon】
- キャッシュ削除【Cocoon】
- 画像圧縮 (EWWW Image optimizer)
- AMP
Cocoonの高速化は以前に設定済みでした。設定は勿論ですが、何よりわいひらさんの解説ページがとても役に立ちました。確かに注力すべきは記事の内容だと納得。是非ご一読を。
分析 ( PageSpeed Insights )
Google が提供する PageSpeed Insightsというサイト上でURLを入力して実行すると『遅延の要因』に関する分析結果が得られます。
早速サイトを分析してみたところ、モバイルとPCで結果が大きく異なりました。当サイトのモバイルとPCの違い・・モバイルにだけオリジナルのカルーセルを表示させているのが主な原因と考えられます。
反映はリアルタイム？
- 画像圧縮 → すぐにスコアは変わらず
- カルーセル非表示 → 即スコアに反映
- 重い画像を削除 → まだその画像が重いと判定
基本的には『現在のサイトの状態』を素直に反映している様なのでリアルタイムと考えて良いと思います。しかし、特に画像系はキャッシュの関係で反映に時間がかかる場合があると思われます。※PageSpeed Insights のせいではなく
画像圧縮(EWWW Image optimizer)
まず EWWW Image Optimizer というWordPress のプラグインをインストールして画像の一括最適化を実行。画像が7,000枚程あったせいなのか5〜6時間くらいかかりました。
キャッシュ削除
容量が1番重い画像を削除したのですが、直後の分析結果にはまだ『その画像が重い』と判定されたので、画像についてはキャッシュの問題かなと思いました。
このままでは画像を削除した事が良かったのか？意味が無かったのか？判断できないので、Cocoon 側で「全てのキャッシュをクリア」を実施しました。多少のリスクもありますので確認してから試しましょう。
検証結果
| 対応内容 | モバイル | PC |
|---|---|---|
| 対応前 | 14 | 60 |
| ①画像圧縮 | 15 | 59 |
| – ②1番重い画像削除 | 27 | 64 |
| – ③カルーセルOFF | 53 | 69 |
| 翌日(①画像圧縮・②重画像削除) | 28 | 89 |
| 翌日(①画像圧縮・②重画像削除・③カルーセルOFF) | 54 | 93 |
他にも調査や対策をしてみましたが、モバイルにカルーセルを表示させている事が問題ではなく『カルーセルに表示させている画像が重いのばかり』という事が分かりました。
さらに、それを解決するには画像フォーマットを JPEG 2000・JPEG XR・WebP などの次世代フォーマットに変えていくしかない様です。
ちなみに、大したカスタマイズしてないから？かも知れませんが、AMPを有効にしても結果はそこまで良くなりませんでした。
まとめ
今までアイキャッチの画像もサイズやデータの重さなど気にしていなかったので、今後は1ページ500kb未満・リソース50までという指標を参考にしながら作成してみたいと思います。
画像をWebPへ変換する方法を調べてみましたが、思っていたより難しそうですね。。素人ながら Google の狙いはそこなのかと感じています。無駄に重い画像はクロールとかSEO判定やらサーバーの負荷とか色々と問題があるんじゃないんですかね。(適当)
twitter の埋め込み画像なども影響するみたいですので、たまに検証してみた方が良さそうです。他にも CSS や javascript のコードも整理や見直しも実施しました。
サイトの読込が軽ければ良い訳ではなく内容も大事です。内容さえ良ければいい訳ではなく軽量化に努めるのもサイト管理者のマナーです。と頭の中は整理できましたがサイトの整理には時間が掛かりそうです。
Comment