WORDPRESS

【2022年】Autoptimizeの設定方法と使い方を初心者向けに解説【WordPressプラグイン/コードの最適化でサイトスピードを高速化】

Autoptimizeの設定方法と使い方
 

専業ブロガー5年目のあずきです🐥

 

WordPressで超定番なプラグインの1つ…

Autoptimize

について、導入手順と設定方法&使い方をブログ初心者さん向けに1から解説していきます

 

Autoptimizeは、WordPressのブログを構成している各種「コード」などを…

自動で最適化

することで、結果的に表示スピードを向上させるためのプラグインです

もちろん無料のプラグインで、難しいスキルもいらないよ!
 

そんな「Autoptimize」について、3つのステップで丁寧に解説していきます

  1. 「Autoptimize」とは?どんな役割があるの?
  2. 「Autoptimize」の導入手順
  3. 「Autoptimize」の基本的な設定方法

またこの記事の最後では【おまけ】として、当プラグインを使用するうえで押さえておきたい……

  • 「Autoptimize」で自動生成される ”ページキャッシュ” と、その削除方法

についても、あわせてご紹介していきます

ということで、さっそく見ていこー!

【2022年】Autoptimizeの設定方法と使い方を初心者向けに解説【WordPressプラグイン/コードの最適化でサイトスピードを高速化】

ステップ1:WordPressプラグイン「Autoptimize」とは?どんな役割があるの?

WordPress ヘッダー c-01

まず1つ目のステップは…

「Autoptimize」とは?

その役割についてです

 

「Autoptimize」の主な役割は、WordPressを水面下で構成している…

  • HTML
  • CSS
  • JavaScript

といった各種ソースコードを「最適化」して、サイズを軽減させること

コードを最適化することで、「表示スピードの高速化」につながるよ!
 

ちなみにここで言う「最適化」とは、例えば…

  • コード内のスペースや改行などを詰めて「縮小」させたり
  • コードが記載された複数のファイルを「連結」させたり

といった処理を指します

つまり、「プログラムを読み取るコンピューター側」にとっての ”ムダ” を省いてあげること!
 

ちなみに!

ブログの表示スピードを測るツールとして代表的な「PageSpeed Insights」というGoogleの無料ツールがあるんですが、計測後の「改善点」のところに…

レンダリングを妨げるリソースの除外

という項目が、わりとよく出てくるんですね

 

これがまさに、今回のテーマである…

  • レンダリング
    →WEBサイトを構成している各種「コード」を読みこんで、実際のページを表示させること!
  • を妨げるリソース
    →コード構成にムダがあって読みこみが遅れてしまう、その「原因」となっている部分!
  • の除外
    →上記のムダとなっている部分を「最適化」して、ページの読み込みをなるべくスムーズにしよう!

といった意味になります

 

またAutoptimizeでは、そんな「コードの最適化」以外に…

  • 画像ファイルの最適化
  • Googleフォントの削除
  • ページキャッシュの生成・管理

といった、同じく「WordPressの高速化」につながる機能も付属されています

あわせて解説していくのでご安心を!
 

ということで、お次はプラグインの導入手順を見ていきましょう🐥

 

ステップ2:WordPressプラグイン「Autoptimize」の導入手順【インストールと有効化】

WordPress ヘッダー c-02

はじめに

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

BackWPupのおすすめな設定方法
【2022年】BackWPupのおすすめな設定方法を初心者向けに解説【WordPressプラグイン/ブログデータを自動でバックアップ】

続きを見る

 

つづいて2つ目のステップは…

「Autoptimize」の導入手順

について

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン インストール 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン インストール 1-02

↑ こちらの検索フォームに Autoptimize と入力し、その下の検索結果から…

Autoptimizeの設定方法と使い方 1-2-01

↑ このアイコンが目印のプラグイン「Autoptimize」を探し、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

 

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

今度は肝心の「設定方法」について見ていこう!
 

ステップ3:WordPressプラグイン「Autoptimize」の基本的な設定方法【コードや画像などの最適化設定】

WordPress ヘッダー c-03

つづいて3つ目のステップは…

「Autoptimize」の基本的な設定方法

について

 

WordPress管理画面の一覧メニューから…

Autoptimizeの設定方法と使い方 1-3-top-01

↑ 設定 > Autoptimize をクリックしましょう

 

「Autoptimize」の設定画面が開いたら、ここから大きく…

  • JS、CSS & HTML
  • 画像
  • クリティカル CSS
  • 追加
  • さらに最適化!

という5つのタブにわけて、それぞれ設定していきます

 

といっても一番のメインはあくまで【JS、CSS & HTML】で、残りのタブは一瞬です🐣

ということで、まずは【JS、CSS & HTML】タブから!
 

【JS、CSS & HTML】タブ

 

「Autoptimize」の設定画面で、上部のタブ一覧から…

Autoptimizeの設定方法と使い方 1-3-1-top

↑ こちらの【JS、CSS & HTML】というタブをクリックして開きます

 

上から順に見ていきますね🐣

 
【JS、CSS & HTML】タブ:「JavaScript オプション」
 

「JavaScript オプション」というエリアでは、まず…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-1-1-01

↑ こちらの JavaScriptコードの最適化 にチェックを入れます

 

つづいて、その下に表示されている…

Autoptimizeの設定方法と使い方 1-3-1-1-02

↑ こちらの各種項目については、通常すべて デフォルトのまま でOKです

つづいてその下の、「CSSオプション」という場所を見ていくよ!
 
【JS、CSS & HTML】タブ:「CSS オプション」
 

「CSSオプション」というエリアも、まずは…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-1-2-01

↑ こちらの CSSコードを最適化 にチェックを入れます

 

つづいて、その下に表示されている…

Autoptimizeの設定方法と使い方 1-3-1-2-02

↑ こちらの各種項目については、通常すべて デフォルトのまま でOKです

お次はその下の「HTML オプション」について!
 
【JS、CSS & HTML】タブ:「HTML オプション」
 

「HTML オプション」というエリアも、まずは…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-1-3-01

↑ こちらの HTMLコードを最適化 にチェックを入れます

 

つづいて、その下に表示されている…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-1-3-02

↑ こちらの項目については、通常 デフォルトのまま でOKです

 
【JS、CSS & HTML】タブ:「CDN オプション」
 

「CDN オプション」というエリアについては、通常 デフォルトのまま でOKです

 
【JS、CSS & HTML】タブ:「その他オプション」
 

一番下の「その他オプション」というエリアについても、 デフォルトのまま です

 

ということで…

ここまで一通りできたら、画面下部の 変更を保存 ボタンを忘れずにクリックして、この【JS、CSS & HTML】タブは設定完了となります

 

お次は、【画像】タブについて見ていきましょう🐥

ここからはサクサクいくよ!
 

【画像】タブ

 

設定画面の上部にあるタブ一覧から、今度は…

Autoptimizeの設定方法と使い方 1-3-2-top

↑ こちらの【画像】というタブをクリックして開きます

 

また上から見ていきますね🐣

 
画像を最適化
 

「画像を最適化」という項目では、WordPressにアップロードした画像を最適化して「容量を軽減」することで、表示スピードの向上が期待できます

 

ただし、WordPressにおける「画像の最適化」には…

EWWW Image Optimizer

というプラグインが定番でおすすめなので、機能の重複を避けるためにも当ブログでは…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-2-01

↑ このように、 チェックなし の状態にしています

 
 
画像の遅延読み込み (Lazy-load) を利用
 

「画像の遅延読み込み」という項目は、一見「マイナスな機能」にも思えるかもしれませんが、むしろこの…

遅延読み込み = Lazy Load

という機能によって、「ページ表示の高速化」が期待できます

 

ただし!

この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらも「Autoptimizer」側では…

WordPressプラグイン「Autoptimize」の設定方法と使い方 1-3-2-02

↑ このように、 チェックなし の状態にしています

 
 

ということで…

もしもデフォルトの設定から変更した場合は 変更を保存 ボタンをクリックして、この【画像】タブについても設定完了です🐥

この調子でサクサクいこう!
 

【クリティカル CSS】タブ

 

【クリティカル CSS】というタブについては、通常 デフォルトのまま でOKです

 

【追加】タブ

 

今度は…

Autoptimizeの設定方法と使い方 1-3-4-top

↑【追加】というタブの設定について

 

こちらも基本的には デフォルトのまま でOKなんですが、このなかで1点だけ…

Googleフォント

という項目で、「WEBフォント」の一種である「Googleフォント」を使用していない場合には…

Autoptimizeの設定方法と使い方 1-3-4-01

↑ この Googleフォントの削除 という項目を選ぶと、読み込みの軽量化につながります

逆に、Googleフォントを使ってる(今後も使う予定)なら選んじゃダメ!
 

補足

「自分のWordPressがGoogleフォントを使用しているかどうか?」の確認方法は、お使いのWordPressテーマなどによって変わってきます

 

参考までに、当ブログでも愛用中のテーマ「ACTION AFFINGER6」における、設定フォントの確認・変更手順は下記の通りです

 

まずは…

  1. WordPress管理画面の左側一覧から「AFFINGER管理」
  2. 「AFFINGER管理」内の左側一覧から「全体設定」タブ

の順にクリックし、そのなかの「フォントの種類」というエリアに表示されている…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-01

↑ こちらの…

  • M PLUS Rounded 1c
  • Noto Sans

という2つが、Googleフォントにあたります(ほかに、特定のGoogleフォントを自分で追加していない限り)

 

デフォルトの設定では…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-02

↑ このように「記事タイトル・見出し…」という項目で、Googleフォント【Noto Sans】が適用されています

 

これを「通常フォント」に変更するには…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-03

↑ こちらの【使用しない】を選択し、右上の「Save」ボタンをクリックすればOKです

 

これで、【メイリオ】というAFFINGER標準の通常フォントに変更されます

 

ちなみに右側の【游ゴシック】と【游明朝】も通常フォントですが、この2つは…

WordPressでGoogleフォントを使用しているかどうかの確認&通常フォントへの変更方法(AFFINGERの場合) 1-04

↑ こちらの注釈にもあるように、一部ブラウザで「若干のズレ」が生じてしまうことから、基本的には推奨しません

 
このブログでも、Googleフォントは削除してるよ!
 

なお…

現在提供されているGoogleフォントの種類については、「Google Fonts」で簡単に確認できます(「Language」というタブを開き、「Japanese」を選択!)

 

関連

 

ということで…

ここまで設定できたら、また 変更を保存 ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥

 

【さらに最適化!】タブ

 

【さらに最適化!】というタブについては、通常 デフォルトのまま でOKです

 

これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります

 

最後に!

「Autoptimize」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥

一瞬だよ!
 

おまけ:WordPressプラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その削除方法について

WordPress ヘッダー c-04

最後に【おまけ】として、今回のプラグイン「Autoptimize」で生成される…

ページキャッシュ

について

 

まず「Autoptimize」を有効化すると、WordPressで最適化された各種ファイルの…

キャッシュ

というのが自動生成されて、サーバー上に保存されます

 

キャッシュとは、Webページの読み込み情報を…

自動的に整理して「一時保存」しておく

ことで、「次回のページ表示にかかる処理」を大幅に軽減させる仕組みです

 

補足

WordPressにおける「キャッシュ」は、大きく…

  1. ページキャッシュ
    → サイト運営者の「サーバー」側に保存されるキャッシュのこと!
  2. ブラウザキャッシュ
    → 訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと!
  3. その他、いくつかの専門的なキャッシュ
    → 基本的にはスルーでOK!(データベースキャッシュ、オブジェクトキャッシュなど)

という3つのパターンにわかれます

 

で、今回の「Autoptimize」で生成されるキャッシュというのは…

ページキャッシュ

を指します

ページキャッシュは、「WordPressキャッシュ」とか「サーバーキャッシュ」とも言われたりするよ!
 

そんなWordPressの高速化につながる「ページキャッシュ」ですが、あまり古いキャッシュファイルを残したままでいると…

  • 最新のページ情報が表示されなくなったり
  • WordPressがかえって重たくなったり

といったデメリットが生じかねないんですね

 

なので結論!

自動で生成されるこの「ページキャッシュ」については…

  • 記事を投稿・更新したとき
  • 設定などを変更したとき
  • 1日の作業をおえたとき

など自分なりにルールを決めて、定期的に「まとめて削除」するようにしましょう

 

注意

この「キャッシュ削除」はあまり頻繁に行うとサーバーに負荷がかかるので、1日に多くても「数回程度」までが一般的です

ページキャッシュの具体的な削除手順は、次の通り!
 

まずは、WordPress管理画面の上側に表示されている…

Autoptimizeの設定方法と使い方 1-4-01

↑「Autoptimize」という場所にカーソルを合わせましょう

 

すると、現在WordPressに溜まっている「キャッシュの容量」が表示されるので…

Autoptimizeの設定方法と使い方 1-4-02

↑ こちらの Clear CSS/JS Cache というボタンをクリックするだけ🐥

これでサーバーに蓄積されていた「ページキャッシュ」が空になって、最新のページ情報が読みこまれるようになるよ!

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

”全8章” の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

第1位

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 「稼ぐ」に特化した、本気で戦うための最適化&アフィリエイト機能!

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガーが本気レビュー
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

続きを見る

※2020年度Infotop売上及びInfotop Affidemy

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS