【Webサイト高速化】Autoptimizeの設定方法・使い方【2021/5月更新】

悩んでいる人

サイトの表示速度が遅いのですが、何かいい対策はありませんか？

そんな疑問にお答えします。

Webサイトの表示速度を改善する施策には、

の他に、HTML、CSS、JavaScriptなどのソースコードを最適化することも挙げられます。

ソースコードも画像と同じく、読み込むのに時間を要するため、無駄を省くことで高速化できます。

そこでソースコード最適化におすすめなのが、今回紹介する「Autoptimize」というプラグインです。

「Autoptimize」は、WordPressのソースコードを最適化するものになります。

それでは、設定方法や使い方の紹介をしていきます。

＼当サイト使用WordPressテーマ／

AFFINGER6

Autoptimizeとは

「Autoptimize」とは、HTML、CSS、JavaScriptなどのソースコードを最適化するプラグインです。

具体的には、改行やスペースを圧縮することで高速化することができます。

「Autoptimize」の主な機能は以下の通りです。

ソースコードを最適化するだけでなく、画像を読み込む時間をずらしたり、複数のファイルを1つにまとめる機能があります。

トド

Webサイトを高速化するための機能が盛りだくさんだよ。

Autoptimizeの設定方法

それでは、プラグイン「Autoptimize」の設定方法をご紹介します。

今回の手順です。

この5つが、今回お伝えする設定内容になります。

Autoptimizeをインストール・有効化する

まずはじめに、プラグインをインストールしていきます。

WordPress管理画面から

をクリックします。

右上の検索ボックスで「Autoptimize」と入力します。

該当するプラグインを見つけたら、「今すぐインストール」をクリックします。

インストールが終了したら、「有効化」をクリックします。

これで、インストール・有効化は完了です。

JavaScriptオプション（初期設定①）

それでは、初期設定をしていきます。

をクリックします。

すると、設定画面に移動します。

まず、JavaScriptオプションから見ていきます。

こちらでは、下記の通りに設定をしましょう。

JSファイルを連結したほうが表示速度が早くなるように思えますが、これは「HTTP /1.1」の場合のみ。

「HTTP /2」だとかえって遅くなるため、連結しなくてOKです。

トド

あなたのサイトが「HTTP /1.1」「HTTP /2」どの通信かはこちらで確認できます。

CSSオプション（初期設定②）

続いて、CSSオプション設定です。

こちらは、下記の通りに設定をしましょう。

こちらもJavaScript同様、「HTTP /1.1」「HTTP /2」どちらの通信かで表示速度が変わってきます。

HTMLオプション（初期設定③）

続いて、HTMLオプション設定です。

こちらは、「HTMLコードを最適化」にチェックをつけましょう。

それぞれにチェックが付け終わったら、

「変更の保存とキャッシュの削除」をクリックします。

トド

これでWordPressのソースコードの設定は完了だよ！

画像の最適化（初期設定④）

最後に、画像の最適化の設定です。

こちらでは、「画像の遅延読み込み（Lazy-load）を利用」にチェックをつけ、「変更を保存」をクリックします。

始めからページ内の画像を読み込まず、スクロールするタイミングで画像を読み込むことで、サイトの表示速度を早くすることができます。

トド

お疲れ様でした。これで全ての設定が完了だよ！

まとめ　サイトの表示速度改善に欠かせないプラグインです

今回は、「Autoptimize」の設定方法をご紹介しました。

WordPressのソースコードを最適化するプラグインとなります。

Webサイトの表示速度が遅いサイトは、Googleから評価を下げてしまうので、ぜひプラグインを導入して対策しましょう。

本日は、以上です。

↓　他のプラグインはこちら