Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
オススメ記事

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

contents

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できたり利用者を限定したり安全に便利なので

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

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

高速化の最終型

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判別のキーになってるとかなってないとか。

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

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

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents