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

ブログ運営

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

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

PCの表示速度は80なので許容範囲かなと思いますが、モバイルの表示速度は46と確かに低速です。
当ブロブに訪問してくれる方の7割弱がモバイルデバイスからのアクセスなので、この表示速度が遅いのは致命的です。

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

PageSpeed Insightsではサイトスピードを計測した際に改善できる項目について言及してくれます。下の画面のような感じです。
改善できる可能性がある項目と短縮できる時間が表示されます。
私の場合は何点か改善すべき項目が提案されましたが、例えば画像中の指差しで示した部分はオフスクリーンの遅延を行えば11.1秒短縮できる見込みという意味となります。

これを改善できたら11秒も表示速度が速くなるじゃないか

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

改善策を実行した結果がこちらです。

モバイル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タグを開きます。

☑チェック項目JavaScriptコードの最適化

AggregateJS-files?

上から2つの項目に☑を入れます。

②CSSオプション

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

☑チェック項目☑CSSコードを最適化

AggregateCSS-files?

☑インラインのCSSを連結

上から3つの項目に☑を入れます。

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

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

☑チェック項目

☑HTLMコードの最適化

☑その他オプションの3項目

その他オプションの3つの項目はデフォルトで☑が入っていますのでそのままでOKです。

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

まとめ

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

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

②『Autoptimize』の設定を行う

以上です。ホントに簡単でした。

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

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

 

コメント