飲食店サイトの表示速度最適化【高画質料理写真でも軽い実装】
飲食店サイトは料理写真の美しさが命で、写真の解像度を落とすと魅力が消える矛盾を抱えます。WebP/AVIF への変換 + 段階的読み込みで「高画質を維持したまま速い」を実現できます。食べログ・ぐるなびに載せられない高画質ヒーロー画像こそ自社サイトの差別化です。
▼ あなたのサイトを30秒で採点
なぜ飲食・外食でこの対策が特に重要か
飲食店検索は移動中・食事直前のスマホが大半で、表示3秒超での離脱率は70%超（Google 公表）。料理写真の美しさで他店との違いを伝えるのが命の業種で、高画質を諦めずに速度も両立する技術が必須です。
具体的に何をすればいいか
STEP 1: 料理写真のAVIF変換（WebPより更に30%軽量）
料理写真は WebP より新しい AVIF 形式が最適。1枚2MBの料理写真が AVIF で500KBまで軽量化可能で、WebP より画質も良い。Chrome / Edge / Safari 16+ で対応。<picture> タグでフォールバック対応。
STEP 2: メニューページのカテゴリ別 lazy loading
メニュー全件をトップで表示せず、カテゴリ別タブ + 表示中タブのみ画像読み込み（IntersectionObserver）に。前菜30品 + メイン30品 + デザート20品で初期表示を10品に絞れます。
STEP 3: 予約iframe（食べログ・OpenTable）の遅延読み込み
食べログの「席を予約」iframe は重く、INP致命傷。クリック時に展開する遅延ローディング方式で初期表示が劇的に軽くなります。
STEP 4: 動画背景（料理映像）の最適化
ヒーロー動画背景は <video poster="..." preload="none"> + 720p MP4 で実装。AVIFの静止画 + GSAP動画感より、軽くて見栄えが良い場合も多いので比較検討。
STEP 5: Instagram フィード埋込の軽量化
Instagram公式埋込は重い。Smash Balloon Instagram Feed Pro 等のサムネイル + クリックで展開する軽量プラグインに置換すれば、Instagram連動を維持しつつ速度を保てます。
飲食・外食でありがちな3つの失敗
料理写真がカメラRAWのまま6MB
プロカメラマンの納品写真をそのまま掲載する失敗。AVIF/WebP化＋表示サイズへのリサイズで90%以上軽量化可能です。
メニュー表が PDF（ダウンロード式）
PDFはモバイルで読みにくくSEOにも不利。HTMLメニュー + 画像 + AVIF で実装する方が速度・SEO・体験すべてに有利です。
ヒーローに自動再生動画 + 料理スライド + Instagramフィード全部入り
「全部見せたい」精神で重くなる典型例。ヒーロー1枚＋動画は別セクション + Instagramは下部、と段階表示にしてください。
よくある質問
Q. AVIF と WebP どちらを優先すべき？＋
<picture> タグで両方提供するのがベスト。AVIF を優先 + WebP フォールバック + JPEG 最終フォールバックの3段で全ブラウザ対応 + 最軽量化を両立できます。
Q. 料理写真は高画質を維持したいのですが…＋
AVIF 形式で表示サイズに合わせてリサイズすれば、6MB→500KBに圧縮しても画質劣化はほぼ無視できます。むしろ表示が速い方が美味しそうに見えます。
Q. 食べログ集客が主なので自社サイトの速度は関係ない？＋
関係あります。食べログから自社サイトへ来た顧客の予約・コース確認・地図確認の体験がここで決まります。リピート・口コミに影響します。
あなたの飲食・外食サイトを30秒で採点
URL を入れるだけで42指標を100点満点で自動採点します。本記事の5ステップが実装できているか、すぐに確認できます。登録不要・完全無料。