本稿は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系以上単独の読み込みも設定されています。
モバイルで不要なウィジェットの読み込みを制御する
ウィジェットを非表示にする場合、真っ先に思いつくコードはこれでしょう。
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に変更が施される場合もあります。
どんなアップデートなのかは常に見た方がいいです。
テーマの設定が本当に必要か見直す
Cocoonですと、例えばアピールエリアがあります。
背景に使う画像が巨大だとPageSpeed InsightsでLCP(Largest Contentful Paint)が悪化します。
小さな画像にする、画質を落とす、そもそも使わないなどの工夫が必要です。
AIの判断を誤らせるスクリプトなどを排除する
一例についてはこちらの記事をお読みください。

まとめ

PageSpeed Insightsで100点出た!

おめでとう!
残すは「良質なコンテンツ」作り、頑張ってね!

それが一番しんどいんだけど!
コメント