あつ森動画随時UPしてます!
ブログ運営初心者

プラグインAutoptimizeの設定方法を画像を多用して解説【サイト高速化】

記事説明用画像
ブロガーくん
ブロガーくん
プラグインのAutoptimizeをインストールすべきって言われて導入したんだけど、設定方法とか使用方法がよくわからない、、、誰か初心者でもわかるように教えて!

なんてお困りのあなたにおすすめの記事です!

 

えもまる
えもまる

こんにちは!運営者のえもまるです。

今回はWordPressのプラグインであるAutoptimizeの設定方法と使用方法を紹介していきます。

 

この記事の内容

プラグインAutoptimizeの主な役割を解説

Autoptimizeの設定方法と使用方法を初心者でもわかるように図を多用して解説

この記事を読むべき人

プラグインAutoptimizeって何なのか知りたい人

Autoptimizeの最低限の設定をわかりやすく知りたい人

 

サイト表示速度が遅い=ユーザー離れにつながる&SEO的にもマイナスともいわれていますので、ある程度の速さは維持しておきたいもの。

そんな時に便利なのがサイト表示速度の改善に重要なプラグインAutoptimizeです。

あなたのサイト表示速度改善に大いに役立ってくれると思います!

多くのブロガーさんも利用している優秀なプラグインですので、この記事で紹介する手順に沿ってサクっと使えるようにしてしまいましょう!!

それではどうぞ!!

Autoptimizeとは何なのかざっくりと解説

えもまる
えもまる

Autoptimizeを一言で言うと、

ページ表示速度の高速化を手助けする便利プラグインだよ!!

AutoptimizeはCSSやJSなどのリソースを軽量&最適化してくれるWordPressの優秀なプラグインです。

改行やスペースの削除やファイルを結合して圧縮してくれるなど、これ1つインストールしておくだけでかなりサイト表示速度を改善してくれます。

あくまで僕の場合ですが、実際にAutoptimizeを導入してから、GoogleのPage Speed InsightsでモバイルとPCのサイト表示速度を検証してみたところ、特にモバイルスコアは10点ほどあがりました

サイト表示速度でお悩みの方には特にインストールをおすすめできるプラグインですね♪

まずはAutoptimizeのインストール

それではAutoptimizeの設定方法を解説していきます。

念のためインストールから説明していきますよ~。

Pluginインストール説明画像1

①まずはWordPress管理画面の「プラグイン」をクリック

Pluginインストール説明画像2

②右上にある「新規追加」をクリック

Autoptimize説明画像1

③検索欄に「Autoptimize」と入力

④上のアイコンのプラグインを見つけたら「今すぐインストール」をクリックした後、「有効化」をクリック

有効化まで行けばインストールは完了です!

Autoptimizeの設定方法を画像多用で解説

それではWordPressの管理画面から設定に移りましょう。

Autoptimize説明画像2

⑤有効化が完了したら、WordPress管理画面の「設定」にカーソルを置き、「Autoptimize」をクリック

設定を見ていく項目は5つのタブで分かれていますので、ひとつひとつ紹介していきますね。

JS, CSS & HTML タブの設定

まずは「JS, CSS & HTML」の設定からです。

Autoptimize説明画像3

上の方に5つタブが並んでいると思いますが、初めに「JS, CSS & HTML」タブの設定を行っていきます。

JavaScriptオプション

基本的には以下の2つにチェックを入れればOKです。

⑥JavaScriptコードの最適化

⑦Aggregate JS-files?

このチェックにより改行やスペースの削除、圧縮などを行いファイルサイズの最適化してくれます。

上記の⑥と⑦にチェックを入れて運用してみて、もしJSエラーが生じた場合

□<head> 内へ JavaScript を強制

□try-catch の折り返しを追加

この2つにもチェックを入れてみてください。

ただ、JSコードを全てhead内に移動すると読み込み速度が遅くなる可能性が高いです。そのため、エラーの原因となっているJSファイルのみFTPソフトなどでhead内に移動してやるなどの工夫を施すのが無難です。

Autoptimize説明画像4

CSSオプション

基本的に以下の3つの項目にチェックを入れればOKです。

⑧CSS コードを最適化

⑨Aggregate CSS-files?

⑩インラインの CSS を連結

他のチェック項目は特に気にしなくてもOKです。

もし気になる方は、チェックを入れた場合と入れない場合でサイト表示速度に違いが出るかを試してみるのもいいかもしれませんね。

Autoptimize説明画像5

HTMLオプション

⑪HTMLコードを最適化

これだけチェックをいれればOKです。

HTMLファイルにコメントを残したい場合は「HTMLコメントを残す」にもチェックを入れてください。

Autoptimize説明画像6CDNオプション

キャッシュ情報

ここは基本何もしなくてOK!

Autoptimize説明画像7

その他のオプション

ここでは3つすべてににチェックを入れておきましょう!

⑫連結されたスクリプト / CSS を静的ファイルとして保存

⑬Minify excluded CSS and JS files?

⑭Also optimize for logged in editors/ administrators?

えもまる
えもまる
これで1つ目のタブの設定が完了!

Imagesタブの設定

次に5つのタブの中の「Images」の設定を見ていきます。

Autoptimize説明画像8

基本的にここで何もチェックを入れる必要はありません。

ちなみに、「Lazy-Load images?」にチェックを入れると画像の遅延表示を行うことができます。

ですが、多くの方は画像遅延表示専用のプラグイン(BJ Lazy Loadなど)が入っているかと思いますのでチェックを入れる必要はありません

むやみにチェックを入れると別のプラグインと悪い干渉を起こしてしまう可能性があります。

えもまる
えもまる
2つ目のタブは余裕ですね!

追加タブの設定

次に「追加」の設定を見ていきましょう。

Autoptimize説明画像10

Google Fonts

絵文字の削除

ここでは以下の2つにチェックを入れておきましょう!

⑮webfont.jsで非同期にフォントを結合して読み込む。

⑯WordPress コア絵文字のインライン CSS、インライン JavaScript、およびその他の自動化されていない JavaScript ファイルを削除します。

この設定でフォントや絵文字などのリソースに対しても最適化を行うことができます。

えもまる
えもまる
これで3つ目のタブの設定も完了!

さらに最適化!とCritical CSSタブの設定

次に「さらに最適化!」と「Critical CSS」の設定を見ていきましょう。

Autoptimize説明画像9

どちらのタブの設定も有料でAutoptimizeをパワーアップさせるものや関連サービスの紹介になりますので無料版で構わないという方は特に何もする必要はありません

ちなみに僕も有料版やパワーアップには何も手を出していません。無料版でも十分個人ブログを運営できていますよ!

えもまる
えもまる

これで4,5つ目のタブの設定も完了♪

設定は以上になります!お疲れ様でした!!

Autoptimize設定後に行うこと

Autoptimizeは基本的に一度設定をしておけば自動で働いてくれる優秀なプラグインです。

ですが1点だけ、こまめにやっておくとサイト表示速度の維持につながる作業としてキャッシュ削除があります。

下の画像を見てみてください。

Autoptimize説明画像11

Autoptimizeをインストールおよび設定後にWordPress管理画面の上部に上のような「Autoptimize」という表示が現れます。

ここにカーソルを持っていくと「キャッシュを削除」というボタンを押すことができます。サイト表示速度の維持のために定期的にキャッシュ削除を行うことをおすすめします。

まとめ

いかがでしたでしょうか?

Autoptimizeはリソースの最適化や軽量化を行い、サイト表示速度の改善を手助けしてくれる有能なプラグインです。

この記事で紹介していない項目に関してもチェックを入れたり、外したりして試してみてサイト表示速度の良し悪しを試してみるのもいいと思いますよ!

ちなみにテーマ「JIN」を利用している方はおすすめのプラグインをこちらの記事で紹介していますのでよかったらどうぞ!

記事説明用画像
【2020年版】テーマ「JIN」でおすすめなプラグイン17選JINの方向けのおすすめのプラグインを17個紹介しています。設定方法を紹介しているリンクも貼ってありますのでご参考にしてみてください!...

エックスサーバーでできる意外と見落としがちなサイト高速化設定はこちら!

サイト高速化記事説明画像
エックスサーバーでできるプラグイン以外でサイト表示速度を上げる3つの方法 そんなあなたにおすすめの記事です。 この記事の内容 エックスサーバー使用者がプラグイン以...