今回は、WordPress の表示速度を改善させるプラグイン【Autoptimize】の紹介をしたいと思います。
サイト表示速度が遅いとユーザーの直帰率が上がるだけでなく、サイトの評価にも影響がでます。
そこで、WordPress で作成したサイトの表示速度を向上させるには、Autoptimize というプラグインの導入がおススメです。
ただ、設定をおこなうことで不具合を起こしやすい点があるため注意が必要です。
なので、導入済みのプラグインなど再度確認してからAutoptimize を導入することをおススメします。
では、実際に説明したいと思います。
目次
Autoptimize のインストール
まず、WordPress 管理画面からプラグインの「新規追加」を選択します。
次に、右の検索ボックスに「Autoptimize」と入力して対象のプラグインをインストールします。
インストール後は、必ず「有効化」をしてください。
WordPress 管理画面にある「設定」の中に、「Autoptimize」という項目が追加されるのでそこから設定をおこないます。
Autoptimize の設定をする
では今回は、表示速度について大きく関わる内容について順番に説明していきます。
まず始めに、「JS、CS & HTML」タブになります。
Autoptimize JS、CS & HTML
ここでは、表示速度について多くの設定箇所があります。
項目を変更したことで、サイトに影響がでた場合はすぐに設定を見直してください。
JavaScript オプション
では、最初に「JavaScript オプション」からになります。
必要項目はこちら
「JavaScriptコードの最適化」にチェックを入れると、「JS ファイルを連結する」か「連結しないで遅延」のどちらかにチェックを入れます。
「JS ファイルを連結する」について、レンタルサーバーの環境（HTTP/2通信対応のサーバー）を使用している場合、「連結しないで遅延」のほうが読み込みが速いそうです。必要に応じてチェックを入れてください。
CSSオプション
次に、CSSオプションです。
必要項目はこちら
以上となります。そのほかの設定に関しては、デフォルトのままでOKです。
HTMLオプション
そして、HTMLオプションでこのタブは最後です。
ここでの設定は、「HTML コードを最適化」のみとなります。また、必要に応じて「インラインのJS/CSSも最適化」にチェックを入れます。
これで、このタブに関しては完了です。「変更の保存とキャッシュの削除」を選択してください。
Autoptimize 画像の設定
では次に、「画像」タブの設定になります。
実際の設定は以下になります。
となっています。
まず「画像の最低化」ですがこれは、「影響を与えない程度に画質を落として、画像の読み込み速度を向上させる」という内容になります。
最適化した画像について、必要に応じて品質を選んでください。デフォルトは「Glossy」となっています。
そして、画像の遅延読み込みですがこれは以下の理由によりあまりおススメできません。
このタブは、以上になります。「変更を保存」を選択してください。
Autoptimize クリティカル CSS
クリティカルCSS は、サイトの表示速度を改善する有料サービスになります。
ここは、有料サービスのためクリティカル CSSに関しては、特に設定を変更する必要はありません。
レンダリングについて
ブラウザがCSS を読み込み表示する処理「レンダリング」の改善により、表示速度の遅延解消が可能です。
また、画面表示にかかわる処理速度が重いために表示速度が遅延することを「レンダリングブロック」といいます。
Autoptimize 追加の設定
ここでは、表示速度に関する細かな設定になります。
設定項目は以下になります。
WordPress では、Webフォントを使用していることがほとんどのため、きまってGoogleフォントを使用していなければ、選択してください。
絵文字の削除は、サイトに絵文字を表示させるか設定です。使う予定がなければチェックをいれも問題ありません。
あとは、基本的にデフォルト設定で問題ありません。このタブでは以上になります。「変更を保存」を選択します。
補足
設定は以上になりますが、そのほかのタブについて少し説明します。
さらに最適化タブとページキャッシュタブ
これらのタブでは、Autoptimize の関連サービスについてのタブになります。
例えば「さらに最適化」タブでは、シンプルな設定でとても使いやすいWordPress キャッシュプラグイン【Cache Enabler】の紹介をしています。
ページキャッシュタブでは、Autoptimize の有料サービスについて説明をしています。
先ほども少し触れましたが、有料サービスにするとCSS ルールの自動生成などが可能になります。
Autoptimize で困った時
では、最後にAutoptimize を設定して困った時の対処法について簡単に紹介します。
変更内容が反映されない
WordPress で変更内容が反映されない主な原因に、キャッシュがあげられます。
過去に閲覧したページのデータを保存し、次に表示する際の読み込みを速くする仕組みを「キャッシュ」といいますが、Autoptimize は、「JavaScript」や「CSS」のキャッシュも生成します。
結果、以下のような原因があげられます。
対策として、Autoptimize が生成しているキャッシュを削除することで解決することができます。
削除方法はとても簡単です。
WordPress 管理画面の上部にある「Autoptimize」から「キャッシュを削除」をクリックするだけ。
画像が表示・サイトの表示が崩れる
この現象では、主にJavaScriptやCSSに問題があると考えられます。Autoptimize の設定を次の順番で見直してみましょう。
まず、最初に「JavaScriptコードの最適化」を確認します。
この箇所の設定を一度全てチェックを外して、確認してください。もし、無事表示されたら設定を以下のように変更し直して、再度確認してみてください。
次に、「JavaScriptコードの最適化」の設定を見直しても解消されない場合、CSSコードの最適化のチェックを外します。
これで、無事表示されたらまずは、このまま運用することをおススメします。
最後に画像に関する設定ですが、これは他のプラグインやテーマなどで遅延機能を利用している場合などに見直しが必要です。
他の遅延機能と機能が重複するためチェックを外すか、他の遅延機能を解除してこちらをチェックを入れるかします。
まとめ
いかがだったでしょうか。
今回は、WordPress で作成したサイトの表示速度を向上させるプラグインについて紹介しました。
ユーザーの直帰率が上がるだけでなく、サイトの評価にもつながるので一度試してみてはいかがでしょうか。
ここまでお読みいただき、ありがとうございました。
コメント