上线前的前端性能检查清单

性能优化不一定从复杂的监控系统开始。对于内容型网站，上线前先把资源体积、加载顺序和页面稳定性检查一遍，通常就能避免大部分明显问题。

这份清单关注的是可以快速执行、容易验证的项目。

图片是否匹配展示尺寸

图片经常是页面中最大的资源。首先检查原始图片尺寸是否远大于实际展示尺寸，再根据内容选择合适的格式：照片通常使用 WebP 或经过压缩的 JPEG，带透明通道的界面素材可以使用 WebP 或 PNG。

同时为图片设置明确的宽高，浏览器就能在资源完成加载前预留空间：

<img
  src="/images/article-cover.jpg"
  alt="文章封面"
  width="1120"
  height="630"
  loading="lazy"
/>

首屏主图不应延迟加载，文章列表中位于首屏之外的图片则适合使用 loading="lazy"。

字体是否阻塞正文

个人网站没有必要加载过多字体和字重。系统字体可以减少请求，并让中文正文更快显示。如果确实需要自定义字体，应只保留页面使用到的字符集和字重。

字体策略需要以“正文能够尽快阅读”为目标。设计上的微小差异，不应该换来长时间的空白文本。

JavaScript 是否真的必要

内容网站的大多数页面可以直接由 HTML 和 CSS 完成。每增加一个前端组件，都要考虑它是否带来了用户能够感知的价值。

检查构建产物时，我会特别留意以下情况：

• 只为了一个小效果而加载完整组件库；
• 页面没有交互，却发送了大量客户端 JavaScript；
• 多个依赖实现相同功能；
• 第三方统计脚本阻塞主要内容。

静态生成框架的优势之一，是可以默认不向浏览器发送组件运行时代码。只有明确需要交互的局部区域才进行客户端加载。

页面是否发生明显位移

图片、广告位、异步组件和字体替换都可能让已经出现的内容突然移动。检查时可以在浏览器中限制网络速度，观察标题、正文和按钮是否在加载过程中改变位置。

固定格式的元素应该给出稳定尺寸。例如文章封面可以使用 aspect-ratio，导航栏可以设置固定高度。这样资源加载状态不会改变整体布局。

构建结果是否可缓存

静态资源文件名通常包含内容哈希，可以设置长期缓存；HTML 则需要在发布新版本后及时更新。多数静态托管平台会自动处理基础缓存策略，但上线后仍应检查响应头和实际命中情况。

最后，用真实手机和普通网络打开一次网站。性能报告提供数据，真实设备则能暴露字体过小、点击区域不合理和首屏内容被遮挡等体验问题。两种检查结合，才算完成一次有效的上线验证。