【WordPress】ブログ(モバイル)のパフォーマンスが41点改善した方法

こんにちは、カメ助(@kamesuke_blog)です!

現在、ブログサイトの高速化を目指し、ページスピードインサイトで色々と試行錯誤しています。

今回は、モバイルサイトのパフォーマンスが劇的に改善する方法について見つけましたので、調べた内容を共有します。

カメ助

この記事はこんな人にオススメ
・ブログのパフォーマンスを改善したい
・モバイルのパフォーマンスが悪い

・パフォーマンスが悪い原因の調査方法が知りたい

サイトのパフォーマンス改善に取り組んでいる方への参考資料になればということで書いています。

目次

結論

reCAPTCHAの設定を解除すれば、モバイルサイトのパフォーマンスが劇的に改善しました。詳細については以降で説明していきます。

調査の背景

前回、ページスピードインサイトにて画像サイズ圧縮を行ってパフォーマンス改善を行いました。

ページスピードインサイトとは

Googleが提供しているツールで、現在のサイト表示速度に関する問題点や改善点のヒントを教えてくれます。

結果としては、パフォーマンスはあまり改善しませんでした。今回は、特に悪かったモバイルの点数についてパフォーマンスを悪化させている原因について改善を試みます。

ページスピードインサイトにてパフォーマンス確認

前回同様に、ページスピードインサイトにアクセスして現在のサイトのパフォーマンスを計測しました。

現在のサイトのパフォーマンス結果(左:モバイル、右:PC)

計測結果:モバイル32点、パソコン78点でした。

カメ助

相変わらずモバイル、めっちゃ遅っ!!

やはり、サイトのパフォーマンスが非常に悪い(表示が遅い)ですね。引き続き、モバイルのパフォーマンスが悪い原因について調査していきます。

モバイルのパフォーマンスが悪い原因を調査

診断内容の分析

モバイルのパフォーマンスが悪い原因を調べるために、診断内容について確認しました。

診断結果

各項目の内、特にパフォーマンスに関する影響が大きいもの()の内訳は以下の通りでした。

項目名(簡略名)内容修正内容
ウェブフォントWebフォントの読込中にユーザーがテキストを読めるようにするテーマファイルの編集等
第三者コード第三者コードによって、読込速度低下の可能性有プラグイン等の外部ファイルを修正
メインスレッドJavaScript の解析、コンパイル、実行時間を短縮するJavaScript のソースコードを修正
JavaScriptの実行JavaScript の解析、コンパイル、実行時間を短縮するJavaScript のソースコードを修正
診断結果の内パフォーマンスに関する影響が大きいもの

今回は、『第三者コードの影響について』の項目について原因を調査し、改善していきます。まずは、詳細について確認していきましょう。

『第三者コードの影響について』の詳細

詳細を確認すると『Google・・・』というGoogleに関するものがほとんどを占めていることが分かりますね。その中でも影響がとても大きい赤枠の部分について調査することにしました。URLより「reCAPTCHA」を導入していることが原因のようでした。

過去に、サイトに問い合わせフォームを追加するために、プラグインにContact Form 7(コンタクトフォーム)を追加しました。その際に、スパムメール対策として以下のサイトを参考に「reCAPTCHA」を追加していました。

https://webst8.com/blog/contact-form-recaptchav3/

【無料スパム対策】Contact Form 7でreCAPTCHAを設定する
reCAPTCHAとは

reCAPTCHAは、Webフォームなどに入力したデータを登録する際に、botやウイルスなどの悪質なアクセスからWebサイトを守るための機能です。

(例)「私はロボットではありません」というチェックボックスや、「○○の画像を選択してください」等

現時点でスパムメールなどが来ていないため、一旦「reCAPTCHA」の設定を解除してパフォーマンス計測してみます。

reCAPTCHAの設定を解除する

reCAPTCHAの設定を解除する方法は簡単です。

以下の画像の通り、「お問い合わせ」→「インテグレーション」→「reCAPTHAのインテグレーションのセットアップ」をクリックします。

WordPressの管理画面

その後、「キーを解除」をクリックします。

reCAPTCHAの設定解除

以上でreCAPTCHAの設定を解除が完了しました。

「reCAPTCHA」の設定解除後→パフォーマンスが41ポイント改善

「reCAPTCHA」の設定解除後に、再度ページスピードインサイトでパフォーマンス計測を行いました。

reCAPTCHA設定解除前

reCAPTCHA設定解除後

計測結果:モバイル74点、パソコン88点でした。

改善前と比べると

  • モバイル32点→74点(+41点)
  • パソコン78点→88点(+10点)

となっており、劇的に改善していることが分かりますね。

カメ助

メチャクチャ改善してるやん!!

セキュリティは大丈夫?→Akismetを設定

ただし、これは「reCAPTCHA」を無効にしたことによって得られた効果のため、別のセキュリティの対策が必要です。調べたところ「Contact Form 7」には、「reCAPTCHA」以外にプラグインの「Akismet」が設定できるそうです。以下のサイトを参考に設定を行いました。

https://contactform7.com/ja/spam-filtering-with-akismet/

Akismet によるスパムフィルタリング

これで一旦様子見していきたいと思います。

まとめ

今回は、ページスピードインサイトでサイトのパフォーマンス計測し、改善を行いました。

「reCAPTCHA」の設定を解除することで、パフォーマンスが劇的に改善することが分かりました。そのため、モバイルのパフォーマンスが悪い時には、「reCAPTCHA」の設定について確認してみてください。

最後までご覧いただきありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪でITエンジニアしています。(8年目に突入)
趣味でウェブサイトに関することをいろいろと勉強しています。

勉強した内容やプログラミングに関する情報を中心に役立つ情報を発信するべく日々ブログを更新しています。

3度の飯よりも「柿の種」をこよなく愛する関西人。

コメント

コメントする

目次
閉じる