csswizardry：一个网页性能工程师的开源工具箱

csswizardry：一个网页性能工程师的开源工具箱

csswizardry 这个仓库在 GitHub 上只有 1 个 Star。

但它背后的人叫 Harry Roberts，来自英国，干的事很专一——帮全球大型企业找网站速度问题，然后修掉它。

他同时是 performance.now() 大会的联合主席，这个会议专门面向网页性能领域的从业者。

1、 这个仓库是什么

严格来说，这不是一个传统意义上的开源项目。它是 Harry Roberts 的 GitHub 主页仓库，用来展示他的个人简介、开源贡献和联系方式。

Star 数量少不代表没价值。真正有用的东西散落在他名下的其他仓库里。

2、 他做了哪些开源项目

Harry 写的代码不多了，但留下来的几个工具各有各的用途：

Obs.js是一个上下文感知的网页性能监控工具。它不是又一个 Lighthouse 替代品，而是从运行环境出发，根据用户的设备状态、网络条件来动态调整性能采集策略。

defaults.css是一个轻量级 CSS 重置样式表。目标很明确：把浏览器默认样式统一，但不过度干预。适合那些喜欢自己写 CSS、不想被框架绑手脚的人。

ct.css用来检查网页 head 标签里的内容。把 script、link、meta 这些标签的加载顺序和依赖关系可视化，找出阻塞渲染的元凶。

inuitcss是一个基于 Sass 的 OOCSS 框架。扩展性强，适合大型项目长期维护。这个项目年纪不小了，但在 CSS 架构圈子里依然有人在用。

3、 为什么值得了解

网页性能这个领域，大多数人知道 Lighthouse 分数，知道 Core Web Vitals，但真正在生产环境里排查性能瓶颈的人不多。

Harry Roberts 干的就是这件事。他的客户包括一些全球知名的大型企业，工作内容是定位首屏加载慢、布局偏移、主线程阻塞这类具体问题。

他写的技术文章比代码更有影响力。如果你搜 CSS 性能优化、关键渲染路径、资源加载策略这些话题，大概率会读到他的文章。他对浏览器渲染机制的理解很透彻，讲东西喜欢用具体案例而不是泛泛而谈。很多前端工程师第一次接触关键渲染路径这个概念，就是从他的博客文章里读到的。

他还是 performance.now() 大会的联合主席。这个会议每年在荷兰举办，专门聚焦网页性能，议题质量在业内口碑很好。能当上这个会议的联合主席，说明他在圈子里的认可度不低。

4、 怎么用这个仓库

这个仓库本身不需要 clone 或安装。它的价值在于导航：

• 通过仓库里的链接找到 Obs.js、defaults.css、ct.css 这些工具的源码。每个项目都有独立仓库，文档和用法写得比较清楚
• 通过社交链接关注 Harry 的技术动态。他在 Twitter、Bluesky、LinkedIn 和 YouTube 上都比较活跃，经常分享性能优化的实战经验
• 如果你的业务在意网站速度，可以直接联系他做咨询。他目前接受 2025 年第四季度及之后的预约

对于普通开发者来说，最有用的是 ct.css 和 defaults.css 这两个工具。ct.css 可以帮你快速诊断 head 标签里的加载问题，defaults.css 能给你一个干净的 CSS 起点，不用从零开始写 reset。

5、 适合谁看

• 在做前端性能优化、想找现成工具辅助诊断的开发者
• 对 CSS 架构有兴趣、想了解 OOCSS 实践的人
• 想关注网页性能领域前沿动态的工程师
• 需要为大型项目做 CSS 选型、想找可扩展方案的团队

这个仓库的 Star 数不重要。重要的是它指向的那些工具和人，在网页性能这个细分领域里，确实有分量。

案的团队

这个仓库的 Star 数不重要。重要的是它指向的那些工具和人，在网页性能这个细分领域里，确实有分量。