こんにちは、なかゆうです！
アドセンスサイトで月5ケタ達成しました。
「モバイルの表示スピードが遅い」
「cocoonの高速化だけじゃ、遅すぎる」
「cocoonと相性のいい対策方法は？」
こんな悩みに答えます。
サイトの表示スピードって、モバイルだけ異様に遅くないですか？
モバイルユーザーの方が多いのに、なかなか表示スピードが上がらなくて悩んでいました。
表示スピードの遅さは、SEOや離脱率に関わるので致命的です。
しかし、ようやくモバイルスピードが54⇒74まで改善することに成功しました！
cocoonユーザーで、モバイルスピードが上がらなくて悩んでいるなら、ぜひ試してみてください。
モバイルスピードが20上がった改善方法3選
- 画像圧縮プラグイン「EWWW Image Optimizer」
- ページキャッシュプラグイン「WP Fastest Cache」
- 「reCAPTCHA」をお問い合わせのみに読み込ませる
cocoon高速化だけでは不十分
残念ながら、cocoonの高速化だけでは不十分です。
なぜなら、Google PageSpeed Insightsでモバイルスピードが低速評価（Low)されるからです。
Good 90～100 緑（速い）
Medium 50～89 オレンジ（平均）
Low 0～49 赤（遅い）
公式サイトでも、以下のように注意書きがあります。
「Cocoonテーマに、ページキャッシュプラグインを合わせたデモページでの計測結果です。外部ソース（プラグインなど）を入れると、普通にモバイルとかは50点以下ななります」
公式サイト
パソコンでは表示スピードが速くても、モバイルだと50以下になります。
実際に、わたしもcocoonの高速化設定だけでは、モバイルで50以下でした。
スマホユーザーの方が圧倒的に多いので、モバイルスピードの遅さは致命的です。
すべての都道府県でスマートフォンによるインターネット利用率が50％を超えている。
総務省 令和3年 情報通信白書
モバイルスピードの影響は大きいので、きちんと対策をしましょう。
なぜモバイルスピードを高速化する？
モバイルスピードの表示速度を気にしなければいけない理由2選
- 3秒ルール
- モバイルファースト
スマホユーザーは3秒も待っていられない。
ググってページの表示速度が遅いと、中身を見ずに帰ってしまうからです。
以下のデータで証明されています。
- 読み込み時間が1ー3秒の場合、離脱率は32%
- 読み込み時間が1ー5秒の場合、離脱率は90%
モバイルスピードはSEOにも影響する可能性が高いです。
Googleから、「モバイルフレンドリー」にしなさいよって言われています。
2015年からGoogleが検索順位を決める（SEO対策）アルゴリズムに、モバイルフレンドリーがあるからです。
モバイルスピードが遅い原因は？
モバイルスピードが遅い原因の多くは、画像です。
他にも、以下のような原因が考えられます。
・多くのプラグインを使用
公式サイト
・アドセンスを掲載
・アナリティクス分析
・FacabookやTwitterのスクリプト使用
・アフィリエイトのバナー掲載
・アフィリエイトのインプレッション画像読み込み
パソコンでは問題がなくても、モバイルスピードに大きく影響しています。
私は画像の圧縮とプラグインを調節しただけで、モバイルスピードが54⇒74になりました。
モバイルスピードが20上がった改善方法3選
プラグインで対処
- EWWW Image Optimizer
- WP Fastest Cache
- 「reCAPTCHA」をお問い合わせのみに読み込ませる
私が実際にやった方法です。
cocoonとの相性に問題はないことは確認済。
高速化プラグイン2コ
- EWWW Image Optimizer
- WP Fastest Cache
公式サイトから、相性の良いプラグインとして紹介されています。
「EWWW Image Optimizer」は、画像圧縮プラグイン。
WebP（ウェッピー）に対応しています。
WebP (ウェッピー)とは、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットのことで、画像の画質を担保したまま軽量化した画像を書き出すことができます。
web集客ラボbyGMO
サーバーの「.htaccess編集」しなければ、WebPは有効になりませんので、注意してください。
わたしは、一括圧縮で3分くらいかかりました。
「WP Fastest Cache」とは、ページキャッシュプラグイン。
ここまでの施策で、モバイルスピードが54⇒61まで上がっていました。
「reCAPTCHA」をお問い合わせのみに読み込ませる
モバイルスピードを低下させる要因が、「reCAPTCHA」というスパム対策プラグイン。
「reCAPTCHA」が全ページに読み込まれて、表示スピードが低下します。
そこで、お問い合わせフォームが設置されているページのみ「reCAPTCHA」を読み込ませる。
Google reCAPTCHA V3 を任意ページのみに表示する方法
お問い合わせページのスラッグが例えば「contact」の場合、functions.phpに記入するコードを教えてくれています。
コードをコピペしましょう。
function.php：ワードプレスの管理画面⇒外観⇒テーマの編集
お問い合わせフォームが設置されているページのみ「reCAPTCHA」を読み込ませる。
この時、ブログのコメント機能をオフにした方がいいでしょう。
補足
- Autoptimize
- Flying Scripts by WP Speed Matters
ページ速度改善に進めらるプラグインですが、Autoptimizeはcocoonと相性が悪いです。
わたしは画面が真っ白になるバグが起こったので、取り入れないことをすすめます。
公式サイトでも、非推奨のプラグインです。
Flying Scripts by WP Speed Mattersというプラグイン。
私は効果なかったです。
しかし、効果がある人もいるので、ケースバイケース。
まとめ
cocoonユーザーが、モバイルスピードを高速化する必要性や対策をお伝えしました。
ページ速度が遅いと、離脱率やSEOに悪影響を及ぼす。
画像やプラグインを利用すると、モバイルスピードが50以下になりやすいです。
- EWWW Image Optimizer
- WP Fastest Cache
- 「reCAPTCHA」をお問い合わせのみに読み込ませる
モバイルスピードを80以上に上げようとすると、CSSなどをいじらなくてはいけません。
知識がないとキツイレベルです。
とりあえず、モバイルスピード60以上を目指しましょう。
