LCPやFCPの改善をする方法!ブログやサイトの表示速度を改善!

PageSpeed InsightでLCPやFCPを改善を改善したいと考えているのではないかと思います。

私はこれまでいくつかのサイトを立ち上げ、年に100万円以上稼げるようになりました。

今回、プラグインで簡単にLCPやFCPを改善する方法をご紹介します。

きっとブログやサイトの表示速度を向上させることができるでしょう。

LCPとFCPの改善をする方法!

LCPとFCPは下記の2つのプラグインを入れることで改善します。

さらにページエクスペリエンスも改善させることができます。

順に説明します。

  • Autoptimiza
  • Async Javascript

プラグインAutoptimize

プラグインの新規追加からAutoptimizeを追加します。

設定からAutoptimizeを選びます。

JSS,CSS&HTMLの設定を行います。

JavaScriptコードの最適化、連結しないで遅延をチェックします。

CSSオプションでは下記のCSSコードの最適化にチェックを入れます。

HTMLオプションではHTMLコードの最適化のみにチェックします。

その他オプションではすべてにチェックを入れます。

となりの画像タブにおいてはチェックは外します。

Async Javascript

次にAsync JavaScriptを入れます。

設定画面では下記のようにAsyncを設定します。

Deferにするとスマホで動画が再生されなくなります。詳細は下記を参考にしてください。

LCPとFCPスコアの変化

下記にFCPとLCPの携帯電話におけるスコアの変化を示します。

AutoptimizeとAsync Javascriptを追加することで特にFCPが1秒改善し、LCPも0.6秒の改善が見られました。

パフォーマンスも6ポイント改善し87になりました。

PCではトータルスコアは98です。

項目変更前Autoptimize追加Autoptimizeと
Async Java.追加
パフォーマンス818487
FCP2.42.31.4
LCP4.13.63.5

以下のスコアはAutoptimize, Async Javascriptを適用していない結果です。

以下のスコアはAutoptimizeを適用した結果です。

FCP2.4秒から2.3秒にわずかに改善しました。

LCPは4.1秒から3.6秒に改善しました。

以下のスコアはAsync Javascriptを適用した結果です。

FCPは2.3秒から1.4秒と大幅にに改善しました。

LCPは3.6秒から3.5秒にわずかに改善しました。

ページエクスペリエンスの変化

下記は2つのプラグインAutoptimizeとAsync Javascriptを入れた後のモバイルにおけるページエクスペリエンスを示します。

10月にAutoptimizeとAsync Javascriptを入れた後、良好URLが96%まで上昇しました。

またこれは感触ですが、サイトの検索順位も上昇しているように思います。

まとめ

LCPとFCPを向上させる方法についてご紹介しました。

AutoptimizeとAsync Javascriptを追加することで特にFCPが1秒改善し、LCPも0.6秒改善します。

携帯電話のパフォーマンスも6ポイント改善し87になります。

きっとあなたのサイトもLCPとFCPのスピードを改善できるでしょう。

PageSpeed Insightのスコアを50点台から90点台に向上させる方法は下記の記事を参考にしてください。

アフィリエイトのやり方は下記の記事をどうぞ。

おすすめのアフィリエイトサイトは下記の記事を参考にしてください。

アフィリエイトのおすすめツールは下記の記事をどうぞ。

商品リンクのおすすめは下記の記事をどうぞ。

私のブログの収益は下記の記事をどうぞ。

この記事の執筆者:ユウ

IT企業に20年以上勤務。行ってきた仕事で奨励賞やGrand Awardを受賞。博士号取得。現在、マネージャーとして勤務し、外国企業とのやり取りを英語で行いながら開発を進めている。個人のサイト運営も20年ほど行っており、年に約100万円程度の収益のあるサイトに育てる。現在、クラウドシステムはアマゾンAWSを使用しており、AWSや役に立つサイト運営情報も発信中。AWSに関する情報発信ではグーグルトップページで表示。

副業
ユウカレッジ
タイトルとURLをコピーしました