页面慢,用户不会等你,三秒是个坎,超过三秒还在转圈,一半以上的人会直接关掉。搜索引擎的体验评分也把加载速度算进去,慢站天然吃亏。所以网站开发里,性能这件事值得当正经活干。
但优化不能瞎改。先测,再动手。用工具把真站跑一遍,看清是图片拖后腿、服务器响应慢,还是脚本堵住了渲染。找到最大的那个瓶颈,解决它,收益远大于把每个参数都调到极致。
加载的大头通常在图片上。一张没压过的首页大图,两三兆很常见,光加载它就要好几秒。压缩是最直接的收益,同样的视觉效果,体积能降到三分之一。格式上,WebP 已经全浏览器支持,AVIF 更小但兼容性稍差,按访问群体来选。尺寸适配同样关键,把 PC 端上传的原图直接喂给手机,纯属浪费流量。响应式图片用 srcset 让浏览器自己挑尺寸,懒加载把首屏之外的图推迟到滚动时再取。
服务器这一层,常见的手段有这么几个。上 CDN,把静态资源分发到离用户最近的节点,异地访问的速度差异能缩小一半以上。开启 Gzip 或 Brotli 压缩,文本类资源能压掉七成体积。升级到 HTTP/2 或 HTTP/3,多路复用让并发请求不再排队。缓存策略要配对,静态资源设长缓存加指纹,HTML 设短缓存,改版时才能立刻生效。
还有一条常被忽略:静态资源和主站分域名。浏览器对单域名的并发连接数有限制,分出去之后加载能并行起来。
代码层面的优化,方向是减少阻塞。CSS 放在头部、JS 尽量放底部或者加 defer,别让脚本卡住首屏渲染。首屏用不到的 JS 按需加载,第三方统计和客服脚本改成异步,不然它们一卡,整个页面跟着等。JS 和 CSS 文件做压缩合并,减少请求数。重定向链要清理,每多跳一次就多一个往返。数据库查询加索引,循环里反复查库是最常见的性能杀手。
字体文件也常被忽略。中文字体动辄几 MB,网页里塞上两三个字重,首屏就能被拖慢一大截。解法是只加载页面实际用到的那些字,或者干脆改用系统自带字体,视觉效果差一点,速度快很多。
这些做完,再回头看测速结果,把前后数据对比一下。没有数据的优化等于自嗨,改完必须复测。
提一句容易被忽略的:网站开发里,性能优化最省事的做法是把它写进验收标准。首屏加载时间、图片体积上限、测速工具的目标分数,谈合同的时候就定下来。等到项目验收才提要求,改起来的动力和成本完全是两回事。