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

by
KUSANAGI・WEXAL
（更新: 2024年9月17日）

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

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

つまり、

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

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

天満川鈴 WRITTEN BY 天満川鈴

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

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

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

WordPressプラグインを減らしたい人へ：KUSANAGI環境の実運用例【GeneratePress使用】 | きもおた・わーどぷれす。
本記事ではKUSANAGI（Nginx、PHP7）＆テーマLuxeritasで私の使っているWordPressプラグインを紹介します。両方のユーザーはもちろん、高速化施策やNginx用のプラグインを探すのにも役立つと思います。参考になれば幸いです。
http://kimoota.net

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

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

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

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

プラグインのjs・cssレンダリングブロックを排除する　～PageSpeed InsightsとGTmetrixのスコアを改善してみる（第２回）　 | きもおた・わーどぷれす。
本記事は、KUSANAGI for ConoHa（1Gプラン）でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。 PageSpeed Insightsは旧版ですが、やることは同じです。 アイキャッチの画像…
http://kimoota.net

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デフォルトだとPageSpeed Insightsから「レンダリングを妨げるリソースの除外」を指摘されます。 具体的には「jQuery」と「jQuery migrate」。 本稿では２つの方法にて、この問題への対処をします。 j…
http://wordpress.kimoota.net

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が残っていたり。
そういった残骸が残っているかもしれません。

ざっと見直して消してしまいましょう

ここまでは基本なので、絶対にやった方がいいよ

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

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

Unused CSS finder
This tool recursively crawls your website and finds unused CSS selectors
http://www.jitbit.com

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

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

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

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

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

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

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

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

WEXAL環境でGoogle MapからYahoo!地図に埋め込みを変えたらPageSpeed Insightsスコアが20以上アップ！【サイト高速化】 | きもおた・わーどぷれす。
本稿の内容はタイトル通り。 WEXAL環境において埋め込み地図をGoogle MapからYahoo!地図に変えたところ、スコアが20以上上がったというものです。 もちろん、各種数字も上昇しています。 た・だ・し あくまでもWEXALを導入し…
http://kimoota.net

まとめ

PageSpeed Insightsで100点出た！

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

それが一番しんどいんだけど！

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる