工務店・リフォーム会社サイトの表示速度最適化【施工事例100件でも軽く】
工務店サイトは施工事例の写真が100件以上掲載されることが多く、画像最適化を怠るとページが10MB超になり離脱率が跳ね上がります。SUUMO・ホームプロが上位独占する中、自社サイトの速度差は地元検索順位の決定要因の一つです。
▼ あなたのサイトを30秒で採点
01 WHY IT MATTERS
なぜ建設・リフォームでこの対策が特に重要か
リフォーム検討者はスマホで複数業者を見比べる行動パターン。表示が遅いサイトは『管理が雑＝施工も雑』という連想で離脱されます。Google も施工写真主体のサイトは画像最適化スコアを厳しく見ます。施工事例の数を減らさず、表示速度を改善する技術が他社差別化の核です。
02 STEPS · 5 STAGES
具体的に何をすればいいか
STEP 1: 施工事例画像の一括 WebP 変換 + 解像度適正化
施工事例100件×10枚の画像を一括で WebP 化。1枚3MB→300KB に圧縮可能。WordPress なら EWWW Image Optimizer の WebP一括変換、自社実装なら ImageMagick / cwebp スクリプトで一括処理。総容量が80%減ります。
STEP 2: 事例一覧ページの段階的読み込み（infinite scroll / pagination）
事例100件を1ページに全表示するのは速度的に致命的。20件ずつのページネーション、または無限スクロール（IntersectionObserver で実装）に分割。初期表示が劇的に高速化します。
STEP 3: Before-After 比較スライダーの軽量化
Before-After 画像比較ライブラリ（juxtapose.js等）はファイルサイズが大きいことが多い。CSS のみで実装する軽量版（mix-blend-mode + clip-path）に置き換えれば、ライブラリ300KBが10KB以下に。
STEP 4: 動画埋込（YouTube）の lite-youtube-embed 化
施工Vlog・現場紹介動画の YouTube iframe 埋込を lite-youtube-embed（2KB のWebコンポーネント）に置換。YouTube公式iframeが500KB→2KBに減り、INP が大幅改善。
STEP 5: 重い CMS テーマの軽量化 or 入替
「リフォーム業者向けWordPressテーマ」は装飾過多で200KB以上のCSS/JSが多い。Cocoon / Lightning 等の軽量テーマ + カスタマイズの方が速度・SEO ともに優れます。
03 COMMON FAILURES
建設・リフォームでありがちな3つの失敗
FAIL #1
施工写真を JPEG 5MB のまま100枚掲載
工務店サイト最大の地雷。1ページ500MBを超えるサイトを実例で見ます。WebP化＋lazy loading で90%以上削減可能です。
FAIL #2
トップページにスライドショーで30枚展開
ヒーロー部分のスライドショーで30枚の事例画像を全部preloadすると、LCPが致命的に悪化。1〜2枚に絞り、残りは事例ページへ誘導が正解。
FAIL #3
Google マップ + 施工エリア iframe を5箇所貼る
施工エリア紹介で Google マップを5箇所貼ると、各 iframe が500KB×5=2.5MB の負担。静的地図画像 + クリックでマップへ遷移、の方が速くて操作性も良いです。
04 FAQ
よくある質問
Q. 施工事例100件は減らさないと速くなりませんか？＋
減らさなくても速くできます。WebP化 + lazy loading + ページネーションの3点で十分です。事例数は信頼性指標なので減らさないでください。
Q. WordPress を辞めれば速くなりますか？＋
辞めなくても速くできますが、サーバー（HTTP/2対応）+ 軽量テーマ + キャッシュプラグインの3点に変更すれば多くの場合80点以上に到達します。
Q. 施工動画を載せたいが重くないか心配＋
YouTube 埋込を lite-youtube-embed で実装すれば、サムネイル画像 + クリックで再生になり初期負荷ほぼゼロ。動画コンテンツも E-E-A-T 強化で必須です。
05 YOUR TURN
あなたの建設・リフォームサイトを30秒で採点
URL を入れるだけで20項目を100点満点で自動採点します。本記事の5ステップが実装できているか、すぐに確認できます。登録不要・完全無料。
RELATED TOPICS
建設・リフォームの他のチェックリスト
OTHER INDUSTRIES · 表示速度最適化