blog

Autoptimizeの設定方法と使い方【ページ表示速度向上】

今回はWordPressのプラグインの1つ、【Autoptimize】を紹介します!

このAutoptimizeというプラグインはwebのページを構成するファイルを圧縮して、その結果ページの表示速度を改善してくれるプラグインです。

表示速度については少しでも早い方がいいですよね?

直接ソースを修正できる人なら不要かもしれませんが、そうではない人でも最近はWordPressでブログの作成をしている方がたくさんいます。

僕も多少なら触れるのですが分からないことも多いので…

このプラグインは、そのような方におすすめです!

▼Autoptimizeとは?
ページを構成する「HTML」「CSS」「JavaScript」のファイルを圧縮してくれるプラグインです。日本語にも対応してくれているので、とても使いやすいです!

Autoptimizeのインストール方法

それでは早速プラグインをインストールしてみましょう!

管理画面>プラグイン>新規追加をクリックします。

すると、プラグインの検索画面に遷移しますので、検索窓に「Autoptimize」と入力しましょう。

こちらのプラグインですね!

インストールが完了したら、忘れずに有効化まで行ってください。

Autoptimizeの設定

管理画面>設定>Autoptimize、もしくはプラグイン名下の設定から調整を行います。

こちらの画面になったら、まずは右上の「高度な設定の表示」をクリックします。

JavaScript オプション

JavaScript コードの最適化にチェックを入れることで、それ以下の設定を有効にすることができます。

JavaScript(JS)ファイルは特に、圧縮するために改行などが削除されるとエラーが出て動作しなくなることがあるので、僕はチェックを入れていません。そこは人それぞれかと思いますが!

僕はチェックを入れていませんが、1つずつ説明していきますね。

※JSはファイルに不備があると動作しなくなることもあるので、以下の項目に関しては1つずつチェックをしながら動作の確認をしていった方がいいです。

Aggregate JS-files?

こちらについてはデフォルトでチェックが入っているかと思うのでそのままチェックを入れておきます。

インラインの JS を連結

HTML内に記載してあるJavaScriptも最適化の対象にするかどうかの設定です。

ちょっと意味が不明な方はチェックを外しておいた方が無難かと思います。

<head>内へ JavaScript を強制

こちらは基本的にチェックを入れなくてもいいです。

Autoptimize からスクリプトを除外:

こちらは基本的にチェックを入れなくてもいいです。

try-catch の折り返しを追加

こちらは基本的にチェックを入れなくてもいいです。

CSSオプション

CSS コードを最適化にチェックを入れることで以下の項目にチェックを入れることができるようになります。

ある程度知識がある方なら個別に設定をしてもいいのですが、基本はデフォルトのままで構いません!

HTMLオプション

HTMLオプションにチェックを入れることで以下の項目にチェックを入れることができるようになります。

HTML コメントを残す

こちらは基本的にチェック不要なので、チェックの必要はありません。

CDN オプション、キャッシュ情報、その他オプション

これらの項目は、知識がある方なら個別に設定をしても構いませんが、そうでない方はデフォルトのままで構いません。

以上で設定は完了です!

ここまでの設定が完了したら忘れずに「変更を保存してキャッシュを削除」ボタンをクリックしましょう!

Autoptimize運用上の注意点

Autoptimizeの運用にあたって数点注意してほしい点があります

動作確認をする

ファイルを圧縮してくれる便利なAutoptimizeですが、圧縮することにより表示崩れや動作に不具合が無いかということの確認は行ってください。

もし表示崩れなどが起きた際は、1つずつチェックを外していきながら、何が原因か探ってみてください。また、それでも該当の箇所が分からない場合はAutoptimizeのプラグインを停止すれば元に戻りますのでご安心ください。

ファイルを編集した場合はキャッシュの削除をする

Autoptimizeは元のファイルから別ファイルを作成しているため、元ファイル(HTML、CSS、JavaScript)を修正した際は先ほどの設定画面から「変更を保存してキャッシュを削除」ボタンをクリックする必要があります。

けっこうこの作業を忘れがちなのでご注意を!

まとめ:Autoptimizeを活用して閲覧者、サイト運営者両方にとってより良いサイトづくりをしよう

サイトの閲覧者にとってページの表示速度が遅いというのは離脱する原因にもなるので少しでも早いほうがいいですよね。

また、運営者にとってももちろん閲覧者の離脱防止であったり、SEO対策的にもページの表示速度は早いほうがいいので、今回紹介したAutoptimizeを活用することによってお互いのメリットになるかと思います。

特にプログラミングの知識が少ない方にとっては必須のプラグインでは無いでしょうか!

まだ導入していない方はぜひ1度お試しください。