资源有限时,不要按“感觉慢”平均用力,而要先找出最影响用户打开首屏的环节:通常是服务器响应时间、首屏关键资源体积、阻塞渲染的脚本,以及图片和字体加载。判断顺序应是先测出时间花在哪,再处理占比最大且能快速验证的一项,最后复查同一指标是否下降。
打开浏览器开发者工具的“网络”面板,刷新页面,重点看三个时间点:TTFB(从请求发出到收到第一个字节)、首屏内容出现时间、页面主要资源加载完成时间。如果TTFB明显偏大,问题更可能在服务器、数据库、缓存或网络链路;如果TTFB正常但页面迟迟不显示,问题更可能在前端资源。
多人协作时,建议把这条观察写成一句话交付:“首页TTFB约X毫秒,首屏渲染延迟主要来自Y资源。”这样后续处理不会因为各自理解不同而返工。
按投入产出比,可以按下面顺序排查和处理。每一步都只改一个变量,便于复查。
TTFB高,先检查是否每次请求都查数据库、是否缺少页面缓存或对象缓存。适用条件是动态页面或访问量上升后变慢;判断结果是处理后TTFB下降。如果只能先做一件事,优先处理首屏最大且最晚加载的资源。它往往比优化页脚图片更能改善用户感知。
每个问题都记录四项:现象、测量值、可能原因、已定位原因。例如“首页打开慢”只是现象;“TTFB为2秒”是测量值;“可能原因包括数据库查询慢、未命中缓存、服务器带宽不足”是可能原因;只有通过对比测试确认的那一项,才写成已定位原因。
交付时不要只写“已优化性能”,而要写清楚:改了哪个资源、改前改后同一指标是多少、在什么网络和设备条件下测的。这样复查的人能复现,也能判断是否真的解决了原问题。
处理完成后,用同一浏览器、同一网络环境、同一页面再测一次。重点对比TTFB、首屏出现时间和最大资源加载时间。如果指标没有变化,说明处理方向可能不对,应回到观察步骤重新定位,而不是继续叠加优化项。
下一步:选当前最慢的一个页面,按“观察—判断—处理—复查”记录一轮数据,再决定是否推广到其他页面。