【Autoptimize：WordPressプラグイン】の使い方

Autoptimizeの設定と使い方に困っていませんか？
Autoptimizeを解説します
Autoptimizeの導入方法
Autoptimize導入は頑張ればできる
1. Autoptimizeを使うのに迷った方はとりあえず使ってみてOKかも
2. もっと詳しくなりたい方へ
  1. WordPress自体についてもっと詳しくなりたい方
  2. WordPressプラグインについてもっと詳しくなりたい方

Autoptimizeの設定と使い方に困っていませんか？

こんにちは、当サイトでも使用している無料CMSのWordpressで使っているWordpressプラグインのAutoptimizeですが、以下の様なお悩みをお持ちの方向けにAutoptimizeの設定方法と簡単な使い方を解説しています。

Autoptimizeはどういったプラグインなのか？

Autoptimizeを始めて聞いた方で何をするプラグインかイマイチわからない

Autoptimizeの使い方を知りたい

何をするプラグインなのかはわかったけどどうやって使ったらいいかわからない

Autoptimizeはデメリットはないのか？

WordPressプラグインは他のプラグインとの互換性が懸念されるけど大丈夫なのか？

こういったお悩みの参考になるかもしれませんので、興味がある方はご覧ください。

スポンサードサーチ

Autoptimizeを解説します

それでは、Autoptimizeがどういったプラグインなのか？やどう使うのかをお話ししていきますね。

Autoptimize公式サイトの情報

Autoptimizeは海外の技術者が作成したプラグインで解説が英語だったので、Google翻訳で和訳した内容を掲載しておきますね。

WordPress公式サイトから抜粋

Autoptimizeはサイトの最適化を非常に簡単にします。スクリプトとスタイルを集約、縮小、キャッシュし、デフォルトでCSSをページヘッドに挿入しますが、重要なCSSをインライン化し、集約された完全なCSSを延期し、スクリプトをフッターに移動して延期し、HTMLを縮小できます。画像の最適化と遅延読み込み、Googleフォントの最適化、非集計JavaScriptの非同期、WordPressコアの絵文字の残骸の削除などを行うことができます。したがって、すでにHTTP / 2を使用している場合でも、サイトのパフォーマンスを向上させることができます。Autoptimizeを各サイトの特定のニーズに合わせて調整できるようにする広範なAPIが利用可能です。
パフォーマンスを重視する場合は、多くのキャッシュプラグインの1つを使用してページキャッシュを実行する必要があります。そのようにAutoptimizeを補完するいくつかの良い候補は、例えばKeyCDNのCache EnablerまたはWPスーパーキャッシュ。

Autoptimizeはキャッシュ系プラグイン

Autoptimizeがどういったプラグインかというと、結論からお伝えするとサイトの表示を高速化するプラグインです。

具体的には、HTMLやCSSやJSファイルなどを圧縮(不要な改行やタブやスペースを削除)して読み込みスピードを速くしてくれます。

上級者になればカスタムで設定できるのですが、基本的におまかせ設定を使えば簡単に導入する事ができるプラグインになっています。

使うメリットは？

Autoptimizeを使うメリットとしては、最近何となくサイトの表示速度が遅くなったと感じている方は、メリットがあると言えますね。まだサイトを立ち上げたばかりで記事数もそんなに多くない人にとっては目に見えるサイトの高速化には繋がらないかもしれないです。

デメリットはあるのか？

Autoptimize導入のデメリットとしては、既に適用されているCSSやJavaScriptが正常に稼働しない場合などがまれに有ります。こういった場合の解決策の為に、圧縮するファイルを指定したり、除外したりする設定が有りますので、有る程度の知識が有る方であれば、このデメリットは解決できると思います。

結論、Autoptimizeは使うべき？

結論としては、将来的に大規模サイトを想定してサイト運営を行っている人であれば、いずれお世話になるプラグインになるのではないかと思います。

WordPressプラグインについて詳しく知りたい方へ

もし、AutoptimizeをはじめとするWordPressプラグインについて、もっと詳しく知りたい方がいらっしゃれば、参考になりそうな本を紹介しておきますので、興味があればこちらもどうぞ。

WordPress プラグイン＆WebAPI 活用ガイドブック [Version 3.x対応]

翔泳社

￥2,860（2024/11/22 00:01時点）

プロが選ぶ WordPress優良プラグイン事典

エムディエヌコーポレーション（MdN）

￥2,305（2024/11/21 08:20時点）

株式会社ギャップ・ジャパン

￥6,101（2024/11/22 00:01時点）

Autoptimizeの導入方法

実際にAutoptimizeを追加していく方法紹介します。

Autoptimizeを新規追加します

WordPressの管理画面＞プラグイン＞新規追加＞「autoptimize」で検索し、プラグインを追加します。

これで、Autoptimizeの追加は完了です。

設定内容の確認

設定方法ですが、以下の内容とその下の画像が僕が実際に設定しているautoptimizeの設定内容になります。

基本的に、細かな設定は行っていません。そのまま同じ設定を行ってもらっても大きな問題にはならないと思いますが、自己責任でお願いします。

【JavaScript オプション】

JavaScript コードの最適化：ON
JS ファイルを連結する：ON
インラインの JS を連結：OFF
<head> 内へ JavaScript を強制：ON
Autoptimize からスクリプトを除外：OFF
try-catch の折り返しを追加：OFF

【CSS オプション】

CSS コードを最適化：ON
CSS ファイルを連結する：ON
インラインの CSS を連結：ON
データを生成 : 画像を URI 化：ON
CSS のインライン化と遅延：OFF
すべての CSS をインライン化：ON
Autoptimize から CSS を除外：デフォルト

【HTML オプション】

HTML コードを最適化：ON
HTML コメントを残す：OFF

【その他オプション】

連結されたスクリプト / CSS を静的ファイルとして保存：ON
除外されたCSSファイルとJSファイルを縮小する：ON
Experimental: enable 404 fallbacks.：OFF
Also optimize for logged in editors/ administrators?：ON

設定画像を見てもらうとわかり易いと思いますが、HTML・JavaScript・CSSの各オプションのチェックのみで稼働させています。ちょっとJavascriptの連結設定のみ僕の場合は、動かなくなるScriptが有ったのでOFFにしていますが、皆さんが使う場合にはまずはONにして使ってみて実際に不具合が有った場合にOFFにしもらえればいいかなと思います。