这次网站优化，我把 Lighthouse 跑到了 100

最近把站点做了一轮系统优化，跑 Lighthouse 的结果让我挺满意：

• Performance：100
• Accessibility：100
• Best Practices：92
• SEO：100

这不是单点“调参”出来的分数，而是把页面加载链路、资源策略、语义结构和可维护性一起梳理后的结果。

这轮优化在做什么

我这次的目标不是“只要分数”，而是让页面在真实网络和真实设备上都更轻、更稳、更快。核心思路可以概括为三件事：

1. 让关键内容更早可见；
2. 让非关键资源更晚加载；
3. 让结构语义与搜索引擎更易理解。

关键动作拆解

1) 资源层：先瘦身，再加载

• 控制首屏资源体积，减少不必要依赖；
• 图片尽量使用更高压缩比格式，并避免无意义的大图直出；
• 对非首屏资源延后加载，降低首屏阻塞。

2) 渲染层：减少主线程压力

• 收敛会阻塞渲染的脚本与样式处理；
• 减少首屏阶段的同步计算；
• 让页面先完成“可读”，再逐步增强交互。

3) 结构层：语义化和可访问性

• 补齐更清晰的语义结构（标题层级、地标区域等）；
• 对交互元素提供更明确的可访问属性；
• 让键盘与读屏路径更可预测。

4) 搜索层：把页面信息说清楚

• 保持标题、描述、正文主题一致；
• 提升页面信息密度和结构可理解性；
• 避免“只有视觉、没有语义”的内容组织方式。

为什么 Best Practices 还不是满分

Best Practices 92 说明“整体已健康，但仍有可继续优化的边角项”。
这通常不是功能不可用，而是一些更严格的工程细节还有提升空间，比如第三方资源策略、个别安全或兼容性提示等。

换句话说：站点已经可用且体验优秀，但工程上依然有进步余地。这个分数反而提醒我，优化是持续过程，不是一次性冲线。

这次优化带来的实际意义

对我来说，这组分数的价值不只是截图好看，而是它对应了几个真实收益：

• 首屏更快，用户更早看到有效内容；
• 页面更稳，交互更顺滑；
• 内容更易被理解，搜索和可访问性表现更可靠；
• 后续继续迭代时，有了更明确的性能基线。

接下来会继续把 Best Practices 往上推，同时保持其余三项稳定。
目标不是“偶尔高分”，而是“长期稳定地高质量交付”。