そもそも表示速度はなぜ売上に効くのか

Googleの公式データでは、モバイル読み込み時間が1秒→3秒で離脱率32%上昇、1秒→5秒で90%上昇。3秒の壁は、想像以上に厳しい。

さらに2021年以降、Core Web Vitals(LCP・INP・CLS)が検索順位のランキング要因に組み込まれています。速度改善は『UX向上』と『SEO順位』を同時に狙える、コスパ最強の施策です。

まずは現状把握:PageSpeed Insights3点セット

改善の前に、現状スコアを測定します。使うツールは無料の3点。

  • PageSpeed Insights:Googleが提供する速度計測ツール(pagespeed.web.dev)
  • Search ConsoleのCore Web Vitals:実ユーザー速度データ(28日平均)
  • Chrome DevTools Lighthouse:詳細な改善提案付き診断

PageSpeed Insightsでモバイルスコア・LCP・INP・CLSの4つをメモしておきます。改善後の比較に使います。

改善策1. 画像圧縮:最大の効果、最小の労力

個人事業主サイトの遅さの7割は画像が原因。特にトップの大型画像が2〜5MBあるケースが典型的です。

  1. Squoosh(無料)にJPEG/PNGをドラッグ
  2. 品質を80%に下げる(見た目はほぼ変わらない)
  3. 1枚あたり200KB以下、ヒーロー画像でも500KB以下を目標に
  4. WordPressなら『EWWW Image Optimizer』で一括圧縮も可

2MB→200KBに圧縮するだけで、モバイルLCPが3〜4秒短縮できます。

改善策2. WebP化:JPEGより30〜40%軽い次世代画像

WebPは、同じ画質でJPEG比30〜40%軽くなるGoogle開発の画像フォーマット。全モダンブラウザで対応済み(Safariは14以降)。

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="サロン外観" width="1200" height="600">
</picture>

pictureタグで書けば、対応ブラウザはWebP・非対応はJPEGを自動選択。width/height属性を必ず指定することで、CLS(レイアウトずれ)も同時に予防できます。

改善策3. 遅延読み込み(lazy load)

ページ下部の画像を「見えるまで読み込まない」設定です。imgタグに1属性追加するだけ。

<!-- ファーストビュー画像:eagerのまま -->
<img src="hero.jpg" alt="トップ" loading="eager">

<!-- ページ下部の画像:lazy -->
<img src="menu1.webp" alt="コース1" loading="lazy" width="600" height="400">

注意点はファーストビュー画像にlazyを付けないこと。付けるとLCPが逆に悪化します。iframeも同様にloading="lazy"が使えるため、YouTube埋め込みやGoogleマップにも忘れず適用します。

💬 実装が難しかったらLINEで

「うちのサイトはこの改善で伸びる?」を無料でお答えします。URLを送っていただければ、即座に現状スコアを診断します。

📱 LINEで相談する(無料)

✓ 24時間受付 ✓ 返信は営業時間内 ✓ しつこい営業なし

改善策4. ブラウザキャッシュとgzip圧縮

再訪ユーザーがサイトを開くたびに、全ファイルをダウンロードし直すのは無駄。キャッシュ設定で2回目以降を高速化します。

# .htaccess (Apacheサーバーの場合)
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType text/css "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

これでファイル転送量が60〜80%削減されます。WordPressなら『WP Fastest Cache』を有効化するだけで同等の設定が入ります。

改善策5. 不要スクリプト・プラグイン削除

使っていないJavaScript・CSS・埋め込みタグが、静かに速度を殺しています。整理チェックリスト。

  • □ 昔入れたが今は使っていないGoogleタグマネージャーの管理タグ
  • □ 過去のイベントに使ったチャットボットのウィジェット
  • □ フォームプラグインが複数併存していないか
  • □ SNSシェアボタンが5個以上並んでいないか(LINE・X・Facebookで十分)
  • □ WordPressプラグインが15個以上入っていないか
  • □ 未使用のWebフォント(Google Fonts)を10個以上読み込んでいないか

『Autoptimize』などのCSS/JS最適化プラグインで、未使用コードの自動削減も可能です。

今日試せる:30分クイック改善プラン

  1. 0〜5分:PageSpeed Insightsで現状スコア測定&スクショ保存
  2. 5〜15分:トップ画像とヒーロー画像の3〜5枚をSquooshで圧縮
  3. 15〜20分:ファーストビュー以外の画像にloading="lazy"追加
  4. 20〜25分:使っていないSNSウィジェット・チャットボットを削除
  5. 25〜30分:再度PageSpeed Insightsで測定&比較

これだけで多くのサイトがモバイルスコア30点台→60点台に到達します。

数字で見る改善事例3つ

事例1:福岡・美容室(WordPress)
モバイルスコア32点→78点、LCP 6.4秒→1.9秒。ヒーロー画像7MB→180KB、WebP化、未使用プラグイン6個削除で達成。月間予約数が1.6倍に。

事例2:大分・整体院(STUDIO)
モバイル49点→74点、LCP 4.2秒→2.1秒。全画像を事前に幅1200px・品質80%に統一、GoogleマップをiframeでlazyロードするだけでLCPが半分に。

事例3:熊本・ECサイト(Shopify)
商品画像を全てWebP化、上位10商品ページを重点改善。モバイルLCP 3.8秒→1.7秒でCVRが1.8%→2.7%へ改善、月商が1.4倍。

やってはいけない5つのNG施策

  • 安易なCDN導入:設定不備で逆に遅くなる事例も。無料枠でまず試す
  • 不要な大量プラグイン導入:速度改善プラグインを5個以上入れると競合する
  • ファーストビュー画像のlazy化:LCPが悪化する典型ミス
  • 動画自動再生:モバイルではデータ量激増で離脱率上昇
  • フォント10種類読み込み:デザインの犠牲になる速度を意識

業種別・速度改善で効くポイント

業種によって『どこが遅い元凶か』は異なります。原因の見極めが最短ルートです。

  • 飲食店・カフェ:メニュー写真の大量掲載でLCP悪化。全画像WebP化+lazy loadで解決
  • 整体・整骨院:症状別ページに大量画像。ページ別に主要画像を絞り込むのが有効
  • 美容室・サロン:ヘアスタイル写真ギャラリー。thumbnail表示+クリックで拡大の設計に変更
  • ECサイト:商品画像+レコメンド枠のJS。サードパーティ製ウィジェットの見直し必須
  • 士業サイト:写真は少ないが未使用JSやフォント過多が典型。CSS/JSの最適化が優先

自業種で頻出の速度ボトルネックを把握することで、改善優先順位が明確になります。

速度改善が売上に直結する理由

『速度改善はSEO対策』と思われがちですが、実は売上への直接効果の方が大きいことが分かっています。

  • Amazon:ページ表示が0.1秒遅くなると売上1%減
  • Google:0.5秒遅くなると検索数20%減
  • ウォルマート:1秒改善するとCVRが2%向上
  • 個人事業主サイトの実測:LCP 4秒→2秒でCVR平均1.6倍

『速いHP』は、広告費をかけずに既存の訪問者からより多くの問い合わせを引き出す最強のレバレッジ。SEO順位アップは副産物と捉えるくらいがちょうど良いです。

Core Web Vitalsとの関係

2021年から、Googleは表示速度を『Core Web Vitals(CWV)』という3指標で評価しています。

指標合格ライン意味
LCP2.5秒以内最大要素の表示時間
INP200ms以下操作への反応速度
CLS0.1以下レイアウトずれ

今回の5つの改善策は、LCPとCLSに直接効きます。INPはJavaScript処理の軽量化が中心なので、詳細は関連記事を参照してください。

💬 表示速度をプロに見てもらいたい方へ

「自分でやる時間がない」「WordPressでどこから触ればいい?」もLINEでOK。URLと現状スコアを送るだけで、無料で改善提案します。

📱 LINEで相談する(無料)

✓ 24時間受付 ✓ 返信は営業時間内 ✓ しつこい営業なし

よくある質問

Q. 表示速度は何秒以内が目標?
A. モバイル2.5秒以内、PC1.5秒以内が理想。3秒を超えると半数が離脱します。

Q. PageSpeed Insightsは何点あればOK?
A. モバイル60点以上が合格、80点で優秀。個別CWV指標を良好レンジに入れる方が優先。

Q. 画像はどれくらい圧縮すべき?
A. 1枚200KB以下、ヒーロー画像でも500KB以下が目安。品質80%+WebPで達成できます。

Q. lazy loadは全画像に付けるべき?
A. ファーストビュー画像には付けない。それ以下の画像だけloading="lazy"を追加。

Q. WordPressの無料プラグインで何を入れれば?
A. EWWW Image Optimizer・WP Fastest Cache・Autoptimizeの3点で7割解決します。

まとめ

HP速度改善は、画像圧縮・WebP化・遅延読み込み・キャッシュ・不要スクリプト削除の5つを順番に実装するだけで、多くのサイトがスコアを2倍にできます。特に画像対策だけで7割の効果が出るため、まずSquooshで圧縮するところから始めましょう。

速度は『一度直せば数年効く』資産になります。売上・SEO・UXすべてに効く一石三鳥の施策です。

関連記事

「うちのHP、なぜ遅いのか特定してほしい」なら

実サイトのスコアを診断し、優先順位付きで改善プランをご提示します。無料集客診断からどうぞ。

無料集客診断はこちら