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

2020.10.11
スポンサーリンク

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

Search Consoleの『ウェブに関する主な指標』を何となくクリックしてみたら改善が必要なURLがモバイル・PC共に100ページ以上あると表示されました。サイトに100ページくらいしか無いので要するに全部です。

LCPの問題とは

LCP (Largest Contentful Paint)

簡潔に言うとページの読込み速度が遅いという事。ページ全体の読込み速度ではなく、該当ページ内で1番大きなサイズのコンテンツ(主に動画や画像)が表示されるまでの時間がGoogleの推奨する時間(2.5秒)を超えているという事です。

超えているから悪いという訳ではなく「改善の余地があるかもね」という有難きご指摘です。

直帰率やSEOへの影響

ページの読み込み時間についてはSearch Consoleのヘルプセンターに直帰率に影響するとのことで、具体的な数値も掲載されていました。

直帰率が高い当サイトとしては疎かにできないところであり、SEOにも関係してくるとなるとアクセス数も少ない当サイトとしては踏んだり蹴ったりです。

ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:

・ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。

・ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加します。

2020/10/5 Search Console ヘルプセンター ウェブに関する主な指標レポート

分析(PageSpeed Insights)

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

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

PCとスマホでかなりの差が・・
ラボデータモバイルPC
First Contentful Paint4.3秒1.1秒
Speed Index7.7秒1.9秒
Largest Contentful Paint20.8秒2.0秒
Time to Interactive8.4秒1.6秒
Total Blocking Time500ミリ秒20ミリ秒
Comulative Layout Shift0.4680.093

概ねリアルタイムな反映

PageSpeed Insights リアルタイム感
  • 画像圧縮 → すぐにスコアは変わらず
  • カルーセル非表示 → 即スコアに反映
  • 重い画像を削除 → まだその画像が重いと判定

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

LCP問題への対策

実施した項目
  1. 高速化【Cocoon】
  2. キャッシュ削除【Cocoon】
  3. 画像圧縮 (EWWW Image optimizer)
  4. AMP
  5. カスタマイズコードの見直し

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番の収穫です。

検証結果とその後・・

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

対応内容モバイルPC
対応前14 60
①画像圧縮1559
– ②1番重い画像削除2764
– ③カルーセルOFF5369
翌日(①画像圧縮・②重画像削除)2889
翌日(①画像圧縮・②重画像削除・③カルーセルOFF)5493

画像重いです問題を解決するには画像フォーマットを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
2020.11.01

Squoosh

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

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

Comment

タイトルとURLをコピーしました