WordPress WordPressの使い方

【速度を改善】Autoptimizeプラグインの使い方と設定方法【サイト速度高速化】

※PRを含みます
困ってる人
●WordPressブログを始めたけど、サイトスピードを上げたい。

●Autoptimizeプラグインの使い方と設定方法について知りたい。

 

今回はこんなお悩みに答えていきます。

 

こんな方におすすめ

  • WordPressブログ初心者
  • サイト速度を改善して高速化したい方
  • プラグインを利用して簡単にサイトスピードを上げたい方

 

本記事の信頼性

ブログ記事を3か月で50記事以上作成してきました。副業ブログを運営して実際に試したサイトスピードの高速化について丁寧に解説できます。

 

Googleなどの検索エンジンで検索結果のページがなかなか表示されず、思わず元のページに戻ってしまったという経験は誰にでもあると思います。

 

ブログやサイト運営にはサイトスピードの高速化が必要不可欠です。

 

今回はWordPressのプラグイン『Autoptimize』で簡単にサイト速度を最適化する設定方法について紹介します。

 

本記事を読めば、簡単にサイト速度を高速化できるので、ぜひ試してみてください。

 

Autoptimizeの設定は5分程度あればできるので、導入してない方は試してみましょう。

 

なお、WordPressで導入するべきおすすめプラグインについては、【2022年版】WordPressのおすすめプラグイン15選＆導入手順を解説参考にしてみてください。

 

それでは早速始めていきます。

 

 

Autoptimizeとは？【サイト速度最適化プラグイン】

Autoptimizeとは？【サイト速度最適化プラグイン】

 

それではまずAutoptimizeとは？という疑問にお答えします。

 

『Autoptimize』はサイトの読み込み速度を最適化できるプラグインになります。

 

最適化できる理由は、JavaスクリプトやCSSオプション、画像の読み込みなどのサイト内での設定を簡単に変更できるからです。

サイトスピードにはJavaやCSSのコードが大きく影響するので、この部分を変えるということです。

 

それではAutoptimizeのインストール方法についてまずは紹介していますね。

 

Autoptimizeのインストール方法

WordPressプラグイン：Autoptimizeのインストール方法

 

まずはAutoptimizeをインストールしていきます。

 

管理画面から『プラグイン』⇒『新規追加』をクリックします。

 

Autoptimizeのインストール画面

 

Autoptimizeを検索して『今すぐインストール』をクリックします。

 

後は通常通り、インストール完了後『有効化』をクリックして完了です。

 

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

 

Autoptimizeの設定方法

Autoptimizeの設定方法

 

それでは早速Autoptimizeの設定方法について紹介します。

 

まずは設定画面に移りましょう。

 

管理画面⇒Autoptimizeの設定画面に移動する

 

設定画面に移ると下記のような画面になります。

 

Autoptimize設定画面

 

Autoptimizeの設定は複数ありますが『JS、CSS＆HTML』、『画像』の2つを設定していきます。

 

まず『JS、CSS＆HTML』の設定から行います。

 

『JS、CSS＆HTML』の設定方法

Autoptimize：『JS、CSS＆HTML』の設定方法

それでは『JS、CSS＆HTML』について設定してきます。

 

具体的には下記5つになります。

 

Autoptimizeの『JS、CSS＆HTML』設定方法5つ

  • ①JavaScriptオプション
  • ②CSSオプション
  • ③HTMLオプション
  • ④CDNオプション
  • ⑤その他オプション

 

1つずつ解説します。

 

①JavaScriptオプションの設定

Autoptimize：①JavaScriptオプションの設定

 

JavaScriptオプションの設定はチェックを入れなくてOKです。

 

『JavaScriptコードの最適化』にチェックを入れるとファイル内の改行を取り除いてJavaScriptを圧縮してくれますが、サイト内の表示崩れの可能性があります。

 

なのでここはチェックを入れず次に進みましょう。

 

②CSSオプションの設定

Autoptimize：②CSSオプションの設定

 

CSSオプションの設定では上記3つにチェックを入れましょう。

 

CSSコードの最適化

CSS内のファイルコードを圧縮するか選択できます。

 

CSSファイルを連結する

リンク型のCSSファイルを連結し圧縮します。チェックを入れると読みこむファイル数を削減できます。

 

インラインのCSSも連結

HTML中のCSSも連結し、ファイル数を削減できます。

 

3つチェックを入れたらOKです。

 

その他設定は、必要に応じて設定しましょう。

 

③HTMLオプションの設定

Autoptimize：③HTMLオプションの設定

 

ここはチェックを入れなくてOKです。

 

HTMLコードを最適化し圧縮化できる設定ですが、改行がなくなりデザイン崩れが発生する可能性があるので、今回はチェック不要です。

 

一度設定してみてサイト内のデザイン崩れがなければそのまま設定しておくのでもOKですよ。

 

④CDNオプションの設定

Autoptimize：④CDNオプションの設定

 

CDNオプションは初期設定のままでOKです。

 

そのまま次に進みましょう。

 

⑤その他オプションの設定

Autoptimize：⑤その他オプションの設定

 

その他オプションの設定は上記3つを選択しましょう。

 

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

デフォルトで保存される性的なCSS/JSになります。

 

除外されたCSSファイルとJSファイルを最適化

除外ファイルの最小化を行えます。

 

ログイン状態の編集者、管理者にも最適化を行う

サイトの管理者にも設定した内容が同じように反映されよう設定できます。
読者目線を考えると設定しておくべきなのでチェックしましょう。

 

以上入力が完了すれば、『変更の保存とキャッシュの削除』をクリックしましょう。

 

Autoptimizeの詳細設定 画像最適化を設定する

画像最適化の設定【Autoptimizeの詳細設定】

 

最後に画像最適化の『画像遅延読み込みを利用』にチェックを入れます。

 

画像遅延読みとは

画面枠外の見えてない画像の読み込みを遅延させることで、サイトスピードを向上化させることができます。

 

変更の保存をクリックして設定の完了です。

 

ここまでお疲れ様でした。追加タブなどの設定もあるのでお好みでカスタマイズしましょう。

 

Autoptimize設定時の注意点

Autoptimize設定の注意点

 

プラグインAutoptimizeは設定後にレイアウト崩れなどのデザインに異常がある場合があります。

 

必ず設定後はレイアウトに問題ないか確認しましょう。

 

デザイン異常時の確認項目

・CSSコードを最適化
・CSSファイルを連結する
・インラインのCSSも連結
・連結されたスクリプト/CSSを静的ファイルとして保存

 

また他にプラグインを導入して重複している内容がある場合も異常が発生する可能性があります。

 

使用しているプラグインと被りがないか確認しておきましょう。

 

[ad01]

まとめ：プラグインAutoptimizeを使用してサイトスピードを改善しよう

まとめ：プラグインAutoptimizeを使用してサイトスピードを改善しよう

 

今回はAutoptimizeの使い方と設定方法について解説しました。

 

Autoptimizeは5分程度で設定ができてサイトスピードも改善できるので、活用してない方はぜひ導入してみてください。

 

サイトスピードを改善できればSEO対策にもなるので、やれることから実践していきましょう。

 

本記事を最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで。

 

関連記事【2022年版】Googleアドセンス不正クリック防止対策方法【プラグインの導入手順をご紹介】

 

人気記事【2022年】WordPressブログのおすすめテーマ11選を徹底比較

 

-WordPress, WordPressの使い方