初心者用PageSpeed Insightsのパフォーマンスを改善【44→90】

PageSpeed Insights（ページスピード インサイト）とは

グーグルさんが提供している、ブログの読み込みスピードを計測してくれるサイトです。

先ずこちらで計測してください。　→　PageSpeed Insights

パフォーマンスが悪い原因　4つ

初心者の私がつまずいた原因は大きく分けて4つです。

①画像のサイズが大きい

「jpeg」や「png」は大きいサイズだと認識されました。

基本的にアイキャッチの画像はcanvaで作成しているの「png」です。

現在推奨されている画像フォーマットはグーグルが開発した「WebP（ウェッピー）」です。

画像を圧縮する方法は下記の2通りあります。

• プラグインを使用してサイトの画像を「WebP」に変換する
• ウェブ上で「jpeg」や「png」を「WebP」に変換する

①のプラグインを使用して、自分のサイトやブログで使用している画像を変換します。

今回は【EWWW Image Optimizer】を使用しました。

②のウェブ上で変換するには「pngからWebP」などググれば出てきます。

例えば【Ｉ♡ＩＭＧ】や【サルワカ道具箱】など無料で使用できるサイトがたくさんあります。

②JavaScriptを遅らせる

「JavaScript（ジャバスクリプト）」は、プログラミング言語の1つです。

Webブラウザが読み込むことによって、Webページ上に動きのある表現を付けることができます。

例えば画像に矢印（マウス）を置くと大きくしたり、

グーグルのサーチコンソールやアナリティクス、アドセンスもスクリプトです。

それらの機能を同時に読み込むので、処理スピードが遅くなります。

あえてスクリプトを遅れて読み込ませることで、サイトやブログの表示スピードを改善します。

③余計なプラグインを削除する

色々効果があるプラグインがありますが、たくさんプラグインを入れていると

その分動作するので表示スピードは遅くなります。

プラグインを減らすのも表示スピードを改善する一つの手です。

④キャッシュを有効化する

キャッシュとは一度ブラウザが表示したページのデータを保存する機能です。

初回アクセス時より早くページを表示できます。

デメリットとしては、ユーザー側が色々なサイトのキャッシュが溜まりすぎてブラウザの動作が遅くなります。

PageSpeed Insightsのパフォーマンスを44→90にした方法

これが・・・

頑張って・・・

画像変換したり・・・

ジャバスクリプトをいじったり・・・

余計なプラグインを削除したり・・・

・・・

すると・・・

・・・

表示スピードはグーグルアドセンスの合否にも影響すると言われています。

改善後グーグルアドセンスに見事合格しました。

ページスピードインサイト　パフォーマンス改善　44→90

①現状把握

②画像圧縮

③ジャパスクリプト調整

上記3点で改善しました。