本稿はWEXAL導入編のラスト、チューニングです。
と言っても、サイト高速化施策そのものはWEXALが全てやってくれますので必要ありません。
WEXALのチューニング方法は、読み込むソースそのものを減らすことに尽きます。
つまり、
どれだけ無駄を削りシンプルにできるか、です
ここまでやればきっとPageSpeed Insightsも満点でるよね！
不要なプラグインを削除する
まずは基本的なところから。
高速化の観点からもセキュリティの観点からもプラグインは少なければ少ないほどいいです。
そのため見直しを図ります。
私の使っているプラグインはこちら。
この中で必須と言いうるのは、
- BBQ Firewall
- Contact Form 7
- WebSub/PubSubHubbub
- Wordfence Security
- WP Multibyte Patch
- XML Sitemap & Google News feeds
くらいでしょう。
（お問い合わせとXMLサイトマップ作成プラグインは何かしら入れるはずなので）
あとは各人の好みによります。
プラグインじゃなくてもできることについては以下の記事を参考にしてください。
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系以上単独の読み込みも設定されています。
モバイルで不要なウィジェットの読み込みを制御する【注意】
以下に記す方法は、サイトレイアウトが完成していることを前提とします。
と言いますのも、
ウィジェットの内容を編集する際、WordPressの画面上からではなくファイルを直接編集することになります。
WinSCPなどのFTPソフトの扱いに慣れている方ならいいですが、そうでないなら勧めません。
その上で以下をお読みください。
ウィジェットを非表示にする場合、真っ先に思いつくコードはこれでしょう。
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" 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を見直す【注意】
前項と同じく、
場合によっては親テーマをカスタマイズするからです。
その上で以下をお読みください。
かつてWEXALの旧バージョンではuncssというPSTコマンドがありました。
不要なセレクタを取り除いてくれる強力な最適化コマンドです。
ただサイトの表示に不具合を生じる可能性もあるためか、現バージョンではなくなりました。
（コマンドがなくなっただけで安全な範囲でやっているのかもですが）
この作業を手動でやるのが本項です
まず基本として、子テーマのstyle.cssを見直します。
初心者にありがちですが、面白そうで試してみたけど使わなかったり。
使うの止めたプラグインやウィジェットのカスタマイズ用のCSSが残っていたり。
そういった残骸が残っているかもしれません。
ざっと見直して消してしまいましょう
ここまでは基本なので、絶対にやった方がいいよ
ここからは人次第。
とことんやりたければという話です。
私も過去はやりましたが、現在はメンテナンス性を重視してやってません。
方法だけ紹介しておきます。
下記ツールを使って使われていないセレクタを調べます。
子テーマのCSSの整理が終わっているならほとんどは親テーマのものでしょう。
一旦ローカルに親テーマをフォルダごとダウンロード。
各種CSSファイルから該当の記述を削除します。
編集済のCSSファイルを「親テーマ」にアップします。
別途style.bkなどで保存し、テーマがアップデートされるたびに元の名前にリネームしてアップします。
この方法には欠点が３つあります。
- めんどくさい。
- テーマの自動更新ができなくなります。
（自動更新をオンにすると、自分の気づかないうちにCSSを元に書き換えられてしまう） - テーマのアップデートで新しいCSSが加わった場合、作業をやり直す羽目になります。
少しくらいの変更なら無視したり、追加部分を修正作業後のファイルにペーストするだけでいいですが。CSSファイルの構成そのものが変わったりする大型アップデートだと目も当てられません。
ツールに自動でやってもらう方法も勧めません。
どんな不具合が生じるか予測できませんので。
テーマの設定が本当に必要か見直す
Cocoonですと、例えばアピールエリアがあります。
背景に使う画像が巨大だとPageSpeed InsightsでLCP（Largest Contentful Paint）が悪化します。
小さな画像にする、画質を落とす、そもそも使わないなどの工夫が必要です。
AIの判断を誤らせるスクリプトなどを排除する
一例についてはこちらの記事をお読みください。
まとめ
PageSpeed Insightsで100点出た！
おめでとう！
残すは「良質なコンテンツ」作り、頑張ってね！
それが一番しんどいんだけど！
