【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】

【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】
想定読者

WordPressプラグインであるAutoptimizeの設定方法や使い方について詳しく知りたい。

本記事は、上記の方を想定しています。

エコおじい

執筆者:WordPress歴5年以上の私が詳しく画像つきで「Autoptimizeの設定方法や使い方」について解説しています。

Autoptimizeはコード圧縮系のプラグインなので、不具合が生じやすいです。

そのため、本記事を参考にコードを圧縮する際は、事前にバックアップを取ってから行ってください。

当サイトの情報:特に有料WordPressテーマを活用している方は注意してください。不具合が生じやすいので。

記事の内容

Autoptimizeとはどんなプラグインなのか

【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】
Autoptimizeとはどんなプラグインなのか

Autoptimizeとは、肥大化したソースコード(HTML、CSS、JavaScriptなど)を圧縮してくれるWordPressプラグインです。

エコおじい

イメージしやすいように、圧縮前と圧縮後の画像を用意しました。

圧縮前のソースコード
圧縮後のソースコード

このように、ソースコードを圧縮することで、無駄なスペース部分を削り、結果的に表示速度を早くすることができるのです。

本来は、ソースコード圧縮系のツールを活用するのですが、WordPressにはプラグインという素晴らしい物があるので、そちらを使うのが当たり前とされています。

Autoptimizeとは
  • ソースコードを圧縮するためのプラグイン
  • Autoptimizeを使うことで表示速度が上がる


プラグインAutoptimizeのデメリット

良い事だらけのように見えますが、Autoptimizeにはマイナスの部分もあります。

Autoptimizeのデメリット

  • 圧縮によるWordPressサイトの不具合
  • プラグインの中では難易度が高いため、初心者には難しい
エコおじい

圧縮系のプラグインは基本的にはプロに任せるのが一番良いです。

というのも、不具合が生じた時に、プロであれば対応できますが初心者だと何をすればよいかわからなくなるはずです。

そのため、当サイトでは「WordPressをある程度知っている方に圧縮系のプラグイン」をおすすめしております。


ここまでを読み、Autoptimizeに挑戦したいと思った方は設定方法→使い方について学んでみてください。

Autoptimizeの初期設定|3分インストール

Autoptimizeの初期設定|3分インストール

Autoptimizeの初期設定は3分で完了します。

エコおじい

画像を参考にインストールしてみてください。

Autoptimizeの初期設定:検索する

まずは、プラグイン画面へと行き、キーワード部分に【Autoptimize】と入力してみてください。


Autoptimizeの初期設定:有効化

Autoptimizeと表示されるはずですので、そのままインストール<有効化の順にボタンをクリックしましょう。


Autoptimizeの初期設定:完了

この画面がプラグイン一覧ページに表示された方は、Autoptimizeのインストールは完了です。


     

Autoptimizeの使い方

Autoptimizeの使い方

Autoptimizeの使い方は大きく分けると4つほどあります。

Autoptimizeの使い方

  • 使い方1:HTMLを圧縮する
  • 使い方2:CSSを圧縮する
  • 使い方3:JavaScriptを圧縮する
  • 使い方4:画像を圧縮する


使い方1:HTMLを圧縮する

Autoptimizeの使い方1つ目は『HTMLを圧縮する』ことです。

使い方1:HTMLを圧縮する

HTMLコメントを維持する必要はないので、その部分のチェックマークは外していても大丈夫です。


使い方2:CSSを圧縮する

Autoptimizeの使い方2つ目は『CSSを圧縮する』ことです。

この点は不具合が生じやすいポイントなので、注意しましょう。

使い方2:CSSを圧縮する
  1. CSSコードを最適化:必須
  2. CSSファイルを連結する:必須
    →複数ファイルに記述されているCSSを一つにまとめることで、読み込み時間を遅らせる効果がある
  3. インラインのCSSも連結:必須
    →HTMLファイルに直接記述されたCSSも圧縮の対象にしましょう。
  4. データ生成画像をURL化:微妙な部分(私は不要派です)
    →画像をURL化にすることで、サーバーへのリクエストが減り理論上は早くなるのですが、実際問題、遅くなったという報告が多いので、あまりおすすめしません。
  5. CSSのインライン化と遅延:不要
    →有料プランとの併用になるので必要なし
  6. すべてのCSSをインライン化:推奨しません
    →この設定によるエラーが多すぎる。
  7. AutoptimizeからCSSを除外:触る必要なし
エコおじい

ぜひ、参考にしてみてください。


使い方3:JavaScriptを圧縮する

Autoptimizeの使い方3つ目は『JavaScriptを圧縮する』ことです。

ここも不具合が生じやすいので注意しましょう

使い方3:JavaScriptを圧縮する
  • JavaScriptコードの最適化:必須
  • JSファイルを連結する:必須
    →JavaScript複数ファイルをひとまとめにしてくれる
  • インラインのJSも連結:不要
    →かなり不具合が生じやすい項目なので、不推奨
  • <Head>内へのJavaScriptを強制:不要
    →JSを最初に読み込むメリットがないから
  • try-catch:不要
エコおじい

JavaScriptは最も不具合が生じるので、あまり触らないことをおすすめしています。


使い方4:画像を圧縮する

使い方4:画像を圧縮する

Autoptimizeの使い方4つ目は『画像を圧縮する』ことです。

正直、ここの項目は不要な気がします。

理由:画像圧縮するツールとしては、微妙。加えて、画像圧縮であれば、もっと良いツールが世の中にはたくさんある。

エコおじい

下記の記事で紹介している内容を行えば、わりと、画像圧縮は問題なしです。


Autoptimizeで不具合が発生した場合

Autoptimizeで不具合が発生した場合

ここでは、Autoptimizeで不具合が生じるケースを紹介しておきます。

  • 表示ができない場合
  • 画像が表示されない場合
  • 変更した点が更新されない場合


表示ができない場合

WordPressサイトの表示がおかしい場合は、AutoptimizeによるJavaScript、もしくはCSSが悪さをしている可能性が高いです。

まずは、JavaScriptのチェック欄をすべて外してみてください。

そのご、WordPressが正常に動けば、問題はJavaScriptにあります。

JavaScriptで解決できない場合は、CSSのチェックボックスをすべて外してみてください。

エコおじい

結果的に、すべてのチェックを外すことになるブロガーが多いはずです。

理由:Autoptimizeは他のプラグインとの相性が悪い、優秀なWordPressテーマとの相性が悪いので、多くのブロガーが使用しにくいプラグインなのです。


画像が表示されない場合

画像が表示されない場合は、AutoptimizeのJavaScriptが悪さをしているので、JavaScriptの項目をすべて外しましょう。

エコおじい

これで、画像問題は解決できるはずです。


変更した点が更新されない場合

Autoptimizeの設定が更新されない場合は、キャッシュクリアを行いましょう。

管理画面の上部分に表示されるAutoptimize→キャッシュを削除をクリックすると、キャッシュがクリアされます。

エコおじい

キャッシュクリア後に、不具合が生じたページは修正されているはずです。


Autoptimizeで不具合が発生→何をしても解決できない場合はプラグインから削除しましょう。

Autoptimizeで不具合が発生→何をしても解決できない場合はプラグインから削除しましょう。

結論を言いますと、Autoptimizeは表示速度を改善するプラグインとして優秀ですが、不具合がかなり生じやすいです。

有料のWordPressテーマは非推奨として毎度取り上げられるプラグインです。

そのため、高い確率で不具合が生じてしまいます。

エコおじい

どんな方法を使っても、不具合が解決できない場合は、そっとAutoptimizeのプラグインを削除しましょう。

表示速度を改善できるプラグインは他にもたくさんあるので、あまり固執しすぎないようにしましょう。


まとめ:プラグインAutoptimizeを実装するとは表示速度アップするかもです。

まとめ:プラグインAutoptimizeを実装するとは表示速度アップするかもです。

ここまでで『【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】』の解説は以上です。

Autoptimizeは更新頻度が高めのプラグインなので、使用する場合は情報をおうようにしましょう。

エコおじい

当サイトがどんなWordPressプラグインをしようしているのか興味がある方は下記の記事を参考にしてみてください。


私の調査では自作サイトにAutoptimizeが効果的でした

あくまで、私の調査なのですが、自分で制作したWordPressサイトにはAutoptimizeがかなり効果的であることが分かりました。

エコおじい

最近の有料WordPressテーマは、最初から圧縮されていることもあり、Autoptimizeによる表示速度の改善はあまり得られないことがわかっています。


Autoptimizeよりも効果的な施策をご紹介

データ的に分かっていることなのですが、ソースコードの圧縮よりも『画像の圧縮&次世代フォーマットの変換』のほうが重要です。

上記の施策はEWWW Image Optimizerを活用することで、簡単に導入できるので、この機会にぜひ導入してみてください。

エコおじい

私は上記のプラグインを活用したことで、スコアが10ほど改善されました。


Autoptimizeに加えて、WordPress高速化を本格的に始めたい方はこちらをどうぞ

Autoptimizeに加えて、本格的にWordPress高速化に取り組みたい方は下記の記事を参考にしてみてください。

【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】

この記事が気に入ったら
フォローしてね!

記事の内容