WordPress改善（パフォーマンス）

先日CLSの問題を対応した際、Pagespeedサイトでパフォーマンスがよろしくないということがわかったため、少しでも改善していきます。

※Pagespeed：https://pagespeed.web.dev/

パフォーマンスが悪いってことは、基本的には表示速度が遅いってことなので、WEBサイトとしてはよろしくない状態です。完璧にしないにせよ、少しずつ改善しておいたほうが良いでしょう。

使用していないJavaScriptの削減

たぶんほとんどの人が通る道かもしれません。
→ 私の場合は「使用していないJavaScriptの削減」が一番の問題でした。

解決手段の1つにプラグインを使った遅延読込というのがありますが、色々とトラブル発生したら面倒なので私は手段として使っていません。私の場合、一番効果が大きそうな「reCAPTCHA」をまずはなんとかしました。

reCAPTCHA

それなりの転送量となっているため、なんとかする必要があります。

reCAPTCHAは次の点で使われています。

• 記事毎のコメントフォーム
• お問い合わせフォーム

現状は全てのページで無条件に読み込まれているようです。

ささっとパフォーマンスを向上させるため、次の施策をうつことにします。

• お問い合わせフォームは「reCAPTCHA」を使う。
• 他のコメントフォームは「hCaptcha」を使う。
  → コメントなんて基本スパムばかりなので無くすことも考えましたが、一応残しておくことにしました。けど何のガードもないとスパムがもっと大変そうなので一定のガードを設けます。

最初に「Invisible reCaptcha」プラグインは無効化しちゃいます。

続いて「Contact Form 7」の「インテグレーション」で「reCAPTCHA」が連携出来ていることを確認します。

次に「hCaptcha」プラグインを導入し、セットアップします。

以下の公式サイトより「サービスにhCaptchaを追加する（無料）」をクリックして進みます。

hCaptcha - Signup Options

This page covers how to sign up for each type of hCaptcha user account, in order to make sure you get to the right place...

www.hcaptcha.com

Googleアカウントを持っていれば簡単に登録出来ます。登録すると「Site Key」と「Secret Key」が入手できるため設定します。

ここまでの設定で問題ないはずですが、何故かお問い合わせページ以外で相変わらず「reCAPTCHA」のjavaScriptがロードされていました。

→ ひとまず「reCAPTCHA」がお問い合わせページでしか読み込まれないように次のコードを「function.php」に入れます。

function load_recaptcha_js() {
 if ( !is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

設定は以上となります。

→ ここまでの施策によって「使用していないJavaScriptの削減」は「2.40s」→「0.75s」になりました（他にもちょこちょこっと実施したのでコレ以外の改善も含みます）。

その他：分析（UA）を解除

※書きながら思い出したので残しておきます。

実は「使用していないJavaScriptの削減」で他にもGoogle関係がありました。

参考になるかはわかりませんが、今後廃止予定のUAの接続を解除をして、「GA4」だけにしたところ、パフォーマンスが若干改善しました。

改善結果

現在のパフォーマンスです。

当初の「43」→「59」に改善しました。

同じような測定サイトに「GTmetrix」というサイトもありますが、こちらでも改善を確認出来ました。まずは様子を見ることにします。

ところで・・・

ここまで載せていたパフォーマンスは「モバイル向け」であって「パソコン向け」は何故か優等生です。

まとめ

• reCAPTCHAを一部「hCaptcha」に置き換えてパフォーマンスを改善しました。

※今後も何か改善ネタがあれば載せていきます。