官网"打开慢"很少是单一原因。常见的是四件事叠加：图片没压、字体没配、缓存没设、首屏加载了不该加载的东西。上线前按这份清单过一遍，大部分问题能在交付前暴露。
一、先定指标
不要用"感觉快不快"判断。定三个指标：首屏内容出现时间（LCP）、布局偏移（CLS）、首次输入延迟（INP）。合同里写阈值，验收时用同一网络环境测三次取中位数。
国内访问还要区分运营商与地域：北京联通的测速结果和广东移动差别很大，测试点要写清楚。
二、图片
- 格式：优先 WebP/AVIF，PNG 只用于需要透明的场景。
- 尺寸：按展示尺寸的 1.5--2 倍出图，别拿 4000px 的原图直接塞进 400px 的容器。
- 懒加载：首屏以外的图延迟加载，首屏主图不要懒加载。
- 响应式：用
srcset提供多尺寸，移动端加载小图。
三、字体
中文字体文件动辄几 MB，直接自托管会把首屏拖垮。可行做法：按字符集切片（unicode-range 分片），或用系统字体栈兜底，只对标题用自托管字体。
如果用 <link> 引外部字体，注意国内可达性；自托管时设置 font-display: swap，避免字体加载期间文字不可见。
四、渲染阻塞资源
CSS 与同步脚本会阻塞首屏。把非关键 CSS 拆出来，脚本加 defer 或 async；第三方的统计、客服、地图脚本一律延后。
五、缓存与压缩
- 静态资源设置长缓存（
Cache-Control: max-age=31536000, immutable），文件名带 hash。 - HTML 用短缓存或协商缓存。
- 开启 gzip 或 brotli。
- CDN 只对静态资源开，动态接口按需。
六、首屏要加载什么
首屏只加载首屏要用的东西：轮播图第一帧、首屏字体、主 CSS。下滚才出现的模块、弹窗、客服组件，一律延后。
七、上线前的检查顺序
先测原始状态，再逐项优化，每改一项测一次。不要一次改十处再测，出问题无法归因。
八、验收记录
把三次测量结果、测试点、时间写进验收单。没有记录的性能优化，下次改版会全部退回原状。
声明：本文为技术实践分享，清单与示例代码仅作参考，不构成对任何产品或服务的推荐。