LCPの問題:2.5秒超(改善が必要)の対応について【Search Console】

LCPの問題:2.5秒超について

Search Consoleの『ウェブに関する主な指標を』クリックしてみたら改善が必要なURLがモバイル・PC共に100ページ以上あると表示されました。サイトに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)

Googleが提供するPageSpeed InsightsというサイトでURLを入力して実行すると遅延の原因に関する分析結果が得られます。

早速サイトを分析してみたところ、モバイルとPCで結果が大きく異なりました。当サイトのモバイルとPCの違い・・モバイルにだけオリジナルのカルーセルを表示させているのが主な原因と考えられます。

反映は概ねリアルタイム

基本的には『現在のサイトの状態』を素直に反映している様なのでリアルタイムと考えて良いと思います。しかし、特に画像系はキャッシュの関係で実施した対策が反映されるまでに時間がかかる場合がありそうです。※PageSpeed Insights のせいではなく

LCP問題への対策

当サイトはWordPress / Cocoon を利用しています。それをベースに以下の対策を実施しました。

Cocoon 高速化設定

Cocoonの高速化は以前に設定済みでした。設定は勿論ですが、何よりわいひらさんの解説ページがとても役に立ちました。確かに注力すべきは記事の内容だと納得。是非ご一読を。

Cocoonおすすめのサイト高速化設定

Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

wp-cocoon.com

キャッシュ削除

1番重い画像を削除した直後、分析結果には『まだその画像が1番重い』と判定されたので、画像についてはキャッシュの問題でタイムラグがありそうです。

このままでは画像を削除した事の効果が分からないので、Cocoon 側で「全てのキャッシュをクリア」を実施しました。多少のリスクもありますので確認してから試しましょう。

画像圧縮(EWWW Image optimizer)

まず EWWW Image Optimizer というWordPress のプラグインをインストールして画像の一括最適化を実行。画像が7,000枚程あったせいなのか5〜6時間くらいかかりました。※やり方の問題かもしれません

カスタマイズコードの見直し

素人が都度やりたいカスタマイズを実施してきてしまったので、スタイルシートやjavascriptなどのコードの見直しと整理を実施しました。

調べてみると皆さん独自にコードのレイアウトや入力ルールを決めていらっしゃる様なので、私も独自にルールを定めてお片付けしました。LCPの問題解決に直結はしませんでしたが勉強になった事がたくさんあったので、私的にはココが1番の収穫です。

対策後の検証結果とまとめ

他にも調査や対策をしてみましたが、モバイルにカルーセルを表示させている事が問題ではなく『カルーセルに表示させている画像が重いのばかり』という事が分かりました。

結論、「画像重いです問題」を解決するには画像フォーマットをJPEG 2000・JPEG XR・WebPなどの次世代フォーマットに変えていくしかない様です。

ちなみに、大したカスタマイズしてないから？かも知れませんが、AMPを有効にしても結果はそこまで良くなりませんでした。

画像の大きさや容量の見直し

要するに画像フォーマットはWebPにしようがポイントであり、Googleがそれを推している感じが伝わってきます。2020年11月時点ではSafari未対応のWebPですが、対応予定との噂もあるので早めに準備しておきたいところ。

とはいえ、ミスチルの歌じゃないですが、誰かが何とかしてくれるのを待っているだけの私がいます。

というのもWebPへの変換方法が思ったより難しそうなのです。.htaccessとか出てくると素人としては悩ましいところ。

Lazy Load (Smush)

LCPとは少し違いますが、ブラウザの読込速度が極端に遅くなって困っていた時にLazy Loadという言葉に出会いました。その流れでSmushというプラグインをインストールしたのですが、これがまた効果抜群でしたので参考にどうぞ。

SmushのLazyLoad機能によりサイトの読込速度が改善【WordPress】

自分が運営するサイト(cocoon)の読込速度が急激に遅くなりWordPressプラグインsmushのLazyLoad機能により改善。原因の切り分け方法やカスタマイズコードの整理など対応策。

unity-right.com

Squoosh

Google Chromeの開発チームが作ったというSquoosh。サイト上で簡単に画像圧縮ができると知ったので早速試してみました。PageSpeed Insightsで酷評された特に重い画像をいくつか試してみたところ、概ね80〜90%のサイズダウンという驚きの結果となりました。

PNGって勝手に軽いイメージを持っていましたが、JPEGの方が軽いんですね。。話題のWebPにも変換可能ですが、WordPressにアップロードするとエラーになるので何かしら設定が必要みたいです。噂の.htaccessですかね・・

まとめ

PageSpeed Insights は自分のサイトだけでなく他者のサイトも分析できます。試しに他者サイトをいくつか分析してみると考え方が変わるかも知れません。

ポイントを改善させる対策はまだ残っていますが、当サイトの場合は必要な機能やデザインを捨てる事になります。そこまでする必要は無いと考えますが、今できる最低限の事はやろうと思いました。