Damien Mugnier
97、100、100、100：在图片密集的网站上交出无可挑剔的Lighthouse成绩。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- React · Vite · Tailwind · Vercel
- 设计
- 开发
- 摄影指导
- 本地 SEO
由KAYZEN上线在Vercel地址上的演示版本；正式域名归客户所有。
- Lighthouse 性能
- 97/100
- 无障碍、最佳实践、SEO
- 100/100
- 张优先加载图片，其余全部延迟
- 1
需要解决的问题。
背景
Damien Mugnier 是一位瓷砖铺贴与泥瓦工匠，工作室位于里昂西南部的博瓦隆（Beauvallon）。他专注于大板瓷砖、大理石、天然石材和露台工程，服务高端客户。
限制
高端定位只能靠图片来证明：大板瓷砖铺得好不好，看的是砖缝和切口，而不是文字。因此网站必须以摄影为核心——而众所周知，这正是网站变慢的配方。
对策
把性能当作设计约束，而不是最后阶段的优化。每一张照片在集成之前都经过重新处理、裁切，并以多种宽度提供。结果：一个几乎完全由视觉内容构成的网站，性能得分 97——其余三项全部满分。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
以材料为色板
石米色、大理石灰、深黑色。色板取自实际铺设的材料；网站与作品说着同一种语言。
大图，紧凑构图
整个房间的广角镜头会淹没工艺细节。构图紧扣切口、砖缝和衔接处——普通铺贴工与真正工匠之间的差距，正体现在这些地方。
文字不多，但字字精到
在这种定位下，长篇文字只会稀释印象。每个页面只有寥寥几句精准的话，使用准确的材料术语。
项目配色
石色
#D9CFC0
背景、表面
大理石灰
#7F8489
结构
深黑
#151719
正文、对比
黄铜
#A3813F
细节点缀
字体系统
标题字体
Cormorant Garamond 600
正文字体
Inter 400
纤细修长的衬线字体承载定位，低调的无衬线字体承载信息。字体为照片服务，绝不反过来。
幕后的技术实现。
- React
- Vite
- Tailwind
- Vercel
集成之前先定图片预算
一开始就规定了每个页面的最大体积；图片按这一上限来准备。这与通常的做法正好相反——通常是发现网站变慢之后才去优化。
全面采用渐进式加载
只有一张图片优先加载，其余全部延迟加载，并声明尺寸，确保不出现任何布局偏移。
不使用任何动画库
过渡效果全部用纯 CSS 实现。在一个完全依靠图片的网站上，多加一百 KB 的动画 JavaScript，就会丢掉那些决定胜负的性能分数。
网站如何被搜索到。
按材料搜索
“Pose carrelage grand format Lyon”（里昂 大板瓷砖铺贴）、“marbre salle de bain sud-ouest lyonnais”（里昂西南部 浴室大理石）、“terrasse pierre naturelle”（天然石材露台）。高端客户搜索的是材料，而不是工种。
图片有描述、有命名
描述性的替代文本和清晰明确的文件名。在装修收尾类行业，图片搜索是实实在在的获客渠道。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
图片网站也能拿到 100/100
每张照片都配有有用的描述——材料、规格、房间——而不是空白或重复的替代文本。视觉型网站并非注定无法无障碍访问。
交付了哪些内容。
- 首页
- 大板瓷砖
- 大理石与天然石材
- 露台
- 案例作品
- 报价
项目的推进过程。
性能预算
集成之前先确定每个页面的最大体积。
摄影指导
选片、紧凑构图、多宽度输出。
设计
材料色板，简短精准的文字。
开发
纯 CSS、渐进式加载、声明尺寸。
