Autoptimizeの使い方をわかりやすく解説【サイト高速化プラグイン】

Autoptimizeというプラグインを使えば、サイトを高速化できるって聞いたんだけど、詳しい使い方や設定方法を教えてほしい。

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

サイトの表示速度を高速化させるにはいくつか方法があります。その中で1つ有効な対策として知られているのが、ソースコードを圧縮することです。

そして、ブログ初心者でも簡単にソースコードを圧縮できると人気なのが、「Autoptimize」というプラグインです。

本記事では、Autoptimizeの使い方や設定方法を、ブログ初心者向けにわかりやすく解説していきます。

ソースコードって何ぞや？って人も多いと思うので、そのあたりもかみ砕いてご紹介しますね。

早速見ていきましょう。

Autoptimizeとは？

『Autoptimize』は、ソースコードを圧縮してサイトの表示速度を高速化できるプラグインです。

WordPressを含むあらゆるサイトでは、ソースコードで成り立っているんです。このソースコードを読み込むことでサイトが表示されるわけですが、ソースコードに無駄があると、表示速度が遅くなってしまいます。

Autoptimizeは、ソースコードを圧縮（縮小）することで、ページを表示するのに必要なデータ量を減らしてくれます。その結果、サイトの表示速度を高速化できるわけです。

Autoptimizeはソースコード圧縮の代表的なプラグインなので、サイトが重たくて悩んでいる人にはおすすめです。

PageSpeed Insightsの改善項目を解消できる

ソースコードの圧縮なんてやる意味あるのかな？

こんなふうに疑問に思う人もいるかもしれませんが、確実に効果があります。断言できる理由が、Googleが提供しているサイトの表示速度測定ツール『PageSpeed Insights』の測定結果です。

PageSpeed Insightsで表示速度を測定すると、改善項目として「レンダリングを妨げるリソースの除外」という項目が出てきます。

上記をかみ砕いていうと、以下のような意味になります。

つまり、Autoptimizeを導入すると「レンダリングを妨げるリソースの除外」を解消し、表示速度を高速化できるというわけ。

Autoptimizeにデメリットはある？

Autoptimizeのプラグイン自体にデメリットはありません。ですが、他の似たようなプラグインと併用すると不具合を起こすことがあります。

なので、あらかじめ導入済のプラグインやWordPressテーマの機能を確認しておきましょう。

Autoptimizeのインストール手順

ここからは、「Autoptimize」のプラグインのインストール手順を解説していきます。

まずはWordPressの管理画面へ行き、左端から「プラグイン」⇒「新規追加」に進みましょう。

次の画面右上の検索窓から、「Autoptimize」を入力して検索します。

Autoptimizeのプラグインは以下のとおり。「今すぐインストール」をクリックしましょう。

クリックしたら、「有効化」というボタンに切り替わるので、またクリックします。以上でAutoptimizeのインストールは完了です。

Autoptimizeの使い方・設定方法

ここからは、Autoptimizeの使い方や設定方法を解説していきます。

まずは、「WordPressの管理画面」⇒「設定」⇒「Autoptimize」の順番に進み、プラグインの設定画面へ進みましょう。

なお、Autoptimizeでは以下の6種類の設定タブがありますが、変更するのは「JS、CSS＆HTML」「画像」「追加」タブの3点のみです。それ以外はスルーでOK。

設定方法を順番に解説していきます。

Autoptimizeの使い方・設定方法「JS、CSS＆HTML」タブの設定

まずは「JS、CSS＆HTML」タブの設定方法からご紹介します。

JavaScriptオプション

上記のとおり設定しましょう。

デフォルトでは「JSファイルを連結」にチェックが入ってますが、遅いままの場合は上記のとおり設定を変えてみましょう。

CSSオプション

上記のとおり設定すればOK。設定方法はJavaScriptのときと同じ考え方です。

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

「HTMLコードを最適化」と「インラインのJS/CSSも最小化します」にチェックを入れておきましょう。

Autoptimizeの使い方・設定方法「画像」タブの設定

つづいては、「画像」タブの設定方法をご紹介していきます。

ここでは、使用しているプラグインによって設定方法が変わってきます。

画像遅延プラグインの「Lazy Load」を使用している人は、「画像の遅延読み込み（Lazy-load）を利用」にチェックを入れましょう。

Lazy Load以外の画像遅延系プラグイン（EWWW Image Optimizerなど）を利用している人は、機能重複によってエラーが生じるリスクがあるので、チェックを外しておいてください。

Autoptimizeの使い方・設定方法「追加」タブの設定

最後に、「追加」タブの設定方法について解説します。

こちらも、人によって対応方法が変わってきます。

WordPress運営サイトでGoogleフォントを使っている人は、「結合とヘッダーでのリンク」に入れると高速化することができます。

Googleフォントを使ってない人は、「Googleフォントの削除」にチェックを入れることで、さらに高速化が期待できます。

Googleフォントを使ってるかどうか確認する方法

Googleフォントを使ってるかどうかは、WordPressの管理画面で確認できます。

まず、「WordPressの管理画面」⇒「AFFINGER管理」の順番に進みましょう。

AFFINGERの管理画面に進んだら、左側にある「全体設定」タブを開きます。

全体設定の一番下にスクロールすると、以下のような「フォントの種類」という項目が出てきます。

上記のうち、AFFINGER6では以下の3種類がGoogleフォントです。

なので、上記3つにチェックが入っていたら、Googleフォントを使用していることになります。

Googleフォントを使用しないなら、「全体」の文字は「デフォルト」にチェックし、「記事タイトル・見出し・ウィジェットボタン」の文字は「使用しない」にチェックしましょう。

まとめ：Autoptimizeはソースコードを圧縮してサイトを高速化できる人気のプラグイン！

というわけで、以上です。

ソースコードを圧縮してサイトを高速化するプラグインとしては、Autoptimizeはもっとも代表的なプラグインです。

仕組み自体は結構難しいですが、設定はとても簡単なので、ブログ初心者さんもぜひ設定しておいてください。

ではまた。