サイト高速化エンジンWEXALを、さらに速く動かすためのチューニングをする

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

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

どれだけ無駄を削りシンプルにできるか、です

ここまでやればきっとPageSpeed Insightsも満点でるよね！

不要なプラグインを削除する
jQuery migrateを停止する
モバイルで不要なウィジェットの読み込みを制御する
不要なcssを見直す
テーマの設定が本当に必要か見直す
AIの判断を誤らせるスクリプトなどを排除する
まとめ

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

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

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

私の使っているプラグイン　～KUSANAGI（WEXAL）環境＆テーマCocoon（2021年５月７日時点）

本記事ではKUSANAGI（Nginx、PHP7）＆テーマLuxeritasで私の使っているWordPressプラグインを紹介します。両方のユーザーはもちろん、高速化施策やNginx用のプラグインを探すのにも役立つと思います。参考になれば幸いです。

この中で必須と言いうるのは、

BBQ Firewall
Contact Form 7
WebSub/PubSubHubbub
Wordfence Security
WP Multibyte Patch
XML Sitemap & Google News feeds

くらいでしょう。
（お問い合わせとXMLサイトマップ作成プラグインは何かしら入れるはずなので）

あとは各人の好みによります。
プラグインじゃなくてもできることについては以下の記事を参考にしてください。

js・cssのレンダリングブロックを排除する　～PageSpeed InsightsとGTmetrixのスコアを改善してみる（第２回）　

本記事は、KUSANAGIforConoHa（1Gプラン）でPageSpeedInsightsとGTmetrixのスコア改善を図った過程です。PageSpeed...

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

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

CocoonでjQuery migrateをフッターで読み込む、さらに解除した上で3.0系のエラーを修正して高速化を図る

CocoonデフォルトだとPageSpeedInsightsから「レンダリングを妨げるリソースの除外」を指摘されます。具体的には「jQuery」と「jQuery...

Luxeritas

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

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

ウィジェットを非表示にする場合、真っ先に思いつくコードはこれでしょう。

display:none:

しかしこれは「非表示にする」だけであって、読み込みを停止するわけじゃありません。
そのため、

PHPの段階で消してしまいます

例えばこのパーツ。

当サイトのサイドバーに設置しているConoHa勧誘用のウィジェットです。

本来であればカスタムHTMLウィジェットかテキストウィジェットに以下のHTMLを記述すれば足ります。

<div align="center">下の画像経由で入会すると<br> 1000円分のConoHaクーポンもらえます</div><div align="center"><a href="conohaのURL" target="blank" rel="nofollow"><img src="画像URL" width="300" height="533" loading="lazy" alt="美雲このは"></a>

しかしサーバー契約してくれる人は基本PCからのアクセスなはず。
スペースも大きいのでモバイルでは読み込ませないことにします。

まずウィジェットをPHPインクルードします。
以下のコードを子テーマのfunctions.phpに記述してください。

function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(STYLESHEETPATH . "/myphpfiles/$file.php"); 
return ob_get_clean();
} 
add_shortcode('myphp', 'Include_my_php');

conoha.phpという名前でファイルを作成し、次の記述をします。

<?php if (! wp_is_mobile() ) : ?>
<div align="center">下の画像経由で入会すると<br> 1000円分のConoHaクーポンもらえます</div><div align="center"><a href="conohaのURL" target="blank" rel="nofollow"><img src="画像URL" width="300" height="533" loading="lazy" alt="美雲このは"></a>
<?php endif; ?>

先程のHTMLをモバイル条件分岐で挟んだわけです。

管理画面の「外観」→「ウィジェット」を開きます。
カスタムHTMLウィジェットを設置し、次の記述をします。

［myphp file='conoha'］

※［］は半角にしてください。

これでまるっと読み込まれなくなります。

しかしタイトルは残ってしまうので、この箇所はCSSで消します。

ChromeでF12を押してウィジェットIDを調べます。
「mobile-none.css」というファイルを作って、次の記述をします。

/*スマホとタブレットでサイドバーウィジェットの一部を消す*/
#custom_html-【F12で調べたウィジェットID番号】{
display:none;
}

mobile-none.cssを子テーマのcssフォルダにアップします。
子テーマのfunctions.phpに次の記述をします。

function cocoon_mcss_scripts() {
if (wp_is_mobile()){
wp_enqueue_style( 'mobile-none-css', get_stylesheet_directory_uri() . '/css/mobile-none.css', "", '20210501' );
}
}
add_action( 'wp_enqueue_scripts', 'cocoon_mcss_scripts' );

これで全て消えます。

不要なcssを見直す

この項目はメンテナンス性も絡んできますので任意です

例えばCocoonの親テーマstyle.cssを眺めると、カエレバのコードがあります。
しかしCocoonの対応ASPは少ないので、オリジナルのcssを組んでる方が多いのではないでしょうか？
その場合記述が明らかに重複するので、テーマ搭載のコードは削除できます。
ざっくり見ていくだけでもかなりのcssコードが減らせます。

削除し終えた後は保存。
別途「cocoon-style.bk」としてローカルか子テーマに編集済cssをバックアップします。
テーマをアップデートしたら「style.css」にリネームして親テーマにアップし直します。

ただしアップデートでcssに変更が施される場合もあります。
どんなアップデートなのかは常に見た方がいいです。