WordPress プラグイン ブログを始める

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

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

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

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

「速度の早いサーバを選ぶ」
「画像ファイルの最適化」

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

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

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

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

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

\当サイト使用WordPressテーマ/
サンプル
AFFINGER6

Autoptimizeとは

Autoptimizeとは

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

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

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

Autoptimizeの主な機能

  • HTMLの最適化
  • CSSの最適化
  • JavaScriptの最適化
  • 画像遅延読み込み
  • ファイルの結合

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

トド

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

Autoptimizeの設定方法

Autoptimizeの設定方法

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

今回の手順です。

Autoptimizeの設定手順

  • Autoptimizeをインストール・有効化する
  • JavaScriptオプション(初期設定①)
  • CSSオプション(初期設定②)
  • HTMLオプション(初期設定③)
  • 画像の最適化(初期設定④)

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

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

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

WordPress管理画面から

プラグイン > 新規追加

をクリックします。

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

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

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

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

JavaScriptオプション(初期設定①)

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

設定 > Autoptimize

をクリックします。

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

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

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

  • 「JavaScriptコードの最適化」にチェックをつける
  • 「JSファイルを連結する」のチェックを外す
  • 「連結しないで遅延」にチェックをつける

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

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

ココがポイント

HTTP /1.1なら「JSファイルを連結する」にチェックをつけたまま。HTTP /2なら、「連結しないで遅延」にチェックをつけましょう。

トド

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

CSSオプション(初期設定②)

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

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

  • 「CSSコードの最適化」にチェックをつける
  • 「CSSファイルを連結する」のチェックを外す
  • 「CSSのインライン化と遅延」にチェックをつける

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

ポイント

HTTP /1.1なら「CSSファイルを連結する」にチェックをつけたまま。HTTP /2なら、「CSSファイルを連結する」にチェックを外しましょう。

HTMLオプション(初期設定③)

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

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

「JavaScriptオプション」
「CSSオプション」
「HTMLオプション」

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

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

トド

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

画像の最適化(初期設定④)

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

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

画像の遅延読み込みとは、画面に出ていない画像はスクロールのタイミングで表示するという設定です。

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

トド

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

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

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

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

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

本日は、以上です。

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

-WordPress, プラグイン, ブログを始める
-, , , ,