本記事では、WordPressのプラグイン「Autoptimize」のインストール~設定方法について解説しています。
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/wordpress-book.jpg)
- サイト運営に必須のことが学べる
- 基本的な使い方~オリジナルテーマ開発まで学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
Autoptimizeとは?
![Autoptimize](https://web-engineer-wiki.com/wp-content/uploads/2023/07/plugins06.jpg)
![Autoptimize](https://web-engineer-wiki.com/wp-content/uploads/2023/07/plugins06.jpg)
Autoptimizeは、HTML・CSS・JavaScriptのソースコードを最適化してくれるプラグインです。
ソースコードを最適化することでページの表示速度を上げることが出来ます。ページの表示速度を上げることでユーザー離脱対策・SEO対策にも繋がるので導入することをオススメします。
Autoptimizeのインストール
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Autoptimizeをインストールしていくよ。
![Autoptimizeインストール画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize01-1024x401.jpg)
![Autoptimizeインストール画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize01-1024x401.jpg)
WordPressの管理画面から「プラグイン」→「新規追加」をクリックし、検索フォームに「Autoptimize」を入力します。
検索結果の先頭に「Autoptimize」が表示されるので「今すぐインストール」→「有効化」をクリックします。
Autoptimizeの設定
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Autoptimizeを設定していくよ。
![Autoptimizeダッシュボード画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize02.jpg)
![Autoptimizeダッシュボード画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize02.jpg)
設定に先ほど有効化したAutoptimizeが追加されるのでクリックします。
![Autoptimize JavaScriptオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize03-1024x444.jpg)
![Autoptimize JavaScriptオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize03-1024x444.jpg)
JavaScriptコードの最適化にチェックを入れます。連結しないで遅延にチェックを入れます。
昔のHTTP/1.1では1つ1つリクエストを受け取りレスポンスを返していたため、ファイル同士をバンドル(まとめる)してリクエスト数を減らすことでページの表示速度を上げていました。
現在のHTTP/2では、複数のファイルをまとめてリクエストすることが出来るようになったため、バンドルする必要はそこまでありません。
![Autoptimize CSSオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize04-1024x546.jpg)
![Autoptimize CSSオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize04-1024x546.jpg)
CSSコードを最適化にチェックを入れます。それ以外のチェックは不要です。
![Autoptimize HTMLオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize05-1024x193.jpg)
![Autoptimize HTMLオプション](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize05-1024x193.jpg)
HTMLコードを最適化にチェックを入れます。それ以外のチェックは不要です。
![Autoptimize 画像最適化](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize06-1024x268.jpg)
![Autoptimize 画像最適化](https://web-engineer-wiki.com/wp-content/uploads/2023/07/autoptimize06-1024x268.jpg)
Autoptimizeでは、画像の最適化もすることが出来ます。しかし、画像の最適化は専用のプラグインEWWW Image Optimizerがあるのでここのチェックは不要です。
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
EWWW Image Optimizerの導入~設定は以下の記事で解説しているよ。
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)