【Autoptimize: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対応] | 星野邦敏, 西川伸一 | 工学 | Kindleストア | Amazon
Amazonで星野邦敏, 西川伸一の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
プロが選ぶ WordPress優良プラグイン事典 | 相原 知栄子, 一戸 健宏, 大串 肇, 大島 義裕, 大曲 仁, 北村 崇, 小島 勝茂, 後藤 賢司, 染谷 昌利, 高野 直子, 高橋 文樹, 鳥山 優子, 西川 伸一, 服部 久純, 星野 邦敏, 松田 千尋, 吉澤 富美, WP-D | 工学 | Kindleストア | Amazon
Amazonで相原 知栄子, 一戸 健宏, 大串 肇, 大島 義裕, 大曲 仁, 北村 崇, 小島 勝茂, 後藤 賢司, 染谷 昌利, 高野 直子, 高橋 文樹, 鳥山 優子, 西川 伸一, 服部 久純, 星野 邦敏, 松田 千尋, 吉澤 富美, WP-Dの{ProductTitle}。アマゾンならポイント還元本が多数...
WordPressプラグイン100選 | 矢津 宗一, ギャップジャパン |本 | 通販 | Amazon
Amazonで矢津 宗一, ギャップジャパンのWordPressプラグイン100選。アマゾンならポイント還元本が多数。矢津 宗一, ギャップジャパン作品ほか、お急ぎ便対象商品は当日お届けも可能。またWordPressプラグイン100選もアマゾン配送商品なら通常配送無料。

Autoptimizeの導入方法

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

Autoptimizeを新規追加します

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

autoptimize追加

これで、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にしもらえればいいかなと思います。

正常に動いているが確認できれば完了

ここまでくれば、autoptimizeの設定は完了なので、後は正常にサイトが表示されていればOKですね。

Autoptimizeで大事なのはどの程度高速化できたかです

Autoptimizeを使う最大の目的は、キャッシュ系プラグインなので、サイトがきちんと高速化されているか?ですよね。なので、プラグイン追加後にどの程度高速化されているのかを計測する必要が有ります。その時に使うのがGoogleのPageSpeed Insightsですね。

サイトの高速化に興味がある方であればお馴染みのツールだと思います。

PageSpeed Insights

このPageSpeed InsightsをAutoptimizeがOFFの時とONの時とで自分のサイトのスコアがどの程度改善されたかを把握しておくのを忘れないようにしましょう。もし、使いこなせてきたのならば、カスタム設定で自分のサイトに最適な設定を目指してみてもいいかもしれませんね。

スポンサードサーチ

Autoptimize導入は頑張ればできる

諦めるのは色々と頑張った後にして、まずはプラグイン追加をやってみてもいいと思います。

Autoptimizeを使うのに迷った方はとりあえず使ってみてOKかも

僕は、当サイトだけでは無くて、他に多数のサイトを色々なWordPressテーマで運営しているのですが、中には千件以上の記事を公開しているサイトが有ります。なので、Autoptimizeの様なキャッシュ系の高速化プラグインはとっても大事です。

皆さんもいずれは、大規模サイト運営しているのでは、まだサイトが成長段階の時に試しに使ってみるのもいいかもしれませんよ。

もっと詳しくなりたい方へ

全世界のWEBサイトの内、35%がWordPressで作成されていると言われています。なので、WordPressはとっても奥が深いです。

もし皆さんがWordPressについてもっと詳しくなりたいと思われた方は以下の様な書籍で学んでみるのもいいかもしれないです。

WordPress自体についてもっと詳しくなりたい方

WordPressの扱いがまだまだ初心者の方やもっと勉強したい方は向けです

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ | 石川栄和, 大串 肇, 星野邦敏 | 工学 | Kindleストア | Amazon
Amazonで石川栄和, 大串 肇, 星野邦敏の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | Mana | コンピュータ・IT | Kindleストア | Amazon
AmazonでManaの{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
WordPress Perfect GuideBook 5.x対応版 | 佐々木 恵 | 工学 | Kindleストア | Amazon
Amazonで佐々木 恵の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

WordPressプラグインについてもっと詳しくなりたい方

AutoptimizeのようなおすすめのWordPressプラグインをお探しの方向けです

WordPress プラグイン&WebAPI 活用ガイドブック [Version 3.x対応] | 星野邦敏, 西川伸一 | 工学 | Kindleストア | Amazon
Amazonで星野邦敏, 西川伸一の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
プロが選ぶ WordPress優良プラグイン事典 | 相原 知栄子, 一戸 健宏, 大串 肇, 大島 義裕, 大曲 仁, 北村 崇, 小島 勝茂, 後藤 賢司, 染谷 昌利, 高野 直子, 高橋 文樹, 鳥山 優子, 西川 伸一, 服部 久純, 星野 邦敏, 松田 千尋, 吉澤 富美, WP-D | 工学 | Kindleストア | Amazon
Amazonで相原 知栄子, 一戸 健宏, 大串 肇, 大島 義裕, 大曲 仁, 北村 崇, 小島 勝茂, 後藤 賢司, 染谷 昌利, 高野 直子, 高橋 文樹, 鳥山 優子, 西川 伸一, 服部 久純, 星野 邦敏, 松田 千尋, 吉澤 富美, WP-Dの{ProductTitle}。アマゾンならポイント還元本が多数...
WordPressプラグイン100選 | 矢津 宗一, ギャップジャパン |本 | 通販 | Amazon
Amazonで矢津 宗一, ギャップジャパンのWordPressプラグイン100選。アマゾンならポイント還元本が多数。矢津 宗一, ギャップジャパン作品ほか、お急ぎ便対象商品は当日お届けも可能。またWordPressプラグイン100選もアマゾン配送商品なら通常配送無料。

 

最後までお読みいただきありがとうございました。

タイトルとURLをコピーしました