【改善】LCPの問題:2.5秒超(モバイル)の改善方法 / 意外と簡単に改善しました!

how to/備忘録
how to/備忘録ブログ運営
スポンサーリンク

ブログのPVを伸ばすためには「良質なコンテンツ」を増やすというのは当然ですが、SEO対策も同時に行っていかなければなりません。

GoogleサーチコンソールはSEO的に自身のブログにどんな問題があり、どう改善すべきかを教えてくれる大変ありがたいものです。

私のブログも「ページエクスペリエンス」の「ウェブに関する主な指標」で、「LCP の問題: 2.5秒 超(モバイル)」という問題が発生していました。


▼しかも、対象URLは65件という数でした。


この問題の対策と改善方法について記事にしましたので、同じ状況の方の参考になれば嬉しいです。

LCPの問題:2.5秒超(モバイル)とは?

LCP ( Largest Contentful Paint )(モバイル)

簡単に言うと、スマートフォンなどのモバイル端末での読み込み速度が遅い!ということ。

該当ページ内で1番大きなサイズのコンテンツ(画像など)が表示されるまでの時間が、Google推奨の時間(2.5秒)を超えています。

では、2.5秒を超えているとどんな不具合があるか言うと、直帰率に影響を及ぼしてしまいます。

▼Googleサーチコンソール:ウェブに関する主な指標レポート

ウェブに関する主な指標レポート - Search Console ヘルプ


その結果、検索順位にも影響が出てきてしまいます。
表示速度が遅いブログは検索順位を下げます、ということです。

原因分析:PageSpeed Insights を使用する

PageSpeed Insights

Googleが提供している「PageSpeed Insights」で原因を分析することができます。

自分のブログのURLを入力するだけで、以下のような指標が表示されます。

▲上段のLCPが2.7秒と表示されており、改善が必要となっているのが見て取れます。
パフォーマンスの点数も38点と低水準です。


▲さらに下段を見ると、細かな要因を探ることができます。
赤丸部分の「LCP」というところをクリックすると、その下に「LCP」に影響を及ぼしている要因とその影響時間の目安が表示されます。

私の場合は、「使用していないJavaScriptの削減」が最も大きな要因で、「かかった時間」の欄には2秒以上の時間が表示されていました。

これを解消できれば、かなり改善するのでは?との予想が立ちました。

使用していない JavaScript とは?

わかりにくい言葉ですが、簡単に言うとブログ記事に埋め込まれた「表示機能等」のことです。

詳しい説明は省きますが、以下のようなものが速度を遅くする要因になっていました。

・Googleアドセンス広告(影響大)

・Twitterの埋め込み(影響大)

・その他もろもろ(影響少ない)


そこで、これらのJavaScriptを削除することができるのか考えました。

結論はノー。

収益化を考える上でアドセンスは外せませんし、ブログの特性上Twitterとの連動も切りたくはないところです。

熟考の末、プラグインを導入するという結論に至りました。

対策:プラグイン 「Flying Scripts」 をインストール

このプラグインは、JavaScriptをいったん読み飛ばすプラグインです。
スクリプトの遅延ロードともいいます。

最初のレンダリング時にJavaScriptの実行を控えることによって、ページの読み込みが素早く終わるようになります。(ユーザーの操作が始まれば、スクリプトのロードが再開します。)

そのことによりGoogleの計測上は、LCPの改善につながるというものです。

▲ワードプレスのプラグイン追加の画面で検索してDLしてください。

プラグイン設定


これが私の設定画面です。

赤丸部分は当初空欄ですので、この4つの文言を入力しました。

コピー&ペーストして使って下さい。

adsbygoogle.js
gtag
show_ads_impl_with_ama_fy2021.js
twitter.com/widgets.js


上3つはGoogle関係のもの、4つ目がTwitter関係のScriptです。

記事内の画像が表示されなくなった

と、ここで不具合が発生していることの気付きました。

プレビューしてみると、記事内の写真や画像が表示されていません。


落ち着いて情報を調べていくと、他のプラグインと Flying scripts が競合してしまうことがあるとわかりました。

そこで、可能性のあるプラグインを一つ一つ無効化していくと原因がわかりました。

プラグイン「Jetpack」との競合


これが原因でした。

メジャーなプラグインなので導入している方も多いのではないでしょうか。

もし、インストールされているようであれば、真っ先に試してみてください。

私はJetpackをアンインストールしても機能を他のプラグインで代用できそうだったので、今回思い切って削除しました。

結果はどうなった?

当初のパフォーマンスは38点


プラグイン導入・設定後は89点


プラグインを導入し、設定を行っただけでこんなに向上するとは、、。

正直驚きでした。

画像圧縮やPHPの更新など他にもなすべき対策は色々ありますが、プラグイン導入がまだの方は早めに試してもらいたいです。

圧倒的な改善がみられる可能性があります。

その後

Googleサーチコンソールから、再度検証をリクエストしました。

28日以内に結果が出るとのことです。

PageSpeed Insights 上では良い結果が出ていますが、実際のユーザーの環境で評価するには一定期間のデータ収集が必要となるようです。

その結果についてはまた後日追記いたします。




▼さらにこちらの対策を行うことで、より効果を高めることができました。
「レンダリングを妨げるリソースの除外」に関する解決策です。あわせてご覧ください。

【解決】LCPの改善とレンダリングを妨げるリソースの除外方法 / PageSpeed Insights
本記事は、「レンダリングを妨げるリソースの除外」という項目をクリアし、実際にLCPを改善した体験談を記したものです。最終的には、Googleサーチコンソールで指摘されている「LCPの問題:2.5秒超(モバイル)」という項目を解消できました。私のブログ記事を例に、2ステップで改善した経緯をお伝えします。



10月21日追記:サーチコンソール上も改善が確認できました!

本日サーチコンソールを確認したところ、70件存在していた「改善が必要なURL」がすべて「良好なURL」へと改善していました。

28日を待たずにデータ収集が完了したようですね。

良い結果を得ることができ、とても嬉しいです。

これで安心して記事執筆に打ち込めそうです。



スポンサーリンク
smallworks

コメント