先量后改
提速前先用 PageSpeed Insights 与 Chrome DevTools 测出基线,明确瓶颈在图片、脚本还是服务器响应。
图片类动作
1)统一转 WebP 格式并压缩;2)按展示尺寸输出,避免大图小用;3)首屏外图片懒加载;4)使用响应式 srcset。
资源与脚本类动作
5)合并压缩 CSS / JS;6)非关键脚本延迟加载;7)字体子集化或使用系统字体;8)移除未使用的第三方库。
缓存与服务器类动作
9)开启浏览器缓存与 gzip / brotli 压缩;10)启用 CDN 静态资源加速;11)开启 HTTP/2 或 HTTP/3;12)优化服务器响应时间与数据库查询。