--> Autoptimizeの使い方や設定方法を解説【サイトを高速化するプラグイン】
ブログ

Autoptimizeの使い方や設定方法を解説【サイトを高速化するプラグイン】

Autoptimizeの使い方と設定方法を知りたい

こんな疑問に答えます。

本記事の内容

  • Autoptimizeで出来ること
  • Autoptimizeのインストールと有効化
  • Autoptimizeの使い方・設定方法
  • Autoptimizeの設定が上手くいかない時の対処法

筆者

そうし
そうし
元サラリーマン。現在は当ブログの運営とWebライターとして活動しています!

この記事を書いているぼくは、当ブログ開設後3記事で収益化。日々5000文字以上を書きつつ毎日更新を100日続けました。

Autoptimizeを使えば、コードを最適化してWordPressサイトを高速化できる可能性があります。

この記事ではAutoptimizeとは?というところから使い方や設定方法、不具合が起きと時の対処法まで解説します。

ではさっそくいきましょう。

Autoptimizeで出来ること

イエスまたはノー

まずは、Autoptimizeではどういったことができるのか確認しておきます。

Autoptimizeで出来ること

  • HTMLの最適化
  • CSSの最適化
  • Java Scriptの最適化
  • 画像の最適化

”最適化”とはその名の通り、コードや画像を最適な形にすることです。この場合、具体的にはサイト高速化のために、わざとコードを遅らせて読み込んだり、コードの空白やいらない部分を圧縮することです。

AutoptimizeではHTML,CSS,JS,画像をまとめて簡単に最適化することができますよ。

Autoptimizeの注意点

Autoptimizeはキャッシュや画像遅延読み込み(=lazy load)を扱うプラグインでもあるので、お使いのプラグインによっては不具合が発生することもあります。

また、よくあるパターンとしてお使いのWordPressテーマで、既にHTML,CSS,JSが最適化されていて、Autoptimizeをインストールすると二重設定になることがあります。

もし上手くいかない場合はお使いのテーマとの相性を調べてみてくださいね。

その他、不具合が発生した時の対処法は使い方と設定方法を解説した後に解説します。

Autoptimizeのインストールと有効化

インストール

ではAutoptimizeのインストールと有効化をします。

Autoptimize

WordPressの管理画面から「プラグイン」の「新規追加」をクリックし「Autoptimize」と入力します。

「今すぐインストール」を押してAutoptimizeをインストールします。

Autoptimize

インストールが終わったら「有効化」をクリックしてAutoptimizeを使えるようにしましょう。

Autoptimizeの使い方・設定方法

設定

次にAutoptimizeの使い方と設定方法を確認します。

Autoptimize

「プラグイン」から「インストール済みプラグイン」を選択し、Autoptimizeの「設定」をクリックします。

Autoptimizeでは以下の5つの設定項目があります。

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

設定はとても簡単です。1つずつ解説していきますね。

JS、CSS&HTML

JSの設定

AutoptimizeJava Scriptコードの最適化」にチェックを入れます。するとその下に他の項目が表示されるので「JSファイルを連結する」にもチェックを入れます。(デフォルトでチェックが入っているはずです)

他のプラグインで同様の機能を有効にしている場合は、不具合を防ぐためにどちらか一方をオフにしておきます。

たとえば、WP Fastest Cacheというプラグインには「JSの結合」という項目があり、Autoptimizeの「JSファイルを連結する」と重複する機能なのでどちらか一方をオフにしておいて下さい。

CSSの設定

Autoptimize

次はCSSの設定です。JSの時と同じように「CSSコードを最適化」にチェックを入れるとその他の項目が表示されます。

赤枠の3つの項目にチェックを入れます。(デフォルトでチェックされているはずです)

CSSオプションでも他のプラグインの機能と重複している可能性があります。

たとえば、お使いの他のプラグインに「CSSの圧縮」や「CSSの結合」などという機能があり、有効化されている場合はどちらか一方をオフにしておいてください。

HTMLの設定

Autoptimize次はHTMLオプションです。「HTMLコードを最適化」にチェックをいれるだけでOKです。

HTMLもCSSと同様、他のプラグインで「HTMLの圧縮」などの項目がある場合はどちらか一方をオフにしておいてくださいね。 

CDNオプションとその他オプションはデフォルトのままでOK

Autoptimize Autoptimize

「CDNオプション」と「その他オプション」は特別な理由がない限りデフォルトのままでOKです。

最後に「変更を保存」をクリックして完了です。

画像最適化

次は画像の設定です。

Autoptimize

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

画像の遅延読み込み(Lazy-load)とは、読者がサイト(ページ)内をスクロールして、画像が表示される範囲になった時に初めて画像を読み込むという設定で、サイト全体の表示速度を上げる設定です。

すでに他のプラグインで画像の遅延読み込みを設定している場合はチェックしなくてOKですよ。

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

その次の項目の「クリティカルCSS」はデフォルトのままで問題ありません。

追加

次は「追加」の項目です。

Autoptimize

「Googleフォントの削除」を選択すると、サイトの軽量化につながります。もしGoogleフォトを使っている人は「そのままにする」を選択しておいてください。

Googleフォントってなに?って感じの人は「Googleフォントの削除」にチェックを入れておきましょう。

さらに最適化!

Autoptimize

設定の最後は「さらに最適化!」タグです。ここはは特になにもしなくてOKです。

以上でAutoptimizeの設定は完了になります。

Autoptimizeの設定が上手くいかない時の対処法

電球を放つ人

AutoptimizeはWordPressのコードを変更・最適化するので、デザインが崩れたりほかのプラグインと干渉して不具合がおこることがあります。

ここでは、以下の3つの場合の不具合の対処法を紹介します。

  • 設定の変更が反映されない
  • 表示が崩れた
  • 画像が表示されない

1つずつ画像で解説します。

設定の変更が反映されない

WordPressの何らかの更新・変更後、古いキャッシュが表示されていると変更が反映されません。WordPressの設定や変更が反映されない場合は、キャッシュを削除してみましょう。

Autoptimize

Autoptimize有効化後、画面上部に「Autoptimize」が表示されるので「キャッシュを削除」をクリックしてキャッシュを削除します。

その後、変更が反映されていないっページを再読み込みすれば反映されているはずです。

表示が崩れた

AutoptimizeはCSSやJavaScriptのコードを変更するので、表示が崩れる可能性があります。AutoptimizeでCSSやJavaScriptを最適化する時に、他のファイルやプラグインと相性が合わないのが原因です。

そんな時は、CSSかJavaScriptのコードの最適化を無効にすると解決することが多いですよ。

JavaScript最適化を無効にする

Autoptimize

最初に設定した「JavaScriptコードの最適化」のチェックを外して変更を保存してみてください。これで問題が起こったページを再読み込みしてみて問題が解決したらJavaScriptが原因ということになります。

そんな時のために、JavaScriptコードを最適化した上で正常に機能する可能性がある設定方法を解説します。

Autoptimize

以下の3つのチェックを入れます。

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

<head>内へJavaScriptを強制という設定をおこなうと、Java Scriptの読み込み位置を変更することができます。

チェックを入れた後は、画面下にスクロールして「変更の保存とキャッシュを削除」をクリックして不具合が出たページの表示を確認してください。

CSS最適化を無効にする

Autoptimize

JavaScriptの最適化をオフにしても問題が解決しない場合はCSSコードを最適化をオフにして変更を保存します。

問題が起こったページを再読み込みしてみて問題が解決すればCSSが原因ということになります。CSSコードの最適化をオフにして運営してください。

画像が表示されない

画像が表示されなくなってしまった場合はJavaScriptコードの圧縮を無効にすると解決することができます。

先ほど解説した「JavaScript最適化を無効にする」を見てJavaScriptコードの最適化をオフにしてみてください。

まとめ:Autoptimizeでブログを高速化しよう

速いサイト

Autoptimizeの設定お疲れさまでした。

設定が完了したらPageSpeed Insightsでサイトの速度を計測してみましょう。

最後に今回の内容をまとめます。

  • Autoptimizeはコードを最適化してサイトを軽くするプラグイン
  • できることは大きく分けて①コードの最適化②画像の最適化
  • 不具合が起きたらHTML,CSS,JavaScriptの最適化を1つずつオフにして確認する

今回は以上です。

おすすめの記事