Autoptimizeの使い方・設定方法【HTML・JavaScript・CSSを最適化するWordPressプラグイン】
投稿日：2021/07/28 （更新日：）
WordPressサイトの表示速度を早めるための１つの施策として「ソースコードの圧縮」があります。
ソースコードの圧縮をする際に、必要となってくるものが今回紹介する「Autoptimize」です。
そんなAutoptimizeを自分(企業)のWordPressサイトに導入する時に、
- 『Autoptimizeってそもそもなに』
- 『Autoptimizeの導入方法って難しいのかな』
- 『Autoptimizeだとよく不具合が出ると聞くけど不安だな』
などのお悩みが発生するはずです。
今回のコラム記事では、WordPressサイトの表示速度を改善したい方に向けて、Autoptimizeとはどんなプラグインなのか、Autoptimizeの導入手順、Autoptimizeの使い方について解説をしています。
本コラム記事では、画像を使用して操作方法を解説していますので、Autoptimizeの扱いに慣れていない方も安心してご覧ください。
Autoptimizeとはどんなプラグインなのか
Autoptimizeとは、ソースコードの圧縮を簡単に行うことができるWordPressのプラグインです。
Autoptimizeでできること
- HTML圧縮
- CSS圧縮
- JavaScript圧縮
- 画像の最適化
通常、ソースコードを圧縮する際にはfunctions.phpをカスタマイズしなくてはいけません。
しかし、エンジニアではない方がfunctions.phpを触ってカスタマイズするのは危険です(サイト崩れやサイトが正常に動かなくなる可能性が出てしまう)。
functions.phpを触って、サイトを壊してしまうリスクを負うくらいであれば、本コラム記事で紹介するAutoptimizeを導入して、ソースコードの圧縮を行なうべきです。
Autoptimizeの導入手順
Autoptimizeの導入は3分程度で完了します。
ここからは導入手順を画像付きで解説していきますので、お手元にパソコンを準備してください。
Autoptimizeを導入するために、まずはWordPressの管理画面に行きます。
プラグイン→新規追加の順でクリックし、検索窓に「Autoptimize」と入力してください。
表示されたプラグインをインストール→有効化の順でクリックすることでAutoptimizeの導入は完了です。
たったこれだけの手順でAutoptimizeの導入は完了です。
ここからは、実際のAutoptimizeの使い方について詳しく解説していきます。
Autoptimizeの使い方
Autoptimizeの主な使い方は下記の通りです。
- HTML&CSSファイル圧縮
- JavaScriptファイル圧縮
- 画像圧縮
１つずつ画像付きで、詳しい使い方について解説していきます。
使い方１：HTML&CSSファイル圧縮
まずはHTML＆CSSファイルを圧縮する方法について解説していきます。
| HTMLオプション | |
|---|---|
| HTMLコードを最適化 | チェック |
| HTMLコードのコメントを維持 | チェックしない |
コメントを維持の部分にチェックを入れてしまうと、余計なコードが削除できないので、ここはチェックなしにするべきです。
| CSSオプション | |
|---|---|
| CSSコードの最適化 | チェック |
| CSSファイルを連結する | チェック |
| インラインのCSSも連結 | チェック |
| データ生成：画像をURI化 | 個人の好み次第 |
| CSSのインライン化と遅延 | 不要 |
| すべてのCSSをインライン化 | 不要 |
| AutoptimizeからCSSを除外 | 不要 |
CSSファイルを連結する部分にチェックを入れると、いくつものファイルが統合されるので、サーバーへのリクエストが少なくなり、結果的に表示速度をアップさせることができます。
インラインのCSSとは、HTMLファイルに記述されたタグに直接記述することです。
具体例）アクセス中古ドメイン
このインラインで書かれたCSSも連結した方が、表示速度が上がるのでチェックしましょう。
次のデータ生成に関しては、サーバーのリクエスト数を減らすことができる一方で、ファイルのサイズを大きくしてしまうので、そこまで表示速度に影響を与えません。
そのため、今回は「個人の好み次第」と記述しました。
また、その他のCSSのインライン化と遅延、全てのCSSをインライン化、AutoptimizeからCSSを除外の部分はチェック不要です。
使い方２：JavaScriptファイル圧縮
HTML＆CSSのファイルを圧縮できた方は、JavaScriptのファイルを圧縮していきましょう。
| JavaScriptオプション | |
|---|---|
| JavaScriptコードの最適化 | チェック |
| JSファイルを連結する | チェック |
| インラインのJSも連結 | 不要 |
| 内へJavaScriptを強制 | 不要 |
| Autoptimizeからスクリプトを除外 | 不要 |
| try-catchで囲む | 不要 |
先程、インラインのCSSを連結部分にはチェックしていましたが、今回のJSファイルを連結する部分ではエラーが出やすいのでチェックは不要です。
内へJavaScriptを強制する項目にチェックしてしまうと、サイト崩れが起きてしまうことが多いので、あまりお勧めしません。
また、Autoptimizeからスクリプトを除外、try-catchで囲む項目はシンプルに不要なので、チェックの必要ありません。
使い方３：画像の遅延読み込み
Autoptimizeには画像の圧縮機能が準備されているのですが、できればAutoptimizeではなく、他の画像圧縮専用のプラグインを導入しましょう。
画像の遅延読み込み(Lazy-load)を利用の部分のチェックも最近は不要になってきています。
というのも、最近のWordPressには標準でLazy-loadの機能が実装されているからです。
普段からWordPressのアップデートを行なっている方であれば、ここの項目は不要で大丈夫です。
2020年以降にWordPressアップデートを行なっていない方は、WordPressをアップデートするか、ここの項目にチェックを入れましょう。
Autoptimizeは高速化に必要です
Autoptimizeの使い方・設定方法について詳しく解説してきました。
あらためて、Autoptimizeについてまとめておくと下記の通りです。
- Autoptimizeとはソースコードを圧縮するプラグイン
- Autoptimizeの導入は3分程度で完了する
2021年6月にGoogleで導入されたランキングシグナルの「コアウェブバイタル（Core Web Vitals）」では、ページの表示速度が重要になってきます。
今回のAutoptimizeを利用してソースコードを圧縮し、ページの表示速度を改善させましょう。
