客户说「网站卡」,第一反应往往是「是不是服务器不行,要不要升级」。我们接手排查的项目里,真正需要换服务器的其实不多,大部分问题在前端资源上。
先分清慢在哪一段。浏览器开发者工具的 Network 面板里,第一段是 TTFB,也就是服务器从收到请求到吐出第一个字节的时间。这一段长,才是服务器、数据库或程序的问题 —— 比如动态页面每次都重新查库、没开页面缓存、机房线路绕。这一段短、但整个页面还是慢,问题就在前端,跟服务器关系不大。
前端最常见的三样:图片、脚本、字体。图片没压缩、一张两三兆,或者直接用相机原图上传,几张就能把首屏拖垮;该用 WebP 的没转,该写死宽高的没写,图片加载时页面还会跳。脚本方面,同步加载的 JS 放在 head 里会堵住渲染,第三方统计、客服插件、地图各塞一段,累积起来很可观。外部字体也是一个隐性大头,尤其跨平台加载中文字体集。
排查顺序建议固定下来:先看 TTFB 定位服务器,再看资源总体积和单张图片,最后看渲染阻塞和加载顺序。反过来一上来就调服务器配置,很容易白折腾。
改动优先级也是一样:压缩并转格式图片、给图片标注尺寸、非首屏图片懒加载、把非关键脚本延后、合并外部字体请求,这几项通常不花钱就能把首屏时间压下来一大截。之后再考虑 CDN、页面缓存、对象存储这些要动架构的。
目标别定得太虚,首屏内容尽量控制在两三秒内出来就够了。另外提醒一句:上线时测的是开发环境,图片往往还没换成客户提供的正式素材,等资料一替换又慢回去,所以验收前要用真实内容再测一次。
时代网络