swellでreCAPTCHAを必要なページだけ稼働させたい。(Blog高速化 最終章)

SWELLの高速化の敵なのか reCAPTCHAは重い。
PageSpeed Insights で計測していると
大体 くっそ重たい原因が reCAPTCHA。
reCAPTCHAを取り去るだけでスコアが20−30あがるもんね。
しかも Invisible reCaptcha のプラグイン使っていても
結局全てのページにreCAPTCHAの
スクリプトは読み込まれてるのでダメなことが判明。
正直 問い合わせのページ以外はいらないんだよね
このスクリプト。
でも外しちゃうとすぐにスパム飛んできてうざい。
Invisible reCaptchaはPHPのver8使うと
エラーでてとんでもないことになるらしいし
どうも開発元も2年以上放置しているらしい。
僕のサーバーではいまんとこ普通に動いていたので
使えないことはないが
やはり不安要素は取り除くべきか。
ならば 問い合わせのページ以外スクリプト削ればいいんじゃね?
Invisible reCaptcha は削除 することにして
reCAPTCHAのKEYとシークレットキーを控えておいてContact Form 7に再登録する。
reCAPTCHAのKEYとかは contactフォーム7の
インテグレーションのメニューから普通に登録しておく。
この状態では全ページにreCAPTCHAスクリプトが
ガッツリ読み込まれて重くなる。
functions.phpに次の関数を追加すると
お問い合わせのページ以外スクリプトを
読み込まないようになるので
関係ないページが軽くなる。
以下はお問い合わせのページURLが
https://mlabo.org/contact/
の形の場合なので contact 以外のスラッグなら
それに合わせて変更してください。
function loadRCPv3(){ if (!is_page('contact')){ wp_deregister_script('google-recaptcha'); } } add_action('wp_enqueue_scripts','loadRCPv3',50);
上記をON/OFFできたり利用者を限定したり安全に便利なので
直接スクリプト書くよりこのプラグインで実装する方が安全かなー?
高速化の最終型
SWELLの機能だけで全て完結。
大好きなEWWWも画像処理だけで遅延読み込みの担当は外してSWELLにやらせる。
javascriptの遅延もSWELLで。
高速化のプラグインは全部外した。
スクリプトの遅延について
スクリプトの遅延設定で
Googleアナリクスなどのスクリプトを遅延させないと
これもスコアダウンの元凶になるので
PageSpeed Insightsで表示されたURL部分を
別ウインドウで開いてブラウザのURL欄から
しっかりとスクリプト部分を抜き出す。
僕の例だと念の為ここまでしつこく抽出してあるw
pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3217770281096014,
pagead2.googlesyndication.com/pagead/managed/js/adsense/m202203070101/show_ads_impl_with_ama_fy2019.js?client=ca-pub-3217770281096014,
これで確実に遅延処理できたようだ。
テストのリザルトに出現しなくなった。
ウェブフォントの読み込み中のテキスト表示について
これも減点対象になっているのか?
とりあえず自分で突っ込んだFONT類は全て
SWAPを宣言したので減点対象からは外れた。
対策したものを カスタマイズの追加CSSに記載した
@font-face { font-family:Quicksand; font-display: swap; src:url('/fa/Quicksand/Quicksand-Regular.ttf') format("truetype"); }
しかしまだなんか残っているな・・・・
調べてみるとSWELLが内部で使用可能にしているアイコンぽい。
icomoon.ttf め なんとかしてやらねば。
これもカスタマイズの追加CSSに追加記載
@font-face { font-family: 'icomoon'; src:url('/wp-content/themes/swell/assets/fonts/icomoon.ttf?7ojy2d') format('embedded-truetype'), url('/wp-content/themes/swell/assets/fonts/icomoon.ttf') format('truetype'), url('/wp-content/themes/swell/assets/fonts/icomoon.woff') format('woff'), url('/wp-content/themes/swell/assets/fonts/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; font-display: swap; }
これでフォントの減点は無しになった。
これだけやった状態で計測すると。ロリポップのキャッシュはOFFで計測。
モバイル

デスクトップ

結論
以前のキャッシュやら遅延やらのプラグインたちも決して悪くない。
悪いのはアナリクスやAdSenseなんかのスクリプト
reCAPTCHAのスクリプト
フォントの読み込み時のテキスト表示。
これらは高速化プラグインだけ突っ込んでも
根本的な解決にならん。
上記の対策を行うと比較的安定に
モバイルもデスクトップも90以上を出すことが多い。
SWELL本体のキャッシュしか使わないし余分なプラグインも無い。
これが最終形態だなw あー楽しかったw
ちなみにお問い合わせのページを速度計測すると
reCAPTCHAの邪悪さがよくわかるぜww
ちなみにですが
reCAPTCHAのページごとのスクリプトを制限しちゃうと
reCAPTCHAのアルゴリズム上正確にBOTを排除できない可能性もあるって話もあります。
自分のサイト内のページの徘徊具合とかそのあたりがBOT判別のキーになってるとかなってないとか。
実際に お問い合わせだけ単体にスクリプトが発動している状態でどれだけスパムくるか
しばらく検証してみたいと思います。
↓検証結果はこの記事にあります!↓
