【5分でできる】Search Consoleに指摘されたWebサイトの表示スピードを改善する方法

Google Search Consoleでサイトの表示速度に問題があるとの指摘が・・。SEOに影響があるとかないとか。とにかく改善は必要なようですので対策を講じることにしました。

Google Search Consoleによると当ブログの記事はすべて低速との評価でした。低速とはどの程度遅いのかよくわからないのでサイトのスピードを計ってくれる便利なサイト参考PageSpeed Insightsで調べた結果がこの下です。

改善項目に”オフスクリーン画像の遅延読み込み”がある場合

というわけで改善策を探してみました・・。そして・・

補佐代理

モバイル46から87へ劇的に改善しました！
PCも94とほぼ満点に近いスコアへ改善です。

これはすごい。しかも簡単でした。これから具体的に書いていきます。

オフスクリーン画像の遅延読み込みを行うための手順

ここからはサイトの表示速度を改善する具体的な手順について説明していきます。

私の場合はオフスクリーン画像の遅延読み込みを行うようにすればかなり表示速度を改善できるようなのでここをまずやっていきます。

オフスクリーン画像の遅延読み込みとは、読者がサイトに訪れた際に画面に表示されている部分だけの画像を読み込むもので、画面に表示されていない部分の画像はスクロールで表示されてから読み込むというものです。

通常の画像の読み込みでは画面にまだ表示されていない画像まで一気に読み込むので表示するまでに時間がかかるのです。

オフスクリーン画像の遅延読み込みを行うとサイト表示速度が上がるというもので、これがプラグインの導入だけで実装できます。

このプラグインがAutoptimizeです。次項より実装の手順をご紹介します。

プラグインAutoptimizeをインストールし有効化する

お使いのWordPress（ワードプレス）でダッシュボード⇒プラグインと進み、新規追加をクリックします。キーワード検索でAutoptimizeと入力すると下記画面のようにでてきますのでインストールします。

インストールが完了したら『有効化』ボタンを押して適用させます。

続いて簡単な設定を行います。

Autoptimizeの設定（オフスクリーン画像の遅延読み込み）

WordPress（ワードプレス）でダッシュボード⇒プラグインと進み、先ほどインストールし有効化したAutoptimizeの設定画面を開きます。

Autoptimizeの設定画面で【images】タグを選択すると上の画面がでてきます。点線で囲った”Lazy-load images?”の項目に☑を入れて下さい。

これでオフスクリーン画像の遅延読み込みに対応できるようになります。

Autoptimizeの設定（JavaScript,CSS,HTLMのコード最適化）

Autoptimizeには他にもサイトの表示スピードを改善するのに役立つ項目があります。設定は先ほどのAutoptimize設定から行えるので合わせて設定してしまいましょう。

①JavaScriptオプション

Autoptimize設定画面のJS,CSS＆HTLMタグを開きます。

②CSSオプション

同じくAutoptimize設定画面のJS,CSS＆HTLMタグ内にCSSオプションがありますので先ほどのJavaScriptオプションから下にスクロールして下さい。

③HTLMオプション、CDNオプション、キャッシュ情報、その他オプション

HTLMオプション、CDNオプション、キャッシュ情報、その他オプションで☑を入れるのはHTLMオプションとその他オプションとなります。CDNオプション、キャッシュ情報は特に何もしなくてOKです。

上記の項目に☑を入れ終わったら”変更を保存”を押して設定を反映させて終了です。

まとめ

色々書いてきましたが実際やることは簡単です。おさらいすると

①プラグイン『Autoptimize』をインストールし有効化する

②『Autoptimize』の設定を行う

ひとつ注意点は、画像の遅延読み込みを行うために、すでに他のプラグインを入れている場合はプラグインが干渉し合うと逆に動作に不具合が生じる可能性があるので、下の”Lazy-load images?”の項目に☑を入れないでください。

以上に注意して是非お試し下さい。