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

contents

Amazon>>お得な最新のタイムセール情報はここ

7500万点の素材が無料

Wi-Fi6対応　最新5Gドコモホームルーター！

SWELLの高速化の敵なのか reCAPTCHAは重い。

PageSpeed Insights で計測していると

大体くっそ重たい原因が reCAPTCHA。

reCAPTCHAを取り去るだけでスコアが２０−３０あがるもんね。

しかも Invisible reCaptcha のプラグイン使っていても

結局全てのページにreCAPTCHAの

スクリプトは読み込まれてるのでダメなことが判明。

正直問い合わせのページ以外はいらないんだよね

このスクリプト。

でも外しちゃうとすぐにスパム飛んできてうざい。

Invisible reCaptchaはPHPのver8使うと

エラーでてとんでもないことになるらしいし

どうも開発元も２年以上放置しているらしい。

僕のサーバーではいまんとこ普通に動いていたので

使えないことはないが

やはり不安要素は取り除くべきか。

ならば問い合わせのページ以外スクリプト削ればいいんじゃね？

Invisible reCaptcha は削除することにして

reCAPTCHAのKEYとシークレットキーを控えておいてContact Form 7に再登録する。

reCAPTCHAのKEYとかは contactフォーム７の

インテグレーションのメニューから普通に登録しておく。

この状態では全ページに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できたり利用者を限定したり安全に便利なので

直接スクリプト書くよりこのプラグインで実装する方が安全かなー？

functions.phpを編集しない安全な方法とBLOG高速化のTIP

高速化の最終型

SWELLの機能だけで全て完結。

大好きなEWWWも画像処理だけで遅延読み込みの担当は外してSWELLにやらせる。

javascriptの遅延もSWELLで。

高速化のプラグインは全部外した。

スクリプトの遅延について

スクリプトの遅延設定で

Googleアナリクスなどのスクリプトを遅延させないと

これもスコアダウンの元凶になるので

PageSpeed Insightsで表示されたURL部分を

別ウインドウで開いてブラウザのURL欄から

しっかりとスクリプト部分を抜き出す。

僕の例だと念の為ここまでしつこく抽出してあるｗ

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のスクリプト

フォントの読み込み時のテキスト表示。

これらは高速化プラグインだけ突っ込んでも

根本的な解決にならん。

上記の対策を行うと比較的安定に

モバイルもデスクトップも９０以上を出すことが多い。

SWELL本体のキャッシュしか使わないし余分なプラグインも無い。

これが最終形態だなｗあー楽しかったｗ

ちなみにお問い合わせのページを速度計測すると

reCAPTCHAの邪悪さがよくわかるぜｗｗ

ちなみにですが

reCAPTCHAのページごとのスクリプトを制限しちゃうと

reCAPTCHAのアルゴリズム上正確にBOTを排除できない可能性もあるって話もあります。

自分のサイト内のページの徘徊具合とかそのあたりがBOT判別のキーになってるとかなってないとか。

実際にお問い合わせだけ単体にスクリプトが発動している状態でどれだけスパムくるか

しばらく検証してみたいと思います。

↓検証結果はこの記事にあります！↓

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