美容室・サロンサイトの表示速度最適化【Before-After画像のLCP対策】
美容室サイトは Before-After ギャラリー・スタイリスト写真・施術メニュー画像が大量で、表示速度が落ちやすい代表業種です。スマホで「○○エリア 美容室」と検索された瞬間に2.5秒以内で出ないと離脱されます。Core Web Vitals 最適化はホットペッパー対抗の足腰になります。
▼ あなたのサイトを30秒で採点
01 WHY IT MATTERS
なぜ美容・サロンでこの対策が特に重要か
美容室の予約検討は移動中・休憩中のスマホが大半で、表示速度3秒超で65%が離脱（Google 公表データ）。LCP（最大の画像が出るまでの時間）が遅いと、Google は『ユーザー体験が悪いサイト』と判定し地域検索順位を下げます。Before-After 画像が主役の業種だからこそ、画像最適化の効果が一番大きく出ます。
02 STEPS · 5 STAGES
具体的に何をすればいいか
STEP 1: ヒーロー画像の WebP/AVIF 変換 + サイズ最適化（LCP対策）
トップページの大きなヒーロー画像を WebP または AVIF 形式に変換し、表示サイズに合わせて 1920px 超の元画像をリサイズ。WordPress なら EWWW Image Optimizer / Imagify、自社実装なら squoosh.app を使えば1枚あたり50〜80%軽量化できます。LCP が4秒→1.8秒に改善する例が多いです。
STEP 2: Before-After ギャラリーの遅延読み込み（loading="lazy"）
img タグに loading="lazy" 属性を追加し、画面外の画像はスクロールするまで読み込まない設定に。Before-After 30件のギャラリーがあるページでは、初期読み込みデータ量が80%減ります。jQuery slick等の古いカルーセル使用なら lazysizes ライブラリへ移行を検討。
STEP 3: スタイリスト写真ギャラリーの aspect-ratio 指定（CLS対策）
スタイリスト一覧で画像読み込み中にレイアウトがガタつく現象（CLS）を防ぐため、img タグに width/height 属性を明示するか CSS の aspect-ratio: 3/4 等で領域を予約。0.1以下の CLS スコアを維持できます。
STEP 4: 予約 iframe（ホットペッパー埋込）の遅延読み込み
ホットペッパーのカレンダー埋込 iframe は初期読み込みで重く、INP（操作応答性）を悪化させる主因。loading="lazy" 属性 + クリック時に展開する遅延ローディング方式に切り替えます。
STEP 5: PageSpeed Insights で月1回測定 + 70点目標
PageSpeed Insights（無料）でモバイルスコア70点以上を維持。50点未満は Google が「遅すぎる」と判定して地域検索順位を下げる閾値です。月1回の測定習慣で改善効果を可視化できます。
03 COMMON FAILURES
美容・サロンでありがちな3つの失敗
FAIL #1
Before-After画像を JPEG のまま 3MB で掲載
美容室サイトで最も多い失敗。1ページに3MB×10枚=30MBの画像があると、4G回線で15秒かかります。WebP化 + 画面サイズへのリサイズで90%軽量化が可能です。
FAIL #2
ヒーローのスライダー画像を全部最初に読み込み
5枚のスライド画像を全部一度に読み込むとLCPが致命的に遅くなります。最初の1枚だけ事前読み込み（preload）し、残りは表示直前に読み込む設定に。
FAIL #3
Instagramフィード埋込で表示が固まる
Instagram の公式埋込ウィジェットは JavaScript が重く、INP（操作応答性）が大幅悪化。サムネイル画像 + Instagram リンクの形に置き換えると劇的に軽くなります。
04 FAQ
よくある質問
Q. WordPress テーマを変えないと速度改善は無理ですか？＋
テーマ変更不要で改善できます。画像のWebP化 + lazy loading + キャッシュプラグイン（WP Rocket / W3 Total Cache）の3点だけで多くのサイトはモバイル50→75点に改善します。
Q. PageSpeed Insights のスコアより実際の体感速度の方が重要では？＋
両方重要です。Google の検索順位評価は Core Web Vitals（LCPと CLS と INPの実測値）で、PageSpeed Insights のスコアは目安です。スコア70点以上 + LCP 2.5秒以内 + CLS 0.1以下が目標です。
Q. 美容室で動画背景は使わない方が良いですか？＋
使うなら『短時間（10秒以内）+ 低解像度（720p）+ poster 画像で初期表示』の3点を守れば問題ありません。それを超えると LCP が致命的に悪化します。
05 YOUR TURN
あなたの美容・サロンサイトを30秒で採点
URL を入れるだけで20項目を100点満点で自動採点します。本記事の5ステップが実装できているか、すぐに確認できます。登録不要・完全無料。
RELATED TOPICS
美容・サロンの他のチェックリスト
OTHER INDUSTRIES · 表示速度最適化