なんてお困りのあなたにおすすめの記事です！
こんにちは！運営者のえもまるです。
今回はWordPressのプラグインであるAutoptimizeの設定方法と使用方法を紹介していきます。
この記事の内容
プラグインAutoptimizeの主な役割を解説
Autoptimizeの設定方法と使用方法を初心者でもわかるように図を多用して解説
この記事を読むべき人
プラグインAutoptimizeって何なのか知りたい人
Autoptimizeの最低限の設定をわかりやすく知りたい人
サイト表示速度が遅い=ユーザー離れにつながる＆SEO的にもマイナスともいわれていますので、ある程度の速さは維持しておきたいもの。
そんな時に便利なのがサイト表示速度の改善に重要なプラグインAutoptimizeです。
あなたのサイト表示速度改善に大いに役立ってくれると思います！
多くのブロガーさんも利用している優秀なプラグインですので、この記事で紹介する手順に沿ってサクっと使えるようにしてしまいましょう！！
それではどうぞ！！
目次(タップでジャンプ)
Autoptimizeとは何なのかざっくりと解説
Autoptimizeを一言で言うと、
ページ表示速度の高速化を手助けする便利プラグインだよ！！
AutoptimizeはCSSやJSなどのリソースを軽量＆最適化してくれるWordPressの優秀なプラグインです。
改行やスペースの削除やファイルを結合して圧縮してくれるなど、これ1つインストールしておくだけでかなりサイト表示速度を改善してくれます。
あくまで僕の場合ですが、実際にAutoptimizeを導入してから、GoogleのPage Speed InsightsでモバイルとPCのサイト表示速度を検証してみたところ、特にモバイルスコアは10点ほどあがりました！
サイト表示速度でお悩みの方には特にインストールをおすすめできるプラグインですね♪
まずはAutoptimizeのインストール
それではAutoptimizeの設定方法を解説していきます。
念のためインストールから説明していきますよ～。
①まずはWordPress管理画面の「プラグイン」をクリック
②右上にある「新規追加」をクリック
③検索欄に「Autoptimize」と入力
④上のアイコンのプラグインを見つけたら「今すぐインストール」をクリックした後、「有効化」をクリック
有効化まで行けばインストールは完了です！
Autoptimizeの設定方法を画像多用で解説
それではWordPressの管理画面から設定に移りましょう。
⑤有効化が完了したら、WordPress管理画面の「設定」にカーソルを置き、「Autoptimize」をクリック
設定を見ていく項目は5つのタブで分かれていますので、ひとつひとつ紹介していきますね。
JS, CSS ＆ HTML タブの設定
まずは「JS, CSS ＆ HTML」の設定からです。
上の方に5つタブが並んでいると思いますが、初めに「JS, CSS ＆ HTML」タブの設定を行っていきます。
JavaScriptオプション
基本的には以下の2つにチェックを入れればOKです。
⑥JavaScriptコードの最適化
⑦Aggregate JS-files?
このチェックにより改行やスペースの削除、圧縮などを行いファイルサイズの最適化してくれます。
上記の⑥と⑦にチェックを入れて運用してみて、もしJSエラーが生じた場合、
□<head> 内へ JavaScript を強制
□try-catch の折り返しを追加
この2つにもチェックを入れてみてください。
ただ、JSコードを全てhead内に移動すると読み込み速度が遅くなる可能性が高いです。そのため、エラーの原因となっているJSファイルのみFTPソフトなどでhead内に移動してやるなどの工夫を施すのが無難です。
CSSオプション
基本的に以下の3つの項目にチェックを入れればOKです。
⑧CSS コードを最適化
⑨Aggregate CSS-files?
⑩インラインの CSS を連結
他のチェック項目は特に気にしなくてもOKです。
もし気になる方は、チェックを入れた場合と入れない場合でサイト表示速度に違いが出るかを試してみるのもいいかもしれませんね。
HTMLオプション
⑪HTMLコードを最適化
これだけチェックをいれればOKです。
HTMLファイルにコメントを残したい場合は「HTMLコメントを残す」にもチェックを入れてください。
CDNオプション
キャッシュ情報
ここは基本何もしなくてOK！
その他のオプション
ここでは3つすべてににチェックを入れておきましょう！
⑫連結されたスクリプト / CSS を静的ファイルとして保存
⑬Minify excluded CSS and JS files?
⑭Also optimize for logged in editors/ administrators?
Imagesタブの設定
次に5つのタブの中の「Images」の設定を見ていきます。
基本的にここで何もチェックを入れる必要はありません。
ちなみに、「Lazy-Load images？」にチェックを入れると画像の遅延表示を行うことができます。
ですが、多くの方は画像遅延表示専用のプラグイン(BJ Lazy Loadなど)が入っているかと思いますのでチェックを入れる必要はありません。
むやみにチェックを入れると別のプラグインと悪い干渉を起こしてしまう可能性があります。
追加タブの設定
次に「追加」の設定を見ていきましょう。
Google Fonts
絵文字の削除
ここでは以下の2つにチェックを入れておきましょう！
⑮webfont.jsで非同期にフォントを結合して読み込む。
⑯WordPress コア絵文字のインライン CSS、インライン JavaScript、およびその他の自動化されていない JavaScript ファイルを削除します。
この設定でフォントや絵文字などのリソースに対しても最適化を行うことができます。
さらに最適化！とCritical CSSタブの設定
次に「さらに最適化！」と「Critical CSS」の設定を見ていきましょう。
どちらのタブの設定も有料でAutoptimizeをパワーアップさせるものや関連サービスの紹介になりますので無料版で構わないという方は特に何もする必要はありません。
ちなみに僕も有料版やパワーアップには何も手を出していません。無料版でも十分個人ブログを運営できていますよ！
これで4,5つ目のタブの設定も完了♪
設定は以上になります！お疲れ様でした！！
Autoptimize設定後に行うこと
Autoptimizeは基本的に一度設定をしておけば自動で働いてくれる優秀なプラグインです。
ですが1点だけ、こまめにやっておくとサイト表示速度の維持につながる作業としてキャッシュ削除があります。
下の画像を見てみてください。
Autoptimizeをインストールおよび設定後にWordPress管理画面の上部に上のような「Autoptimize」という表示が現れます。
ここにカーソルを持っていくと「キャッシュを削除」というボタンを押すことができます。サイト表示速度の維持のために定期的にキャッシュ削除を行うことをおすすめします。
まとめ
いかがでしたでしょうか？
Autoptimizeはリソースの最適化や軽量化を行い、サイト表示速度の改善を手助けしてくれる有能なプラグインです。
この記事で紹介していない項目に関してもチェックを入れたり、外したりして試してみてサイト表示速度の良し悪しを試してみるのもいいと思いますよ！
ちなみにテーマ「JIN」を利用している方はおすすめのプラグインをこちらの記事で紹介していますのでよかったらどうぞ！
エックスサーバーでできる意外と見落としがちなサイト高速化設定はこちら！
