この記事は約 4 分で読めます。
ユウキです。
今回は、Autoptimize を使ってコードの最適化を行い、Web サイトの表示速度を高速化していきます。
設定項目については他のサイトでも詳細に解説された記事がありますので、ここでは必要な部分だけに絞って解説します。
- JavaScript や CSS コードを最適化してサイト表示速度を改善したい方
- ワードプレステーマ「Be」（TCD076）を利用されている方
- ワードプレステーマ「MAG」（TCD036）を利用されている方
- Ensure text remains visible during webfont load の解決法を探している方
目次
プラグインのインストール
はじめに WordPress のプラグインから新規追加で Autoptimize を検索してインストール、有効化します。
Autoptimize の設定
有効化したら設定を進めますが、プラグインで必要な設定項目は3つのチェックだけ。
- CSS コードを最適化：チェックする
- インラインの CSS を連結：チェックを外す
- Also optimize for logged in editors/ administrators?：チェックを外す
画像を参考に該当箇所にチェック、もしくはチェックを外して変更を保存しましょう。
これで設定完了です。
設定後は自動で必要な CSS をまとめて専用ファイルをつくり、サーバー内に保管されて、必要に応じて出力してくれます。
CSS 以外の最適化について
Autoptimize の設定には、JavaScript や HTML や画像の最適化などがあります。
当サイトの環境はエックスサーバーと TCD「MAG」で、他のプラグインと比較しながら確認しましたが、不具合を起こしたり改悪される結果となったため、上記設定のみとなります。
JavaScript の最適化と head 内のコードを整理する
デフォルトの head 内には不要なコードがいくつかあるので、こちらの記事を参考に整理してみてください。
画像を最適化する
画像を最適化してサイト表示速度を改善したい場合は、Autoptimize よりも EWWW Image Optimizer が適しているので、こちらの記事を参考に設定してみてください。
ウェブフォントの表示を最適化する
Lighthouse の項目で表示されるこちら。
Ensure text remains visible during webfont load
（ウェブフォントの読み込み中にテキストが表示されたままになるようにします）
以下のコードを functions.php に追加することで、Autoptimize で出力する CSS の font-face に、font-display:swap; を追加して解決してくれます。
add_filter('autoptimize_css_after_minify', 'optm_css');
function optm_css($code){
return $code = str_replace('@font-face{','@font-face{font-display:swap;', $code);
}
キャッシュ系プラグインの注意点
Autoptimize は必要なコードだけをまとめた専用ファイルをサーバーに保存しておく役割ですが、まとめることやサーバー内の書き換えが影響して不具合を起こす場合があります。
キャッシュ系のプラグインに限りませんが、同じような動作をするプラグインなどは問題の原因だったりするので、
変更を加える際は必ずバックアップを取ったうえで、変数はひとつずつ確認しながら進めていきましょう。
TCD「MAG」での不具合
ちなみに TCD「MAG」で Autoptimize を使うと、管理画面の方で不具合がありました。
AddQuicktag で追加したビジュアルエディタのクイックタグが時々、非表示される現象です。
ブラウザのキャッシュを削除してから投稿編集画面を更新すると表示がもとに戻るのですが、具体的な原因はよく分かっていません。
まぁ、対処法は分かるし、とくに不便さは感じないのでそのまま使っていますが、同様の現象で悩んだら試してみてください。
まとめ
Autoptimize は簡単に設定できて、大きな不具合を出さずにサイト表示速度の改善に貢献してくれるプラグインです。
ウェブフォントの最適化も、このプラグインのおかげで簡単な修正をして解決できました。
WordPress テーマによっては必要ないプラグインだったりしますので、Web サイトの環境を考慮しながら必要に応じて取り入れてみてください。
WordPress のデザイン面をカスタマイズしたい方は、こちらの記事も参考にしてみてください。
見出しデザインのサンプルはこちら。
囲み枠デザインのサンプルはこちら。
では今回はこの辺で。
ありがとうございました！
