一、先处理图片
图片通常是页面中体积最大的资源。上传前应裁剪到实际展示尺寸，照片优先使用 WebP 或 AVIF，图标则考虑 SVG。给图片写明 width 和 height，浏览器就能提前保留空间，减少内容跳动。
二、避免阻塞首屏的资源
放在页面头部的大段脚本会阻止 HTML 继续解析。自身脚本通常可以放在正文末尾或增加 defer。首屏之外的图片使用 loading="lazy"，但首屏主图不应懒加载，否则反而延迟关键内容。
三、谨慎引入字体与第三方库
一套完整中文网络字体可能有数兆字节。如果系统字体已经能满足阅读需求，就没有必要额外下载。第三方库也应基于实际价值选择：只为一个简单效果引入庞大依赖，维护成本和网络成本都不划算。
四、为静态资源设置缓存
CSS、脚本和图片适合使用较长的浏览器缓存。资源内容更新时，可以在文件名中加入内容哈希，让新版本获得新地址。HTML 缓存时间宜更短，以便用户及时获取最新资源引用。
五、测量真实结果
优化前后都应测量。浏览器开发者工具的 Network 面板能查看资源大小和耗时，Performance 面板能发现长任务。还可以关注三类用户体验指标：
- LCP：主要内容何时显示出来。
- INP：用户操作后页面响应是否及时。
- CLS：加载过程中布局是否意外跳动。
性能优化不等于追求满分，而是优先解决对用户影响最大、成本合理的问题。