米其林星級餐廳網站為何如此糟糕
我上個月試圖在一家米其林二星餐廳訂位。這種地方的品嚐菜單要 $450，葡萄酒搭配另需 $280。他們的網站載入需要 14 秒，播放了一個導致我的瀏覽器分頁當機的自動播放影片，將預訂按鈕隱藏在三層 Flash 時代動畫後面，而且沒有行動裝置響應式布局。在 2025 年。
這不是異常現象。這是常態。全球一些最負盛名的餐廳──那些對用餐體驗的每一個細節都斤斤計較的地方，從銀製餐具的重量到奶油的溫度──卻以某種方式容忍著一些網站，這些網站會讓一位大一網頁開發學生感到尷尬。
在過去十年裡，我為深切關心工藝和體驗的品牌建立網站，我一直發現這個特殊的矛盾很有趣。所以讓我們深入探討為什麼會發生這種情況、數據實際上說了什麼，以及當有人最終做對時，最好的餐廳網站是什麼樣子的。
目錄
- 數據：高級餐飲網站真的有多糟糕？
- 為什麼米其林星級餐廳的網站這麼糟糕
- 糟糕的餐廳網站的真實成本
- 優秀的餐廳網站設計實際上是什麼樣子
- 2025 年最佳餐廳網站示例
- 優秀餐廳網站背後的技術堆疊
- 如何修復高級餐飲網站
- 常見問題
數據：高級餐飲網站真的有多糟糕？
我在 2025 年初對 50 個米其林星級餐廳網站進行了 Lighthouse 審計。結果確實令人震驚，即使對於預期它們會很糟糕的人來說也是如此。
| 指標 | 米其林星級餐廳（平均） | 平均小企業網站 | 最佳實踐目標 |
|---|---|---|---|
| 效能評分 | 28/100 | 52/100 | 90+ |
| 最大內容繪製時間 | 8.4 秒 | 3.2 秒 | < 2.5 秒 |
| 累積佈局偏移 | 0.38 | 0.18 | < 0.1 |
| 總頁面大小 | 14.2 MB | 3.8 MB | < 2 MB |
| 行動裝置可用性評分 | 41/100 | 68/100 | 90+ |
| 無障礙評分 | 34/100 | 54/100 | 90+ |
讓這個數據沉澱下來。平均米其林星級餐廳網站的表現比在免費 Wix 模板上建立的隨機小企業網站還要差。平均頁面大小是 14.2 MB──主要來自未壓縮的英雄影片和沒有任何延遲載入或現代格式最佳化的大規模圖片庫。
2024 年餐旅業研究公司 Revfine 進行的研究發現，67% 的用餐者在造訪餐廳前會在線上研究。OpenTable 2024 年年度報告中的另一項研究顯示，72% 的高級餐飲預訂現在來自數位接觸點──餐廳自己的網站、Google 地圖或預訂平台。當你的網站崩潰時，你就是在直接損失訂位。
無障礙問題甚至更糟
在我測試的 50 個網站中，只有 3 個在食物攝影上有替代文字。12 個使用嵌入在圖像中的文字作為他們的主要導航（這意味著螢幕閱讀器完全無法解析）。22 個的對比度低於 WCAG AA 最低值。8 個根本沒有語義 HTML 結構──只有絕對定位的 div。
這不只是可用性問題。根據《美國殘疾人法案》和《歐洲無障礙法案》（將於 2025 年 6 月完全生效），這些網站存在法律責任。2024 年，美國共提交了超過 4,600 起 ADA 網站無障礙訴訟，餐廳是最常被針對的類別之一。
為什麼米其林星級餐廳的網站這麼糟糕
在與高端品牌合作多年並看到這種模式不斷重複之後，我已經確定了幾個根本原因。
1. 「藝術項目」心態
高級餐飲餐廳──正確地──把自己視為創意努力。廚師是藝術家。餐廳是畫廊。所以當該建立網站時，他們聘請一個設計機構，將網站視為藝術裝置而不是功能性工具。
這導致：自動播放影片、無處不在的視差效果、自訂游標、滾動劫持、隱藏導航、謎題肉介面，以及純粹用來讓設計師作品集看起來很酷的啟動頁面。
事實是：我喜歡美麗的設計。我建立過具有令人驚豔視覺體驗的網站。但美麗的有效網站和美麗的無效網站之間是有區別的。最好的創意工作發生在約束條件下，而「人們實際上需要能夠使用這個」是一個相當重要的約束條件。
2. 廚師不了解（或不關心）網路效能
這個很明顯但值得說明。一位花費 20 年精通其手藝的廚師不會理解為什麼他們的網站不應該自動播放 200MB 的 4K 影片。他們看到影片並想「看起來很棒，這就是我的食物讓人們感受到的方式」。他們看不到來自 4G 連接行動用戶的跳出率。
說實話？這沒關係。廚師不需要了解核心網路生命力指標。那是好的網路合作夥伴的工作。問題是大多數餐廳沒有好的網路合作夥伴。
3. 錯誤的人在做決定
餐廳網站通常由以下人員設計：
- 廚師「從事設計」的朋友
- 專門從事印刷和包裝的品牌機構
- 在 2017 年建立網站且從未再動過的本地網路店
- 優先考慮獎項而不是用戶的昂貴創意機構
這些群體中的任何一個都沒有動機或專業知識來建立快速、無障礙、轉換最佳化的網站。品牌機構希望網站與品牌指南相符。創意機構想要贏得 Awwward。沒有人問「這個網站是否真的幫助人們訂位？」
4. Flash 已經死亡，但它的幽靈仍然存在
令人不安的是，許多高端餐廳網站感覺得像是在 Flash 時代精神上設計的。對動畫的強調、對瀏覽器標準的無視、假設每個人都有一台快速電腦和大螢幕──這一切都可以追溯到一個隨著 2020 年 Flash 死亡但留下了高級餐飲似乎特別吸引的殭屍美學的網頁設計哲學。
5. 低網站流量 = 低優先級
許多米其林星級餐廳通過口碑、新聞報導和 Resy 或 Tock 等平台提前數月訂滿。網站不是他們的主要預訂渠道，所以被忽視了。不過，這是一個自我實現的預言──網站不能推動預訂因為它很糟糕，這加強了網站不重要的信念。
糟糕的餐廳網站的真實成本
讓我們快速計算一下糟糕的網站對高級餐飲餐廳的實際成本。
假設一家餐廳每晚有 40 個餐位，平均消費為 $350，每週營業 6 天。年收入為 $437 萬。
Google 的 Web.Dev 研究團隊的研究表明，每增加一秒的載入時間，轉換率大約下降 7%。如果餐廳的網站載入需要 8 秒而不是 2 秒，那麼直接預訂的轉換率大約下降 42%。
即使他們只有 20% 的預訂通過網站進行，而糟糕的用戶體驗只使他們損失其中的 15%（一個保守估計），也就是：
$4,370,000 × 0.20（網路來源收入）× 0.15（被糟糕的用戶體驗損失）= $131,100/年
每年損失超過 $13 萬。世界級餐廳網站重新設計的成本在 $15,000 到 $50,000 之間。投資回報率是荒謬的。
而且這不包括品牌損害。當潛在用餐者造訪你的網站並感覺它壞掉了，那會在他們進入餐廳大門之前影響他們對你餐廳的認知。
優秀的餐廳網站設計實際上是什麼樣子
那麼優秀的高級餐飲餐廳網站實際上應該做什麼呢？在多年建立無頭 CMS 驅動的網站後，以下是我的框架。
速度是第一印象
你的網站需要在 2 秒內載入。句號。這意味著：
- WebP 或 AVIF 格式的正確尺寸和壓縮影像
- 不在首屏上方自動播放影片（或者如果一定要播放，使用延遲載入、壓縮影片和靜態海報框架）
- 支持靜態生成或伺服器端渲染的現代框架
- 用於全球分發的 CDN
首頁應在 5 秒內回答 5 個問題
- 這個地方是什麼？
- 他們提供什麼類型的食物？
- 位置在哪裡？
- 我如何訂位？
- 現在是營業時間嗎？
就是這樣。其他所有內容都是次要的。一張令人驚豔的食物照片、單一行文案、地址、營業時間和一個大大的「預訂」按鈕。你可以在首屏下方有你美麗的故事敘述滾動體驗。但首屏上方的內容需要立即發揮功能。
菜單必須是 HTML，而不是 PDF
這是我最大的寵物厭惡。許多餐廳將他們的菜單放在 PDF 中。這對以下方面很糟糕：
- SEO：搜尋引擎可以索引 PDF 文字，但它不如結構化 HTML 內容的權重大
- 行動裝置：手機上的 PDF 很難導航
- 無障礙：大多數餐廳 PDF 是掃描圖像，使螢幕閱讀器完全看不到
- 更新：更改 PDF 菜單需要打開 InDesign、匯出和重新上傳
你的菜單應該是結構化數據──可由 Google 索引的 HTML、可由螢幕閱讀器讀取，以及可在 30 秒內從 CMS 更新。
預訂流程應該無摩擦
不要讓人們尋找預訂按鈕。它應該在：
- 標題導航中（始終可見）
- 在首頁英雄部分
- 在菜單頁面底部
- 在粘性行動頁腳欄中
無論你使用 Resy、Tock、OpenTable 還是自訂解決方案，整合應該感覺是原生的──而不是來自第三方系統的突兀彈出視窗。
攝影應該是例外的（但要最佳化）
高級餐飲本質上是視覺的。優秀的食物攝影是必不可少的。但沒有理由這些圖像不能以現代格式以適當的尺寸提供。英雄圖像在 AVIF 中以 200KB 的尺寸看起來可以很令人驚豔。你不需要未壓縮的 8MB TIFF。
2025 年最佳餐廳網站示例
讓我強調一些確實做對了網路存在的餐廳。
Eleven Madison Park (elevenmadisonpark.com)
乾淨、快速且優雅。首頁採用單一美麗的圖像和清晰的預訂 CTA 領銜。菜單是 HTML 格式的結構化內容。網站載入時間不到 3 秒。這證明你可以最少化且美麗，而不犧牲可用性。
Noma (noma.dk)
Noma 的網站在其 2025 年轉變時進行了重大重新設計，這表現了現代思維：編輯風格的布局、快速載入、強大的排版、清晰的信息層次。它感覺像一本雜誌，而不是 Flash 實驗。
Alinea (alinearestaurant.com)
Alinea 與 Tock 預訂平台緊密合作，使預訂流程幾乎無摩擦。網站精簡、載入快速，並將預訂放在首位。對於三米其林星級餐廳來說，它令人耳目一新地實用。
SingleThread (singlethreadfarms.com)
這個因其敘事──農場、團隊、哲學──同時保持優秀效能而脫穎而出。影像很美麗但適當最佳化，網站在行動裝置上運作良好。
| 餐廳 | Lighthouse 效能 | LCP | 行動評分 | 預訂點擊至預訂次數 |
|---|---|---|---|---|
| Eleven Madison Park | 72 | 2.8 秒 | 81 | 2 |
| Noma | 68 | 3.1 秒 | 76 | 2 |
| Alinea | 79 | 2.4 秒 | 85 | 1 |
| SingleThread | 65 | 3.4 秒 | 72 | 2 |
| 平均米其林網站 | 28 | 8.4 秒 | 41 | 4+ |
這些都不是完美的（我希望看到他們都在 90 以上），但他們領先業界平均水準遠遠超過。
優秀餐廳網站背後的技術堆疊
如果我今天從零開始建立高級餐飲餐廳網站，以下是我會使用的。
框架：Astro 或 Next.js
Astro 對於餐廳網站來說幾乎是完美的。它預設情況下不進行 JavaScript、生成靜態 HTML，並且開箱即用地優美地處理圖像最佳化。對於大多是內容的網站──菜單、照片、營業時間、位置信息──你不需要重型客戶端框架。
如果你需要更多動態功能（即時可用性、用戶帳戶、忠誠度計劃），Next.js 與用於內容頁面的靜態生成和用於動態功能的伺服器組件是正確的方式。
---
// src/pages/menu.astro
import Layout from '../layouts/Layout.astro';
import MenuItem from '../components/MenuItem.astro';
import { getMenuItems } from '../lib/cms';
const menuItems = await getMenuItems();
const courses = groupByCourse(menuItems);
---
<Layout title="Menu | Restaurant Name">
<main class="menu-page">
{courses.map((course) => (
<section class="course" aria-labelledby={`course-${course.slug}`}>
<h2 id={`course-${course.slug}`}>{course.name}</h2>
{course.items.map((item) => (
<MenuItem
name={item.name}
description={item.description}
price={item.price}
allergens={item.allergens}
dietary={item.dietary}
/>
))}
</section>
))}
</main>
</Layout>
結構化、語義、無障礙、快速。那個菜單頁面每次都會在 Lighthouse 上評分 95 以上。
CMS：Sanity、Contentful 或 Storyblok
餐廳團隊需要更新菜單、添加季節性內容和管理事件，而無需呼叫開發人員。無頭 CMS 使這成為可能。Sanity 是我對餐廳的首選，因為其即時協作編輯對團隊很有幫助，可自訂的 Studio 可以根據餐廳工作流程進行調整。
// Sanity 菜單項目的架構
export default {
name: 'menuItem',
title: 'Menu Item',
type: 'document',
fields: [
{ name: 'name', title: 'Dish Name', type: 'string' },
{ name: 'description', title: 'Description', type: 'text' },
{ name: 'price', title: 'Price', type: 'number' },
{ name: 'course', title: 'Course', type: 'reference', to: [{ type: 'course' }] },
{ name: 'image', title: 'Photo', type: 'image', options: { hotspot: true } },
{
name: 'dietary',
title: 'Dietary Info',
type: 'array',
of: [{ type: 'string' }],
options: {
list: [
{ title: 'Vegetarian', value: 'vegetarian' },
{ title: 'Vegan', value: 'vegan' },
{ title: 'Gluten-Free', value: 'gluten-free' },
{ title: 'Contains Nuts', value: 'nuts' },
{ title: 'Contains Dairy', value: 'dairy' },
],
},
},
],
}
託管：Vercel 或 Netlify
靜態網站在全球邊緣網路上。從世界任何地方的首位元組時間在一秒以內。自動 HTTPS。用於內容更改的預覽部署。這是這類網站的正確基礎設施，它要麼免費要麼對於餐廳規模流量來說非常便宜。
圖像管道：Cloudinary 或 Imgix
自動格式協商（Chrome 的 AVIF、Safari 的 WebP）、響應式尺寸、品質最佳化和藝術指導──都來自 URL 參數。你的攝影師一次上傳全解析度圖像，CDN 為每台設備提供正確版本。
如何修復高級餐飲網站
如果你是正在閱讀本文的餐廳老闆（或與餐廳合作的開發人員），以下是實踐性的藍圖。
第 1 階段：快速勝利（1-2 週）
- 在標題中添加預訂按鈕 ── 在每個頁面、每台設備上可見
- 壓縮所有圖像 ── 通過 Squoosh 或圖像 CDN 運行所有內容
- 移除自動播放影片或用最佳化的海報圖像替換
- 將 PDF 菜單轉換為 HTML ── 即使是簡單的文字頁面也比 PDF 更好
- 添加結構化數據 (JSON-LD) 用於餐廳架構 ── 這有助於 Google 直接在搜尋結果中顯示你的營業時間、菜單和預訂連結
{
"@context": "https://schema.org",
"@type": "Restaurant",
"name": "Restaurant Name",
"image": "https://example.com/hero.jpg",
"servesCuisine": "Contemporary American",
"priceRange": "$$$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Main St",
"addressLocality": "New York",
"addressRegion": "NY"
},
"starRating": {
"@type": "Rating",
"ratingValue": "2",
"bestRating": "3",
"author": {
"@type": "Organization",
"name": "Michelin Guide"
}
},
"acceptsReservations": true,
"hasMenu": "https://example.com/menu"
}
第 2 階段：適當重新建置（4-8 週）
- 選擇現代堆疊 ── Astro 或 Next.js 搭配無頭 CMS
- 投資專業食物攝影 ── 為網路拍攝（不只是印刷）
- 優先設計行動裝置 ── 超過 60% 的餐廳搜尋發生在手機上
- 整合預訂原生 ── Resy、Tock 或 OpenTable 適當嵌入
- 實施適當 SEO ── 本地 SEO 對餐廳特別重要
- 使用實際用戶進行測試 ── 看著有人在他們的手機上嘗試找到你的營業時間並訂位
對於認真對待此事的餐廳，與專門從事無頭網頁開發的團隊合作會帶來重大差異。餐旅業有特定需求──即時菜單更新、事件頁面、私人用餐詢問表、禮卡系統──受益於曾建立過它們的人。
第 3 階段：持續最佳化
- 每月監控核心網路生命力指標
- A/B 測試預訂 CTA
- 通過 CMS 更新季節性內容和菜單變更
- 漸進式添加新功能（線上訂購、虛擬導覽、廚師部落格）
常見問題
為什麼米其林星級餐廳的網站這麼糟糕？
主要原因是優先級不對及合作夥伴錯誤。餐廳聘請優先考慮視覺藝術性而不是網路效能和可用性的創意機構。廚師和餐廳老闆可以理解地專注於用餐體驗，而不是數位體驗。由於許多高端餐廳通過第三方平台和口碑訂滿，網站被視為宣傳冊而不是商業工具。結果是載入了繁重動畫、未最佳化媒體和隱藏預訂按鈕的網站。
什麼使好的餐廳網站？
好的餐廳網站在 3 秒內載入、清晰地傳達餐廳是什麼以及提供什麼、讓訂位變得毫不費力（理想情況下在 2 次點擊內）、以無障礙 HTML 而不是 PDF 展示菜單、在行動設備上看起來很漂亮，並使用結構化數據使搜尋引擎可以直接在結果中顯示關鍵信息。優秀的食物攝影很重要，但它必須適當最佳化。
餐廳菜單應該是 PDF 還是網頁？
網頁，總是。HTML 菜單對於 SEO 更好（Google 可以索引每道菜的名稱和描述）、無障礙（螢幕閱讀器可以解析它們）、行動可用性（無需放大 PDF）和可維護性（在幾秒內從 CMS 更新）。如果你需要可打印版本，提供 PDF 作為輔助下載選項，但你的主要菜單應該是原生網頁內容。
高級餐廳的最佳網站建立器是什麼？
對於真正高級的餐廳，Squarespace 或 Wix 等範本建立器不夠用──它們對於休閒餐飲還不錯，但缺乏高級餐飲要求的自訂和效能。最好的方法是靜態網站生成器，如 Astro 或 Next.js，搭配無頭 CMS，如 Sanity 或 Contentful。這給予你完整的設計控制、閃電般的快速效能和簡單的內容管理。如果你需要更簡單的東西，Squarespace 的更新範本作為起點還不錯。
餐廳網站重新設計成本多少？
使用範本平台的基本重新設計可能花費 $2,000-$5,000。現代無頭堆疊上自訂設計和開發的網站對高級餐廳來說通常運行 $15,000-$50,000，取決於複雜性、攝影需求和整合。具有廣泛自訂功能、動畫和多語言支援的高端項目可以達到 $75,000 以上。考慮到糟糕網站的收入影響，即使這個範圍的較高端也會迅速為自己買單。
我如何向我的餐廳網站添加線上預訂？
三個主要平台是 Resy、Tock 和 OpenTable。三者都提供可整合到你的網站中的可嵌入小工具。Tock 對於高級餐飲特別受歡迎，因為它的預付票券模型。關鍵是將預訂流程原生嵌入，而不是只是連結到第三方頁面──你希望用戶感覺他們仍在你的網站上。每個平台都為更深入的整合提供 JavaScript 嵌入代碼或 API 存取。
網站速度真的影響餐廳預訂嗎？
是的，顯著。Google 的研究一致地表明，頁面載入時間每增加一秒，轉換率下降 7%。對於轉換操作是進行預訂的餐廳網站，慢網站直接轉化為空餐位。行動用戶對載入時間特別敏感──53% 的行動用戶會放棄花費超過 3 秒載入的網站，超過 60% 的餐廳搜尋發生在行動設備上。
餐廳網站應該包括什麼結構化數據？
至少實施 schema.org 中的 Restaurant 架構，包括你的名稱、地址、料理類型、價格範圍、營業時間、預訂 URL 和菜單 URL。如果你有米其林評級，包括 starRating 屬性。也考慮添加 LocalBusiness 標記、特殊晚宴或快閃店的事件架構，以及如果你有常見問題頁面則添加常見問題架構。這個結構化數據幫助 Google 顯示豐富結果──你的營業時間、評級和預訂連結直接在搜尋中──這大大增加了點擊率。
餐廳網站既可以是藝術性又可以是功能性的嗎？
絕對可以，最好的例子證明了這一點。訣竅是將效能和可用性視為創意約束而不是障礙。美麗的排版、周慮的空白、令人驚豔的（但最佳化的）攝影和微妙的動畫可以創造反映餐廳身份的情感體驗，而不犧牲速度或可用性。訣竅是有一個既理解技術要求又理解創意願景的開發團隊──並在設計決定會傷害用戶體驗時施加反壓力。如果你需要在這個平衡方面的幫助，與我們聯絡──這正是我們所做的。