前端课就该对着性能指标学：web.dev 课程由 Chrome 团队出品

前端教程大多教「怎么实现」，很少教「实现得好不好」。web.dev 围绕性能、无障碍等可量化的指标组织课程，学完能直接用工具测自己的页面，看得到差距在哪，而不是停留在感觉上。

它解决什么问题

页面功能做出来了，加载慢、交互卡，却说不清差在哪，也不知道该优先优化哪一项。

网上前端最佳实践文章各说各话，缺一个和浏览器厂商口径一致的参照。

核心能力

先测分，再上课，按短板挑章节

别把 web.dev 当小说通读。先把要优化的页面丢进官方性能工具跑一次分，看哪些指标红了，再回到对应课程模块补原理，针对性最强，学完马上能验证效果。

中文是机器翻译，术语别照着背。读到翻译别扭的概念，切英文原文确认一次官方叫法，再回头查中文页效率更高。课程更新快，旧章节观点可能已被新文章修订。

同类工具怎么选

谁适合用

• 想系统补齐性能与最佳实践的前端开发者
• 负责老项目加载速度优化的工程师
• 想了解浏览器新特性动向的技术爱好者

怎么开始

1. 打开 web.dev，语言选简体中文。
2. 进入「学习」专区，从 Learn HTML 或 Learn CSS 选一门开始。
3. 每章末尾按提示动手改示例页面。
4. 把自己的站点放进官方性能测量工具跑一次分。
5. 按报告里的红色指标，回到课程找对应章节精读。

常见问题

中文是人工翻译吗？
部分中文内容由机器翻译生成，可能出错，关键概念建议对照英文原文。

和 MDN 有什么区别？
MDN 像语法字典，web.dev 更像围绕性能和体验的实践课程，两者搭配用。

完全免费吗？
是。课程、文章与配套工具均免费，没有付费墙，也不用注册。

授权与合规

Google Chrome 团队出品的开发者站点，课程与文章全部免费公开；中文版由机器翻译生成，可能存在翻译瑕疵。 官网：web.dev。