Au P'tit Zinc
在以图片为主的网站上取得95分性能与100分无障碍：这正是挑战所在。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 设计
- 开发
- 本地 SEO
- 摄影（指导）
由KAYZEN上线在Vercel地址上的演示版本；正式域名归客户所有。
- Lighthouse 性能
- 95/100
- Lighthouse 无障碍
- 100/100
- Lighthouse SEO
- 100/100
- 个移动端常驻操作
- 3
需要解决的问题。
背景
Au P'tit Zinc 是一家位于里昂五区皮埃尔-西兹河岸街（quai Pierre-Scize）的小酒馆，1992 年开业至今。这家街区老店既以菜品闻名，也以深夜的氛围著称。
限制
这家店靠氛围打动人，因此靠的是照片：温暖的灯光、吧台、座无虚席的店堂。然而以照片为主的餐厅网站几乎总是很慢，而一半的访问来自手机——人在户外，晚上七点半，想找到地址并订位。
对策
让沉浸感与速度并存。首屏以最高加载优先级展示一张宽幅大图，其余一切延迟加载。三个真正的操作——订位、致电、导航——在页面任何位置都能一步触达。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
温暖的深色主题
炭黑底色、铜色点缀、以琥珀色调为主的照片。这里的深色并非赶时髦：它还原的是人们决定出门时，店里那个时刻的光线。
三个操作，始终触手可及
订位、致电、导航。移动端的吸附式操作栏让它们在整个滚动过程中始终可用。80% 的访客来这里，只为做这件事。
没有陷阱的轮播图
默认关闭自动播放，支持键盘控制，鼠标悬停时暂停；如果用户设置了减少动态效果，则完全停止。自动滚动的轮播图，是网络上最普遍令人厌恶的组件。
项目配色
炭黑
#171412
背景
铜色
#B4763A
强调色、行动
象牙白
#F3EDE4
正文
酒瓶绿
#2E4034
次要区块
字体系统
标题字体
Playfair Display
正文字体
Inter 400
店名和标题采用高对比度衬线字体——传递老式锌吧台的气质——菜单则使用中性的无衬线字体，必须一秒就能读懂。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
只有一张优先加载的图片
首屏图片预加载，并通过属性声明尺寸；其余图片全部延迟加载。正是这一点，让一个摄影网站拿到了 95 的性能分。
现代格式，按需尺寸
每张照片都有多种宽度，通过 srcset 提供。手机不会下载桌面版大图——这是餐厅网站上最主要的资源浪费来源。
第三方订位系统，延迟加载
第三方服务商的订位模块有数百 KB。它只在点击“订位”时才加载，而不是在页面加载时。
网站如何被搜索到。
就近类搜索
“Bistrot Lyon 5”（里昂五区 小酒馆）、“restaurant quai Pierre-Scize”（皮埃尔-西兹河岸 餐厅）、“où manger Vieux Lyon le soir”（里昂老城 晚上去哪吃）。这些都是即时决策型搜索，往往是在距餐厅不到一公里的地方发起的。
完整的 Restaurant 结构化标记
Restaurant 类型的 JSON-LD，包含地址、坐标、营业时间、价格区间、菜系和菜单链接。Google 本地信息面板中展示的正是这部分内容。
与 Google 商家资料保持一致
网站与商家资料上的名称、地址和电话逐字完全一致。任何差异——哪怕只是标点——都会削弱本地 SEO。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
深色背景上的 100/100
深色主题的陷阱，是炭黑底上的灰色文字。所有颜色组合都已提升到 4.5:1 以上；叠在照片上的文字则加了一层足够浓的遮罩，无论底图如何都能达到阈值。
交付了哪些内容。
- 首页
- 菜单
- 店铺环境
- 订位
- 交通与营业时间
- 联系我们
项目的推进过程。
摄影指导
选片与修图：网站的价值取决于它的图片。
设计
深色主题、操作栏、可控的轮播图。
开发
优先加载图片、srcset、延迟加载订位系统。
本地 SEO
Restaurant 结构化标记，与 Google 商家资料保持一致。
