为什么速度重要
一半的人等超过 3 秒就关网站。访客不都是新手机加快 Wi-Fi——有人旧手机在火车上。项目老板也要想到他们。
好消息：最大提速往往来自一件事—— 图片。手机直出的照片轻松就能到 5 MB；网站只要十分之一。
跟我看：用 Lighthouse 测量
Lighthouse 是 Chrome 内置工具：
- 打开网站（线上版，不是 localhost）。
- F12 → Lighthouse 标签 → Analyze page load。
- 得到 0–100 分：性能、无障碍、SEO——最重要的是 具体改进建议。
常见提示和做法：
| Lighthouse 提示 | 怎么做 |
|---|---|
| Properly size images | 缩小图片（见下） |
| Serve images in next-gen formats | 存成 WebP |
| Image elements do not have width/height | 加 width 和 height |
| Links do not have descriptive text | 别写”点这里”，写链接去哪 |
缩小图片
- 尺寸：网站 hero 图约 1200px 宽，普通图约 600px。任何编辑器都能改，在线也行（如 squoosh.app）。
- 格式：WebP 同质量比 JPG 小约三分之一。
- 懒加载：首屏以下的图等访客滚到再加载：
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />轮到你了 💪
- 用 Lighthouse 测网站，记下性能分——这是起点。
- 找网站最大的 3 张图（F12 → Network → 按 Size 排序）。
- 缩小（尺寸 + WebP），除顶部第一张外都加
loading="lazy"。 - 再测，对比分数。在
LAUNCH.md写：之前 → 之后。 - 加分：关 Wi-Fi 用手机试。感觉怎样？
💡
别指望 100 分。 大网站也就 70–90。重要的是进步：60 到 85 是访客能感觉到的胜利。
✅
检查一下： 你知道 Lighthouse 前后分数。图片缩小、WebP、懒加载。手机加载明显更快。
这堂课你要记住
- 速度 = 访客留下。3 秒是极限。
- Lighthouse 告诉你具体改什么。
- 最大杠杆：更小的图（尺寸、WebP、懒加载）。
© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款