WordPress

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

2021年2月21日

 

悩む人
Autoptimizeの使い方を知りたいです!また、導入することで不具合が発生しないのか?もし発生した場合の対処方法について知りたい

 

こんなお悩みに答えます。

 

記事の信頼性

・Web業界に6年間勤めています。WordPress運用歴8ヶ月です。

 

Autoptimizeは、ワードプレスのHTML,CSS,JSファイルを軽量化してくれ、ページの表示速度改善が期待できるプラグインです。

 

実際、Autoptimizeプラグインを使ったことで、速度が2〜3秒ほど上がりました。

 

ただ、サイトによっては、Autoptimizeプラグインを使用したことで不具合が発生する可能性があります。

 

僕も利用したところ、ヘッダーにあるロゴのCSSが効かなくなり小さな不具合が発生しました。
KEI

 

そこで、本記事では、Autoptimizeプラグインの使い方から不具合が起きた後の対処方法についても紹介していきます。

 

Autoptimizeプラグインの使い方が理解できるのでぜひ読み進めてください!

 

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

 

 

Autoptimizeプラグインとは?

Autoptimizeプラグインとは?

 

Autoptimizeは、HTML,CSS,JavaScriptのソースコードの圧縮・軽量化を行なってくれる無料のプラグインツールです。

 

コードを圧縮してあげることで、無駄なコードを読み込む必要がなくなり、ページの表示速度が改善されます。

 

また、Autoptimizeは、約100万人がインストールしていまして、定期的にアップデートも行なっているので安心して利用できるプラグインと言えます。

 

その他に、ワードプレスで軽量化してサイト速度の改善をする方法には、画像の軽量化がありますね。

 

無料の画像をそのままアップロードしてしまうと、読み込みときに時間がかかり、ページの表示速度が遅くなる場合があります。

 

Autoptimizeプラグインは、そんな画像の最適化も行なってくれます。

 

とにかくサイトの表示速度改善のために、徹底的に圧縮・軽量化してくれるプラグインなのです。

 

Autoptimizeプラグインの設定方法と使い方

Autoptimizeプラグインの設定方法と使い方

 

それでは、Autoptimizeプラグインの使い方について解説していきます。

 

まずは、ワードプレスの管理画面にログインして、サイドバーメニュー「プラグイン → 新規追加」をクリックします。

 

続いて、検索ボックスに「Autoptimize」を入力して、プラグインのインストールを行います。

 

※似ているプラグインもあるので、インストールの際には気をつけてください!

 

 

インストールできたら有効化にして、ワードプレスのサイドバメニュー「設定 → Autoptimize」をクリックします。

 

 

ここから細かい設定をしていきます!
KEI

 

JS、CSS&HTMLの最適化

 

まずは、『JS、CSS&HTML』タブ内の設定をしていきます。

 

「JS、CSS&HTML」は、文字通りJavaScript・CSS・HTMLのソースコードを圧縮する設定です。
KEI

 

JavaScriptオプションでは、以下の項目にチェックを入れます。

 

 

  • JavaScriptコードの最適化
  • JSファイルを連結する

 

続いてCSSオプションです。以下の項目にチェックを入れます。

 

 

  • CSSコードを最適化
  • CSSファイルを連結する
  • インラインのCSSも連結

 

他にもチェックする項目がありますので、自サイトの環境に合わせて個別に設定してみてください。

 

ただ、「CSSのインライン化と遅延」は、ページを表示した際の挙動が少しおかしくなったので、僕はチェックを外してます。

 

最後に、HTMLコードの最適化です。以下の項目にチェックをつけます。

 

 

  • HTMLコードを最適化

 

これで全てのチェックは完了です。

 

最後に、ページ下部の「変更の保存とキャッシュを削除」をクリックします。

 

画像最適化

 

続いて、「画像」のタブをクリックして、画像最適化を行なっていきます。

 

 

画像の遅延読み込み (Lazy-load) を利用」にチェックを入れて、「変更を保存」をクリックします。

 

※ただし、EWWW Image Optimizerなど画像最適化プラグインをすでに入れている場合、「画像」タブ内では特にチェックする必要はありません。動作に不具合が発生する可能性があります。

 

なので、不具合が起きましたら、画像タブ内のチェックはOFFで運用してください。

 

ちなみに、EWWW Image Optimizerは過去に使っていたことがあるので、以下記事を参考にしてみてください。

 

>>「EWWW Image Optimizer」の設定方法と使い方

 

追加の自動最適化

 

「追加の自動最適化」では、以下の項目にチェックを入れます。

 

 

  • Googleフォント: 結合とヘッダーで遅延リンクを選択
  • 絵文字の削除

 

Googleフォントは便利なのですが、使用すると若干重くなるのでチェックしておきましょう。

 

また、絵文字も読み込み速度に影響するので、ブログ内で使っている場合でしたら、削除しておくといいです。

 

設定が終わりましたら、「変更を保存」をクリックします。

 

Autoptimizeで不具合が発生した場合

Autoptimizeで不具合が発生した場合

 

続いて、Autoptimizeで不具合が発生した場合の対応について紹介します。

 

前述した通り、僕の場合はヘッダーのロゴが消えました...
KEI

 

できる対応は、以下二つです。

 

  • その①:キャッシュを削除
  • その②:チェックを外す

 

その①:キャッシュを削除

 

Autoptimizeを追加すると、ページ上部にAutoptimizeの項目が追加されています。

 

 

オンマウスをすると「キャッシュを削除」があるので、クリックします。

 

 

キャッシュは、過去にサイトを訪れた時のデータを表示する履歴ファイルのようなものです。

 

古いキャッシュファイルを表示し続けていることによって、不具合が起きている可能性があるので、「キャッシュ削除」をクリックして解消します。

 

念のためシークレットブラウザを使って、問題なく表示しているか確認してみてください。

 

その②:チェックを外す

 

CSS、JSでチェックをつけた箇所を1つずつ外して、表示崩れの確認をしてみてください。

 

というのも、他のプラグインと干渉し合って不具合が発生している可能性が考えられるからです。

 

また、要素が動くなった場合には、JSの不具合が考えられます。

 

できる対処法としまして、以下の『<head> 内へ JavaScript を強制』にチェックを入れてみてください。

※「JavaScriptコードの最適化」「JSファイルを連結する」はチェックをしたままにしてください。

 

 

最後に「変更の保存とキャッシュの削除」をクリックして、問題なく表示されているか確認してみてください。

 

CSS

 

CSSの場合、既存ファイルとの相性が悪いことが考えられます。

 

当ブログのロゴが消えた原因として、既存のCSSファイルとの相性が悪く不具合を起こしたみたいです。

 

ヘッダーロゴ用のCSSコードを削除して、チェックを付け直したらうまく表示されるようになりました。
KEI

 

なので、画面が崩れたり不具合が起きましたら、既存のCSSファイルを見直してみることをオススメします。

 

それでも、不具合が解消されない場合は、プラグインやファイルの相性が悪いと考えられるので、CSSコードをチェックせずに運用することをオススメします。

 

Autoptimizeプラグインの設定方法と使い方:まとめ

新卒で専門スキルがないとWebディレクターが厳しいと感じる理由Autoptimizeプラグインの設定方法と使い方:まとめ

 

ここまで、Autoptimizeプラグインの設定方法から不具合が発生した際の対応について紹介しました。

 

昨今では、ページの表示速度が検索順位を決める1つの要素にするとGoogleが正式に公言しました。

 

Autoptimizeは、そんな速度改善に役立てられるプラグインの1つです。

 

なので、ぜひサイトの表示速度改善にAutoptimizeプラグインを利用してみてください!

 

ここまで読んでいただき、有難うございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress