小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

KUSANAGI for ConoHa
この記事は約9分で読めます。

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

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

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

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

スポンサーリンク
この記事を読む方へのオススメ

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

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

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

私の使っているプラグイン ~KUSANAGI(WEXAL)環境&テーマCocoon(2021年5月7日時点)
本記事では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のスコアを改善してみる(第2回) 
本記事は、KUSANAGI for ConoHa(1Gプラン)でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。 Page...
スポンサーリンク

不要なJS・CSSの読み込みを停止する

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」と「jQu...

Luxeritas

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

その他のJS・CSSを停止したり読み込みを制限する

例えば子テーマのJavaScript.jsの中身が空なら読み込まなくてもいいわけです。
私の環境ですと、こんな感じ。

/* 子テーマのjsロード停止・その他のスクリプトとCSS*/
function cocoon_scripts() {
wp_dequeue_script( 'cocoon-child-js' );
wp_dequeue_script( 'cocoon-skin-js' );
wp_dequeue_style( 'cocoon-keyframes' );
wp_dequeue_style( 'cocoon-child-keyframes' );
if (in_category(array(2,6,7,8,9,12,13,18))){
wp_dequeue_style( 'code-highlight-style' );
wp_dequeue_script( 'code-highlight-js' );
}
if (is_singular()){
wp_enqueue_style( 'cocoon-skin2-css', get_stylesheet_directory_uri() . '/css/cocoon-skin2.css', "", '20210501' );
}
}
add_action( 'wp_enqueue_scripts', 'cocoon_scripts' );

順に説明します。

wp_dequeue_script( 'cocoon-child-js' );
wp_dequeue_script( 'cocoon-skin-js' );
wp_dequeue_style( 'cocoon-keyframes' );
wp_dequeue_style( 'cocoon-child-keyframes' );

ここで読み込みを停止しているのは、

  • 子テーマのJavaScript.JS
  • スキンのJavaScript.js
  • 親テーマのkeyframes.css
  • 子テーマのkeyframes.css
if (in_category(array(2,6,7,8,9,12,13,18))){
wp_dequeue_style( 'code-highlight-style' );
wp_dequeue_script( 'code-highlight-js' );
}

ここで制御しているのは、

  • Highlight.js

WEB制作関係以外でのカテゴリーでコード強調はしないのでJS・CSSを停止させます。

if (is_singular()){
wp_enqueue_style( 'cocoon-skin2-css', get_stylesheet_directory_uri() . '/css/cocoon-skin2.css', "", '20210501' );
}

ここではスキンのCSSでトップページに不要なコードを分割。
投稿・固定ページで読み直しています。
ただしトップページへのアクセスは基本少ないですし、通常ここまでやる必要はないです。

スポンサーリンク

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

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

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の判断を誤らせるスクリプトなどを排除する

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

WEXAL環境でGoogle MapからYahoo!地図に埋め込みを変えたらPageSpeed Insightsスコアが20以上アップ!【サイト高速化】
本稿の内容はタイトル通り。 WEXAL環境において埋め込み地図をGoogle MapからYahoo!地図に変えたところ、スコアが20以上上がったというものです...
スポンサーリンク

まとめ

PageSpeed Insightsで100点出た!

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

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

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
KUSANAGI for ConoHa
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました