Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】

やすのり
こんにちは!「Tekito style」を運営しているやすのり(@98nasi_nori)です。普段は都内でWebディレクター/マーケターなどをしています。
WordPressのサイトスピード改善では、画像ファイルの最適化の他にも、HTMLやCSS、Javascriptなどのリソースを最適化することで一定の効果が見込めます。

そこで便利なプラグインが「Autoptimize」。主要なリソースを簡単に軽量化・圧縮してくれるツールです

今回はAutoptimizeの使い方や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

Autoptimizeってどんなプラグイン?

Autoptimize
photo by:公式サイト

Autoptimizeは、CSSやJSなどのリソースを軽量・最適化してくれるプラグイン。

改行やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、これ1つで便利な機能を備えています。利用は無料です。

実際に僕も使ってみて、Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で計測しました。するとスマフォ版の「レンダリングを妨げるリソースの除外」の項目が、

改修前:1.25ss → 改修度:0.64ss

まで下がったので、導入した効果は結構あったかなと思います。

Autoptimize

Autoptimizeの導入方法

Autoptimizeの導入方法を見ていきましょう!他のWordPressプラグインと同じ導入手順です。

インストールと有効化

Autoptimize

管理画面のメニュー「プラグイン」>「新規追加」から、「Autoptimize」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

Autoptimize

インストールを完了すると、管理画面の設定欄に「Autoptimize」が追加されています。クリックし詳細の設定欄を確認しましょう。

Autoptimizeの使い方・設定方法

Autoptimizeの使い方、設定方法を確認していきましょう。

JS,CSS & HTMLタブ

まずはメインの設定事項となる、「JS,CSS & HTML」タブから確認します。

JavaScript オプション

Autoptimize

ここではJavaScriptの設定が可能です。基本的に以下の2つの項目を選択すればOKです。

  • JavaScript コードの最適化
  • Aggregate JS-files?

これでJSコードから改行をなくして圧縮するなど、ファイルサイズを最適化してくれます。

  • <head> 内へ JavaScript を強制
  • try-catch の折り返しを追加

上記の項目については、もしJSコードを最適化することでJSが動かなくなるなどエラーが発生した場合はチェックしてみましょう。

ただしhead内にJSコードを全て移動すると読み込みが遅くなるので、基本的にはおすすめしません。エラーを起こしているJSファイルに関しては、FTPソフトなどを使って個別にheadに移動するなど調整をしましょう。

CSS オプション

Autoptimize

CSSについては下記の項目をチェックするだけでOK。

  • CSS コードを最適化
  • Aggregate CSS-files?
  • インラインの CSS を連結

他の要素を実行する場合は、動作やパファーマンスが実際に改善されるか、環境によっても異なるかと思うので個別に確認してみてください。

HTML オプション

Autoptimize

HTMLは下記の1項目をチェック。

  • HTML コードを最適化

もしコメントをHTMLファイルにそのまま残したい場合は、「HTML コメントを残す」を選択します。

その他オプション

Autoptimize

下記の2項目をチェックします。

  • 連結されたスクリプト / CSS を静的ファイルとして保存
  • Minify excluded CSS and JS files?

サイトにログイン機能があれば、「ログイン中のユーザーも最適化しますか ?」も合わせてチェックしてみてください(特に機能がなければ不要)。

すべての内容に問題なければ、「変更を保存してキャッシュを削除」します。

Imagesタブ

Autoptimize

Imagesタブについては特に設定する必要はありません。Lazy-load(画像の遅延読み込み)もAutoptimizeで実装できるみたいですね。

もし他にLazy-load系のプラグインを使っている方は、チェックすると動作に問題が生じる可能性があります。僕は他のプラグインで実装しているので今回はスルー。

追加タブ

Autoptimize

追加タブに移り、下記項目にチェックします。

  • webfont.js で非同期にフォントを結合して読み込む
  • 絵文字を削除

フォントや絵文字のリソースもサイトスピードにやや影響するので、最適化しておくといいでしょう。

ただフォントに関しては、一度ブラウザのデフォルトのフォント > Googleフォントの順で読み込まれる場合、やや切り替える時の動作がぎこちなくなる時があります。気になる方はチェックを外すといいかなと思います。

さらに最適化!タブ

Autoptimize

こちらについては有料機能やより硬度な機能になるので、特に設定しなくてOKです。

Autoptimizeでリソースを最適化しよう!

Autoptimizeはリソースの軽量化・最適化するのに、簡単で便利なプラグインです。WordPressのサイトスピード改善を進めている方は、ぜひ試してみてくださいね!

サイトスピード改善で重要な画像の最適化については下記記事も参考にしてみてください ↓↓

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

ブログやサイトのデザインについて悩んでいる方は、Webデザインスクールで学ぶのも選択肢の1つですよ ↓↓

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

ABOUT US
やすのり
マーケター/ プロダクトマネージャー(@98nasi_nori )。ときどき旅人な91年生まれ。早稲田大学卒。都内ベンチャー企業にてマーケティングマネージャー、WebプロダクトのUI/UX改善の企画・PMなど担当。フルリモート勤務。もともとWebライター・編集者。開発やデザインも細々と勉強中…。学生時代は1年間の世界一周経験あり(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコなど。好物は家系ラーメンとタピオカ。趣味は温泉とコワーキング巡り。
プロフィール詳細