ページが遅いと広告収益が落ちる：WordPressで画像最適化とCore Web Vitalsを整える手順

ページが遅いと広告収益が落ちる：WordPressで画像最適化とCore Web Vitalsを整える手順

サイト運営で見落とされがちですが、ページ速度は「SEO」だけでなく「広告の見られやすさ（viewability）」や収益にも影響します。やることは難しくありません。私は、まず画像から手を付けるのが現実的だと考えます。

1. なぜページ速度が広告収益に効くのか

ページが遅いと、ユーザーが読む前に離脱しやすくなります。結果として、広告が画面内で十分に表示されない（視認されない）状態になりやすいです。Googleの調査でも、速いモバイルページの方が広告の視認性が高く、収益が伸びる可能性が示されています。

  • 速いモバイルページは広告の視認性が上がりやすい
  • 読み込みが速いほど、回遊や滞在が増えやすい

2. まず押さえる指標：Core Web Vitals（LCP / INP / CLS）

Googleはユーザー体験の主要指標としてCore Web Vitalsを提示しています。特に次の3つが基本です。

  • LCP：主要コンテンツが表示されるまでの速さ
  • INP：操作への反応の良さ
  • CLS：表示のズレ（レイアウトの不安定さ）

注意点として、PageSpeed Insightsなどの「実ユーザーデータ（フィールドデータ）」は直近28日間の集計です。改善しても即日で数字が激変しないことがあります（ラボデータは即反映されやすい）。

3. 画像が重いと、だいたいLCPが死ぬ

WordPressの一般的なブログで、最大のボトルネックは「画像」になりがちです。対策の優先順位は次のとおりです。

  1. 表示サイズに合わせて縮小（無駄に巨大な画像を置かない）
  2. 圧縮（品質を落としすぎない範囲で軽量化）
  3. 次世代フォーマット（WebP/AVIF）を使う
  4. Lazy-loadは「下の画像」に効かせる（ただし例外あり）

WebP/AVIFは、従来のJPEG/PNGより圧縮効率が良く、軽量化しやすいとされています。

4. WordPressで今日やる手順（実務）

手順A：いま重いページを特定する（10分）

  1. PageSpeed Insightsで、問題のあるURLを測る（モバイル優先）
  2. Search ConsoleのCore Web Vitalsレポートがあれば、改善対象URL群を確認

手順B：画像を「縮小→圧縮→WebP化」する

  • 画像は「表示サイズ」に寄せてからアップロード（元画像が4000pxなどだと無駄が残ります）
  • 可能ならWebPで用意してアップロード（WordPressは5.8以降、WebPを扱えます）
  • 既存画像が多い場合は、画像最適化ツール（プラグイン/外部サービス）で一括変換を検討

手順C：Lazy-loadは基本ON、ただし「先頭の大きい画像」は例外

WordPressは5.5以降、標準で画像のlazy-load（loading=”lazy”）が入ります。これは下の画像の読み込みを遅らせ、初期表示の競合を減らすのに有効です。

ただし先頭の大きい画像（LCPになりやすい画像）をlazy-loadすると、LCPが悪化しやすいです。LCP候補の画像は「すぐ読み込む」設計に寄せてください。

手順D：広告は「表示させつつ、重くしない」

広告は収益の柱ですが、実装が雑だとページ体験を落とします。基本は「必要なものだけ」「重複を避ける」「計測しながら」調整です。広告を速度の言い訳にせず、速度も収益も両立させる方が得です。

5. 10分チェックリスト（これだけやれば前進します）

  • モバイルでPSIを計測し、LCP要素が「画像」か確認
  • 先頭の大画像：サイズ過大・重すぎ・lazy-loadになっていないか確認
  • 記事中の画像：必要以上に大きい画像を置いていないか
  • WebP（できればAVIF）へ置き換えできるか
  • 改善後はラボ（Lighthouse/PSI）で即確認、フィールドは28日平均で追う

まとめ

ページ速度の改善は、ユーザー体験だけでなく広告の見られやすさにも効きます。私は、まず画像から着手するのが費用対効果が高いと判断します。

  • Core Web Vitals（LCP/INP/CLS）で問題を把握
  • 画像は「縮小→圧縮→WebP/AVIF」
  • lazy-loadは下の画像へ。LCP画像はlazyにしない

参考（一次情報）

  • Google AdSense（モバイル速度と視認性/収益の関係）：https://adsense.googleblog.com/2016/09/the-need-for-mobile-speed.html
  • Google 検索：Core Web Vitals（LCP/INP/CLS）：https://developers.google.com/search/docs/appearance/core-web-vitals
  • PageSpeed Insights（フィールドデータは28日間の集計）：https://developers.google.com/speed/docs/insights/v5/about
  • WordPress 5.5：画像のlazy-load標準化：https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/
  • WordPress 5.8：WebP対応：https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/
  • web.dev：LCP画像をlazy-loadしない：https://web.dev/articles/optimize-lcp
  • Chrome Lighthouse：WebP/AVIF（次世代フォーマット）：https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images
  • web.dev：広告を速度に悪影響なく読み込む：https://web.dev/articles/loading-ads-page-speed
Line

コメントを残す