プログラミング勉強

cocoonでPageSpeed Insightsのスコアを向上させる方法

プログラミング
スポンサーリンク

reCAPTCHAを必要なページ以外で読み込ませないのが効いた。

 なぜ試したかは忘れたがPagespeed Insightsでこのサイトの評価を確認した。速度以外は問題なかったが、モバイルでの表示速度は良くなく、スコアは40前後だった。せっかくなのでそこそこ攻めれそうなところは攻める方向で速度を改善することにした。

画像が重い。

 サイズが適切でなかったり、次世代のフォーマットでないという話で削減可能余地があるとの事。とりあえずプロフ背景が1MBあり、圧倒的な重さだった。3000×3000ピクセルとかだったので、そこは必要最小限度のサイズ(240×240)にし、軽量化を図った。

次世代の画像フォーマットってなんや

 webPてのがあるらしく、それにすると軽量化できるらしい。もちろん表示できない環境もあるらしく、そこは選択的に古くからよくあるjpgとかpngを代替で表示させるようにするのがいいらしい。ただ、2024年ともなると一般的な環境ではほぼ対応されている模様。とりあえずEWWW Image Optimizerというのを導入するとお手軽にwebP化できるということで導入した。一気にスコアが50まで上がった。

使われていないjacascript reCAPTURE

 トップページ等コンタクトフォームがなければ使い道がないreCAPTURE。速度はトップページのスコアを測ったためもちろんそこにコメント欄もコンタクトフォームもない。これが前述の画像要素を除けば圧倒的に重い。コメント欄にスパムが来そうな気もするが、別の方法で対応し、とにかく一度速度を詰めてみたいと思った。単純には無効化すればいいわけだが、さすがにコンタクトフォームにスパムが来るのはだるい。(今、冷静に思えば来ていない。日本語でお問い合わせと表示、リンクとも書いているからだろう)そこ以外に表示されないようにしたいと思ったところ、同様のことを考える人は多かった。

なぜかうまくいかない

 参考サイトを利用して、無効化を試みるも消えない。(cocoonは外観→テーマファイルエディタ→右側のfanction.php選ぶだけで子テーマのfunction.phpがいじれるため、修正自体はとてもお手軽。)どうもCAPTCHA 4WPプラグインから設定していると参考サイトとは話が違うらしい。というわけでCAPTCHA 4WPは無効化し、Contact Form 7側でreCAPTUREの設定を行った。そして参考サイトの無効化を試したところ、お問い合わせ以外のページで無効化できた。これでスコアは60代になった。

さらなる改善

Polylangなるプラグインを利用して、多言語化を試みていたが、ネタが日本向けで、かつ多言語化する気力もないので放置していたが、英語側がトップページがメイン扱いになっているようで、日本語側サイトはリダイレクト扱いになっており、1秒ロスしていた。使っていないため無効化した。(そのうち見れないページがあるぞオラってG様から怒られそう)スコアは改善しなかったが、投稿者側の動作は圧倒的に早くなった。

結論

 画像を最適化し、reCAPTUREを必要なページのみ動作させることで、モバイルのスコアを42→69と大幅に改善することができた。デスクトップは80後半→95になった。管理者ページについても体感で相当高速化したため、ブログを書くモチベーションが向上した。

改善前
改善後

当然に沸くスパム。その対策

 reCAPTUREが通常コメント欄からなくなったため、当然のようにスパムコメントが大量に沸いた。これについては国外IPコメント制限を適用して様子を見てみようと思う。なぜOFFになっているかというとあの頃はpolylangで多言語化して国外からのアクセスを増やそうと考えていたからだ。今の今まで、スパム以外の他言語コメントが付いたことがないのは言うまでもないだろう。
 国外IPコメント制限で全くスパムが来なくなった。今までの苦労は何だったんだろうか。

コメント

タイトルとURLをコピーしました