【2020年最新】Autoptimizeの設定方法・使い方(不具合の対処も紹介)

Autoptimizeは、WordPressのソースコードを圧縮して高速化するプラグインです。

HTML・CSS・JavaScriptから改行やスペースを削除したり、複数ファイルの結合により、ページのサイズを削減できます。

Autoptimizeの設定方法や使い方、不具合時の対処法とは?

本記事は、ブログブートキャンプブログの始め方-WordPressプラグインに関する内容となります。

レオのアイコン画像レオ

WordPressの表示速度をもっと高速化したい!

アレックスのアイコン画像アレックス

Autoptimizeでは、WordPress高速化に関連する機能をまとめて実装できるぞ!設定方法を確認していこう。

スポンサーリンク

ジャンプできる目次

この記事の著者

アレックス
Alex

ブログブートキャンプ アレックス

10年間のブログ経験を活かしてブログブートキャンプを2020年に設立。ブログ運営スキルを鍛え上げるためのノウハウを発信中。

Autoptimizeとは

Autoptimizeは、WordPressのソースコードを圧縮することで高速化できるプラグインです。

通常は、テーマファイルやfunction.phpを直接編集する必要があるソースコードの最適化を簡単な設定だけで実現することができます。

Autoptimizeのプラグインにより最適化できる項目は次の通りで、ほぼ全てをカバーしています。

  • HTMLの最適化
  • CSSの最適化
  • JavaScriptの最適化
  • 画像の最適化
レオのアイコン画像レオ

Autoptimizeって色々な最適化機能があるんだね!

アレックスのアイコン画像アレックス

そうなんだ。PageSpeed Insightsで指摘されるような項目をまとめて対策できるぞ!

スポンサーリンク

Autoptimizeの設定方法・使い方

Autoptimizeの使い方・設定方法

Autoptimizeの設定は簡単で、管理画面でいくつかの項目にチェックを入れていくだけです。

設定が必要となる項目は、次の3つになります。

WordPressの管理画面 Autoptimize

WordPress管理画面で「設定→Autoptimize」をクリックすると、各設定項目が表示されます。

JS、CSS&HTMLの最適化

まずは、JavaScript・CSS・HTMLのソースコードを圧縮するための設定を行います。

JavaScriptオプション

Autoptimize JavaScriptオプション設定

JavaScriptオプションでは、以下の2つの項目にチェックを入れてください。

  • JavaScriptコードの最適化にチェック
  • JSファイルを連結するにチェック

CSSオプション

Autoptimize CSSオプション設定

CSSオプションでは、以下の4つの項目にチェックを入れてください。

  • CSSコードを最適化にチェック
  • CSSファイルを連結するにチェック
  • インラインのCSSも連結にチェック
  • CSSのインライン化と遅延にチェック

HTMLオプション

Autoptimize HTMLオプション設定

HTMLオプションでは、以下の項目にチェックを入れてください。

  • HTMLコードを最適化にチェック

設定が終わったら、最下部にある「変更の保存とキャッシュを削除」をクリックしてください。

画像の最適化

Autoptimize 画像の最適化設定

画像の最適化の項目では、「画像の遅延読み込み(Lazy-load)を利用」にチェックを入れます。

画像の遅延読み込みとは、表示領域内の画像だけを読み込み、領域外の画像はスクロールした時に読み込むことで、高速化できる機能です。

設定が完了したら、「変更の保存」をクリックしてください。

追加の自動最適化

Autoptimize 追加の自動最適化設定

追加の自動最適化では、以下の通り、設定を行ってください。

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

設定が完了したら、「変更の保存」をクリックして、変更を有効化しましょう。

アレックスのアイコン画像アレックス

Googleフォントを使っていない場合は、Googleフォントの削除を選択するとさらに高速化できるぞ!

Autoptimizeで不具合が発生したら

Autoptimizeで不具合が発生したら

Autoptimizeは、WordPressのソースコード自体を変更するので、デザインが崩れたり他のプラグインと干渉する不具合が起きることがあります。

不具合を発生した場合も落ち着いて、以下の状況に応じて対応を行えば大丈夫です。

更新・変更が反映されない

WordPressの更新・変更が反映されない場合は、キャッシュをクリアすると解決できます。

Autoptimizeは、CSSやJavaScriptのキャッシュを生成しているため、古いキャッシュファイルを表示し続けていることが不具合の原因です。

Auroptimize キャッシュのクリア

管理画面の上部にある「Auroptimize→キャッシュを削除」をクリックして、保存されているキャッシュをクリアしてください。

完了後、不具合が起きていたページを更新すれば、変更が反映されているはずです。

表示がおかしい

WordPressの表示がおかしい場合は、CSSかJavaScriptの圧縮を無効にすると解決できます。

AutoptimizeがCSSやJavaScriptを最適化する際に、既存ファイルや他のプラグインと相性が悪いことがあり、不具合を引き起こしています。

JS、CSS&HTMLの最適化設定から1つずつ無効化にしていき、原因を特定しましょう。

JavaScript最適化を無効にしてみる

Autoptimize JavaScriptオプション設定

JavaScriptコードの最適化のチェックを外してみてください。

これで問題が解消された場合は、JavaScriptが不具合の原因ということになります。

Autoptimize head内へJavaScriptを強制

以下の設定により、JavaScript最適化を有効にした上で不具合を解消できる可能性があります。

JavaScriptの読み込み位置を変更する<head>内へJavaScriptを強制という設定を使います。

  • JavaScriptコードの最適化にチェック
  • JSファイルを連結するにチェック
  • <head>内へJavaScriptを強制にチェック

変更の保存とキャッシュを削除」をクリックして、表示が直っているか確認してみてください。

CSS最適化を無効にしてみる

Autoptimize CSSオプション設定

CSSコードを最適化のチェックを外してみてください。

これで問題が解消された場合は、CSSが不具合の原因ということになります。CSSコードの最適化はOFFにして運用をしていきましょう。

まとめ

今回は、WordPressプラグインのAutoptimizeについて、使い方や設定方法を解説しました。

記事のポイントをまとめます。

本記事のポイント
  • Autoptimizeは、WordPressのソースコードを圧縮して高速化するプラグインです
  • 設定項目としては、JavaScript、CSS、HTMLなどの最適化があります
  • 不具合が起きた場合は、キャッシュをクリアしたり設定を見直してみましょう

WordPressのプラグインについては、他にも使い方やカスタマイズ方法を紹介しています。

以上、「Autoptimizeの使い方・設定方法まとめ」でした。

スポンサーリンク

ジャンプできる目次
閉じる