WordPressの使い方

【2024年版】Autoptimizeの使い方と設定方法【サイト速度高速化】

※PRを含みます
【2024年版】Autoptimizeの使い方と設定方法【サイト速度高速化】
困ってる人
困ってる人
●WordPressブログのサイトスピードを上げたい。

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

 

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

 

こんな方におすすめ

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

 

本記事の信頼性

副業ブログで月6桁収益化しています。イトスピードの高速化について丁寧に解説できます。

 

検索ページがなかなか表示されず、他のページに移った経験は誰でもあると思います。そうなると読者の機会損失になるので、サイトスピードの高速化が必要不可欠です。

 

 

当サイトは本プラグインを活用し、サイト速度MAXを達成しています。

 

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

 

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

 

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

 

 

AFFINGER6で高速化

.

当ブログはAFFINGER6を利用し、ブログ収益6桁・サイト速度高速化を達成しました。

.

ブログ運営にはWordPressテーマ選定が欠かせませんので、まだ導入してない方はチェックしてみてください。

.

＼AFFINGERの概要なら／

公式サイトはこちら

＼AFFINGERの評判なら／

口コミ・評判はこちら

 

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

 

 

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

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

 

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

 

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

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

 

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

 

Autoptimizeのインストール方法

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

 

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

 

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

 

Autoptimizeのインストール画面

 

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

 

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

 

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

 

Autoptimizeの使い方

Autoptimizeの使い方

Autoptimizeの使い方

 

続いてAutoptimizeの使い方をご紹介します。まずは設定画面に移りましょう。

 

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

 

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

 

Autoptimize設定画面

 

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

 

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

Autoptimize のJS、CSS＆HTMLの設定方法

Autoptimize のJS、CSS＆HTMLの設定方法

 

Autoptimize のJS、CSS＆HTMLの設定方法を解説します。

 

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

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

 

1つずつ解説します。

 

①JavaScriptオプションの設定

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

 

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

 

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

 

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

 

②CSSオプションの設定

②CSSオプションの設定

 

CSSオプションの設定では「CSSコードを最適化」のみにチェックを入れます。

 

CSSコードの最適化

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

 

CSSファイルを連結する

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

 

インラインのCSSも連結

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

 

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

 

③HTMLオプションの設定

③HTMLオプションの設定

 

HTMLコードを最適化にチェックを入れます。

 

HTMLコードを最適化し圧縮化できる設定ですが、改行がなくなりデザイン崩れが発生する可能性があるので、エラーが出ればチェックを外してください。

 

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

 

④CDNオプションの設定

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

 

CDNオプションは初期設定のままでOKです。そのまま次に進みましょう。

 

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

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

 

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

 

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

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

 

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

サイトの管理者にも設定した内容が同じように反映されよう設定できます。

 

追加の互換性ロジックを無効化にもチェックを入れたら、『変更の保存とキャッシュの削除』をクリックしましょう。

 

Autoptimizeの設定方法②： 画像最適化

Autoptimizeの設定方法②： 画像最適化

Autoptimizeの設定方法②： 画像最適化

 

画像最適化の『画像最適化とCDN』にチェックを入れます。

 

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

 

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

 

Autoptimize設定時の注意点

Autoptimize設定の注意点

 

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

 

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

 

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

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

 

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

 

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

 

スポンサーリンク

まとめ：Autoptimizeを設定してサイトスピードを改善しよう

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

 

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

 

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

 

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

 

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

 

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

 

関連記事
【2024年版】WordPressのおすすめプラグイン15選＆導入手順を解説

続きを見る

 

関連記事
『使用していない JavaScriptの削除』を改善する方法【サイトスピードUP】
『使用していない JavaScriptの削除』を改善する方法【サイトスピードUP】

続きを見る

 

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

 

-WordPressの使い方