WEXALでサイトをさらに速くするための６つのチューニング

本稿はWEXAL導入編のラスト、チューニングです。
と言っても、サイト高速化施策そのものはWEXALが全てやってくれますので必要ありません。

WEXALのチューニング方法は、読み込むソースそのものを減らすことに尽きます。

つまり、

不要なプラグインを削除する

まずは基本的なところから。
高速化の観点からもセキュリティの観点からもプラグインは少なければ少ないほどいいです。
そのため見直しを図ります。

私の使っているプラグインはこちら。

Classic Editorはコードでも実装できますが、保守性を考えてプラグインにしています。
SlimStat AnalyticsはGA4だけだと不便なので使っています。
この2つ以外はほぼ必須と思っています。

プラグインじゃなくてもできることについては以下の記事を参考にしてください。

jQuery migrateを停止する

jQuery migrateはjQuery旧版との互換性を保つためのプラグイン。
迂闊に外すとトラブルの元となります。
WordPress5.6で同梱jQueryが3.0系にアップデートされたときは、あちこちで阿鼻叫喚となりました。

しかし、

というわけで停止します。
子テーマのfunctions.phpに次の記述をします。

基本

function jq_register_scripts(){
if ( ! is_admin() ) {
wp_deregister_script('jquery-migrate');
}
}
add_action( 'wp_enqueue_scripts', 'jq_register_scripts' );

Cocoon

こちらをお読みください。

Luxeritas

管理画面「Luxeritas」→「JavaScript」のタブを開き、jQueryの読み込み方を選択します。
3.0系以上単独の読み込みも設定されています。

モバイルで不要なウィジェットの読み込みを制御する

こちらをお読みください。

不要なcssを見直す【注意】

前項と同じく、

場合によっては親テーマをカスタマイズするからです。
その上で以下をお読みください。

かつてWEXALの旧バージョンではuncssというPSTコマンドがありました。
不要なセレクタを取り除いてくれる強力な最適化コマンドです。
ただサイトの表示に不具合を生じる可能性もあるためか、現バージョンではなくなりました。
（コマンドがなくなっただけで安全な範囲でやっているのかもですが）

まず基本として、子テーマのstyle.cssを見直します。
初心者にありがちですが、面白そうで試してみたけど使わなかったり。
使うの止めたプラグインやウィジェットのカスタマイズ用のCSSが残っていたり。
そういった残骸が残っているかもしれません。

ここからは人次第。
とことんやりたければという話です。
私も過去はやりましたが、現在はメンテナンス性を重視してやってません。
方法だけ紹介しておきます。

下記ツールを使って使われていないセレクタを調べます。

子テーマのCSSの整理が終わっているならほとんどは親テーマのものでしょう。
一旦ローカルに親テーマをフォルダごとダウンロード。
各種CSSファイルから該当の記述を削除します。
編集済のCSSファイルを「親テーマ」にアップします。
別途style.bkなどで保存し、テーマがアップデートされるたびに元の名前にリネームしてアップします。

この方法には欠点が３つあります。

• めんどくさい。
• テーマの自動更新ができなくなります。
  （自動更新をオンにすると、自分の気づかないうちにCSSを元に書き換えられてしまう）
• テーマのアップデートで新しいCSSが加わった場合、作業をやり直す羽目になります。
  少しくらいの変更なら無視したり、追加部分を修正作業後のファイルにペーストするだけでいいですが。CSSファイルの構成そのものが変わったりする大型アップデートだと目も当てられません。

ツールに自動でやってもらう方法も勧めません。
どんな不具合が生じるか予測できませんので。

テーマの設定が本当に必要か見直す

Cocoonですと、例えばアピールエリアがあります。
背景に使う画像が巨大だとPageSpeed InsightsでLCP（Largest Contentful Paint）が悪化します。
小さな画像にする、画質を落とす、そもそも使わないなどの工夫が必要です。

AIの判断を誤らせるスクリプトなどを排除する

一例についてはこちらの記事をお読みください。

まとめ