Grand Café du Commerce
不用框架，不用CMS：一家街区餐酒馆不需要一座工厂。
- 年份
- 2026
- 制作周期
- 2 周
- 技术栈
- HTML/CSS · JavaScript · Google Analytics · Vercel
- 设计
- 开发
- 本地 SEO
- 流量统计
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- Lighthouse 性能
- 93/100
- 外部依赖
- 0
- 个 HTML 之外的请求
- 2
- Lighthouse SEO
- 100/100
需要解决的问题。
背景
Le Grand Café du Commerce 是一家位于里昂九区沃伊斯（Vaise）的法式餐馆（brasserie）。客人以街坊为主：午间的熟客，晚间的堂食。
限制
旧网站只有一个页面，不支持响应式，营业时间也没有更新。真正的需求只有三行：菜单、营业时间、订位方式。除此之外的一切，都只会是没有回报的开销。
对策
HTML、CSS，加一点点 JavaScript。不用任何框架、任何 CMS、任何数据库。成品瞬间加载，无需任何安全更新，托管费用为零。菜单在一个纯文本文件里就能修改。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
法式餐馆的调性，而非高级餐厅的调性
醒目的字体、酒红与奶油色的配色、朴实的菜品照片。过于讲究的视觉形象会吓跑午间的客人——而他们贡献了最大的营业额。
营业时间放在首屏
实时计算显示“营业至 22:00”，而不是一张七行的表格。这是被问得最多的问题，它值得一个直接的答案，而不是一份需要解读的文件。
菜单用 HTML，绝不用 PDF
PDF 菜单在手机上没法读，不能被索引，也无法被屏幕阅读器朗读。菜单是一个结构化的 HTML 页面，并标有价格。
项目配色
酒红
#6E2436
品牌识别、标题
奶油色
#F6F0E4
背景
墨色
#211E1C
正文
黄铜
#B08A4A
线条与细节
字体系统
标题字体
Libre Baskerville
正文字体
Source Sans 3
经典衬线字体，颇有传统法式餐馆招牌的神韵，仅用于标题——正文依然使用适合屏幕阅读的无衬线字体。
幕后的技术实现。
- HTML/CSS
- JavaScript
- Google Analytics
- Vercel
零依赖
没有需要更新的库，也就没有六个月后需要修补的漏洞。对于一个不会每月维护的餐厅网站来说，这是最负责任的选择。
一个 CSS 文件，一个 JS 文件
除 HTML 外只有两个请求。在基于框架的网站还没解析完它的 bundle 时，这个网站已经完整呈现。
征得同意后才统计流量
Google Analytics 只在用户明确同意后才加载。未获同意时，不调用任何第三方脚本——这不是锦上添花的选项，而是法国数据保护机构 CNIL 的规定。
网站如何被搜索到。
“Brasserie Vaise”（沃伊斯 法式餐馆）、“restaurant Lyon 9”（里昂九区 餐厅）
本地 SEO 先瞄准街区，再瞄准城市：那里的竞争弱十倍，意图强十倍。
结构化的营业时间
JSON-LD 中的 openingHoursSpecification：Google 显示的“营业中 · 22:00 打烊”正是由它提供的，这也省去了客人打电话确认的麻烦。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
无需额外投入即达 97/100
简单的网站更容易做到无障碍。语义化 HTML、经过核验的对比度、原生键盘导航：事后无需任何修补。
交付了哪些内容。
- 首页
- 菜单
- 订位
- 交通与营业时间
- 联系我们
项目的推进过程。
需求界定
确定三项需求，其余一概舍弃。
设计
法式餐馆调性、动态营业时间、HTML 菜单。
开发
零依赖的 HTML/CSS/JS，先征得同意再统计。
