ノウハウ
PR

【簡単解決】LCP の問題2.5秒 超(モバイル)の改善方法!

wp@taki7-
※アフィリエイト広告を利用しています

 突然、Google Search Console で「LCP の問題2.5秒 超(モバイル)」が表示されたため、色々調べた結果、解決が出来ましたので、その対応法について記事として纏めました。参考にして頂けますと幸いです。


結論
 LCP2.5秒超の改善のため、Flying Scriptsプラグインを導入し、遅延読込するJavaScript名を指定することで改善が見込めます。

記事内広告

そもそもLCPとは

画像:問題時の値

 Google検索の検索結果に影響するCore Web Vitalsの指標の1つである。 
そのため、LCPの改善が検索結果に良い影響を与えると考えます。

LCPは、Largest Contentful Paint(LCP)と言う。そのサイトの最も大きなコンテンツを測定し、Googleが決めたページ読込時間の基準で判定する。

Googleが決めた基準は下記の通り

  • 2.5 秒以下 : 良い(高速)
  • 4.0 秒以下 : 問題あり(中程度)
  • 4.0 秒以上 : 非常に問題(遅い)

参考:
https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja

https://web.dev/articles/lcp?hl=ja

LCP2.5秒超の問題をPageSpeed Insightsで確認

画像:改善前の数値
画像:改善前のLCP値

 PageSpeed Insightsのパフォーマンス結果は、下記の通り。

LCPは、基準の2.5秒以内を大きくオーバーしておりました。

  • パフォーマンス:31
  • LCP:4.28秒
    ※使用していないJavaScriptの削減
    ※レンダリングを妨げるリソースの除外
    ※使用していないCSSの削減

Flying Scriptsプラグインをインストール

画像:プラグイン追加画面

 Flying Scriptsは、JavaScript の実行を遅らせる遅延プラグインです。

 JavaScript ファイルに優先順位付けし、スクリプトを読込することで、ページ読込速度が改善。その結果、LCPの改善が期待出来る。

※設定後はサイトに不具合が無いかは確認が必要

WordPress → プラグイン → 新規追加より、Flying Scriptsをインストールする。

下記画像は、Flying Scriptsの設定画面。
Include Keywords」の項目に指定するJavaScript名については、次の手順で調査します。

画像:Flying Scripts設定画面

LCP2.5秒超の問題がある JavaScriptキーワードの確認方法

画像:PageSpeed Insights

 再び、PageSpeed Insightsの画面に戻ります。
※ここからは、サイト毎にJavaScript名が異なります(画像は筆者サイトの場合)

 「パフォーマンスの問題を診断する」の下に、「改善できる項目」があるので、『使用していないJavaScriptの削減』をクリック。すると、Google的に改善が必要なJavaScript名が表示される。

 筆者サイトの調査結果(同じ場合は、JavaScript名をコピペOK)

  • adsbygoogle.js
  • gtag
  • gtm.js
  • www-widgetapi.js
  • vcdal.js

①キーワード:adsbygoogle.js

②キーワード:gtag

③キーワード:gtm.js

④キーワード:www-widgetapi.js

⑤キーワード:vcdal.js

Flying ScriptsプラグインでJavaScript名を指定

画像:設定画面

 再び、WordPress のFlying Scriptsプラグイン設定画面へ戻ります。

  1. 調査したJavaScript名を「Include Keywords」へ記載
  2. Timeoutはそのまま
  3. Save Changesをクリック

PageSpeed InsightsでLCP2.5秒超の問題が改善したか確認を実施

 下記の画像をご確認ください。
プラグインの設定だけで大幅な改善となりました。

  • パフォーマンス : 31 → 74(+43)
  • LCP : 4.28秒 → 1.17秒(-3.11)
    ※使用していないJavaScriptの削減
    ※レンダリングを妨げるリソースの除外
    ※使用していないCSSの削減
画像:改善前
画像:改善後
画像:改善前
画像:改善後

Google Search ConsoleでLCP2.5秒超の問題解決をGoogleへ通知

画像:解決後の値

 以上、PageSpeed InsightsでLCPの改善を確認しましたので、最後にGoogle Search Consoleにて、LCP の問題解決をGoogleへ通知します。

 修正の検証をクリック後のメッセージでは、「28日以内に完了します」と記載でしたが、自分の場合は上記の通り、翌日には問題が解決しておりました。

画像:修正検証依頼前
画像:修正検証依頼後

LCP の問題2.5秒 超(モバイル)改善方法のまとめ

まとめ
  • そもそもLCPとは
  • LCP2.5秒超の問題をPageSpeed Insightsで確認
  • Flying Scriptsプラグインをインストール
  • LCP2.5秒超の問題がある JavaScriptキーワードの確認方法
  • Flying ScriptsプラグインでJavaScript名を指定
  • PageSpeed InsightsでLCP2.5秒超の問題が改善したか確認を実施
  • Google Search ConsoleでLCP2.5秒超の問題解決をGoogleへ通知

 Flying Scriptsプラグインを導入し、問題のJavaScript名を指定するだけで、LCP の問題2.5秒 超(モバイル)が改善されるため、お勧めします。

 導入する事でLCP以外にパフォーマンスの改善効果があると思いますので、プラグインを増やしたくない方でも検討してみては如何でしょうか。

この記事を読んで役に立ちましたら幸いです。

 他に生活改善情報記事を作成していますので、宜しければ、下記から読んで頂けると嬉しです。

合わせて読みたい
住信SBIネット銀行のメリット10選・デメリット|手数料優遇・アプリが便利
住信SBIネット銀行のメリット10選・デメリット|手数料優遇・アプリが便利
合わせて読みたい
ふるさと納税の仕組みから人気の返礼品が分かる!初心者向け!!
ふるさと納税の仕組みから人気の返礼品が分かる!初心者向け!!
合わせて読みたい
【2024年11月分】40代の家族3人が利用する、簡単で無料の家計簿アプリをご紹介!(家族で共有も可能)
【2024年11月分】40代の家族3人が利用する、簡単で無料の家計簿アプリをご紹介!(家族で共有も可能)
ABOUT ME
タキ
タキ
ブロガー
 平凡なIT企業に勤める会社員であり、一児のパパです。

 元々、お得、節約に関する事が好きであったため、それに関するブログを発信しています。

記事の内容は、自分の実体験を中心に、便利情報を皆様に共有し、皆様と自分の生活の質の向上に繋がれば!と思い発信をしております。

まだまだ修行中ですが、YouTubeのリベ大等で学習しています。シティにはまだ入っていませんが、ブログ仲間も募集中!

 また、投資歴は、2008年のリーマンショックを経験していてブログは初心者ですが、ベテランと思います。 Twitterで独り言を言ってますので、そちらも良かったら、覗きに来てくれたら嬉しいです。

▼活動履歴
・2022年10月から
SNSでアフィリエイト活動開始

・2023年1月より
「タキの生活情報ブログ」立上げ試行錯誤しながら、サイトを育てています。
記事URLをコピーしました