LCPの問題:2.5秒超について
Search Console の『ウェブに関する主な指標』を何となくクリックしてみたら、改善が必要なURLがモバイル・PC共に100ページ以上（たぶん全ページ）あると表示されました。
これについて調べた事・試した事を纏めてみましたので、何かの参考にしていただければと思います。
LCPの問題とは
LCP ( Largest Contentful Paint )
簡潔に言うとページの読込み速度が遅いという事。ページ全体の読込み速度ではなく、該当ページ内で1番大きなサイズのコンテンツ(主に動画や画像)が表示されるまでの時間がGoogleの推奨する時間(2.5秒)を超えているという事です。
超えているから直ちに悪いという訳ではなく「改善の余地があるかもよ」というGoogleさんからの有難いご指摘です。
直帰率やSEOに影響する
ページの読み込み時間が遅いと何が起こるのか？ Search Console のヘルプセンターには直帰率に影響すると明記されており、具体的な数値も掲載されていました。
直帰率が高い当サイトとしては疎かにできないところであり、SEOにも関係してくるとなるとアクセス数も少ない当サイトとしては踏んだり蹴ったりです。
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
・ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。
・ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加します。
2020/10/5 Search Console ヘルプセンター ウェブに関する主な指標レポート
分析方法【PageSpeed Insights】
PageSpeed Insights というサイトで、遅延の原因や改善点を確認する事ができます。
一般的にはモバイルのスコアがPCに比べて少し低くなる様です。当サイトはモバイルにだけオリジナルのカルーセルを表示させているので、その影響もあって大きな差がありました。
| ラボデータ | モバイル | PC |
|---|---|---|
| First Contentful Paint | 4.3秒 | 1.1秒 |
| Speed Index | 7.7秒 | 1.9秒 |
| Largest Contentful Paint | 20.8秒 | 2.0秒 |
| Time to Interactive | 8.4秒 | 1.6秒 |
| Total Blocking Time | 500ミリ秒 | 20ミリ秒 |
| Comulative Layout Shift | 0.468 | 0.093 |
フィールドデータは過去の統計的なデータとなっているので、数値が随時変わる訳ではありません。
その為、現在の状態を確認したい場合はラボデータをチェックします。しかし、特に画像系はキャッシュの関係なのか、すぐに結果に反映されない事がありました。
- 画像圧縮 → すぐにスコアは変わらず
- カルーセル非表示 → 即スコアに反映
- 重い画像を削除 → まだその画像が重いと
LCP問題への対策
当サイトは WordPress / Cocoon を利用しています。それをベースに以下の対策を実施しました。
- 高速化【Cocoon】
- 画像圧縮【新規】
- 画像圧縮【既存】
- 遅延読込み
- カスタマイズコードの見直し
Cocoon 高速化設定
Cocoonの高速化は以前に設定済みでした。設定は勿論ですが、何よりわいひらさんの解説ページがとても役に立ちました。確かに注力すべきは記事の内容だと納得。是非ご一読を。
画像圧縮【新規】
新たにサイトにUPする画像についてはSquooshというサイトでサイズダウンしてからアップロードする事にしました。
かなり効果が高いので、是非試してみてください。
twitter の画像も影響するので、タイムラインを埋め込んでいる場合などは、twitter にUPする画像も圧縮しておいた方が良いです。
画像圧縮【既存】
既存の画像は EWWW Image Optimizer というWordPress のプラグインをインストールして、画像の一括最適化を実行。
画像が7,000枚程あったせいなのか、5〜6時間くらい掛かりました。※やり方や画像の状態の問題かもしれません
遅延読込み
「レンダリングを妨げるリソース」の対策として Autoptimize というプラグインをインストールしました。
Autoptimize は JavaScript や CSS を最適化してくれる機能があり、PC・モバイル共に10〜15くらいスコアが改善しました。
Lazy-Load 機能も付いていて、指定したクラスを除外する事も可能です。当サイトの場合は他との競合や干渉も無さそうなのでONにしています。
カスタマイズコードの見直し
自分が書いてきたコードを見直してみると「そのカスタマイズ本当に必要？」というものが多々ありました。
コードのレイアウトや入力ルールを決めている方が多い様なので（それが基本なのかも知れませんが）、私も独自にルールを決めてカスタマイズの大掃除を実施。
対策後の検証結果とまとめ
調査の結果、モバイルのカルーセル表示も要因ですが、それ以上に『カルーセルに表示させている画像が重い』という事が分かりました。
| 対応内容 | モバイル | PC |
|---|---|---|
| 対応前 | 14 | 60 |
| ①画像圧縮 | 15 | 59 |
| ①&②1番重い画像削除 | 27 | 64 |
| ①②&③カルーセルOFF | 53 | 69 |
| 翌日(①画像圧縮・②重画像削除・③カルーセルOFF) | 54 | 93 |
スコアはかなり改善しましたが、カルーセル（画像のスライドショー）は必要なのでその後ONにしています。
他にできる事があるとしたら、画像フォーマットを JPEG 2000・JPEG XR・WebP などの次世代フォーマットに変えるしか無さそうです。
画像サイズ・容量に気をつける
画像はWebPにが1つのポイントであり、Google が特にそれを推奨している感じを受けます。
しかし、WebP 画像を WordPress にアップロードしようとするとエラーになりました。(2020年11月時点)
ブラウザや設定の問題かも知れませんが、いずれにしてもプラグインで対応した方が良さそうです。
まとめ
PageSpeed Insights は自分のサイトだけでなく他者のサイトも分析できます。試しに他者サイトをいくつか分析してみると考え方が変わるかも知れません。
スコアを改善させる方法はまだ残っていますが、必要な機能やデザインを捨てるのは考えものです。
そこまでする必要は無いと思いますが、一応サイト運営者として今できる最低限の事はやろうと思いました。
- 既存の画像圧縮・サイズ調整
- 新たな画像はSquoosh実施後にUP
- カスタマイズコードの整理
おすすめプラグイン・ツール
主に画像圧縮系で役立ちそうなプラグインやツールを纏めておきます。
Smush
LCPとは少し違いますが、ブラウザの読込速度が極端に遅くなって困っていた時に Lazy Load という言葉に出会いました。
その流れでSmushというプラグインをインストールしたのですが、効果が高かったので別の記事に纏めています。
Squoosh
Google Chrome の開発チームが作ったというSquoosh。サイト上で簡単に画像圧縮ができると知ったので早速試してみました。
PageSpeed Insights で酷評された特に重い画像をいくつか試してみたところ、概ね80〜90%のサイズダウンという驚きの結果となりました。
PNGって軽そうなイメージを持っていたのですが、JPEGの方が軽いんですね。。
EWWW Image Optimizer
サーバー側の.htaccess へコードを追加する必要がありますが、このプラグインでWebPに対応できます。ただ、Smushと役割が競合してしまうので、並行利用せずで。
画像圧縮とWebPによりLCP系のスコアはかなり改善されました。
ただ、Lazy Load を有効にすると一部の記事のアイキャッチ画像が表示されなくなりました。※他のプラグインとの競合・設定の問題かも知れませんが
Comment