把“网站打开慢原因”拆成页面任务,核心做法是:先按页面类型分组,再对每组页面分别测量“服务器响应、资源下载、渲染阻塞、第三方脚本”四段耗时,最后把耗时最长的那一段变成一张具体的待办卡片。人手有限时,不要一次优化全站,而是先处理首页、主要落地页和转化页这三类高价值页面。
一个页面从请求到可见,时间大致花在四段上。每段对应不同的排查动作和不同的负责人,拆任务时要把它们分开写,否则容易出现“大家都在优化,但没人知道慢在哪”。
curl -o /dev/null -s -w "%{time_starttransfer}\n" 页面地址。结果说明什么——如果这项超过几百毫秒,优先查后端、数据库、缓存和主机,而不是去压缩图片。<head> 里的 <script> 是否带 async 或 defer。结果说明什么——阻塞脚本多,页面会白屏很久,任务应写成“给非关键脚本加 defer”。全站平均速度会掩盖问题。首页可能因为轮播图和第三方脚本变慢,文章页可能因为服务器查询变慢。拆任务时至少分成三组:首页与频道页、内容详情页、表单或下单页。每组各测一次,记录上面四段耗时,然后只把最慢的那组排进本周任务。
判断依据很简单:如果某一组页面的 TTFB 明显高于其他组,问题大概率在后端或缓存策略;如果各组 TTFB 接近,但下载和渲染时间差异大,问题在前端资源。这个对比能避免把后端问题误判成图片问题。
curl 记录三次取中间值。结果说明什么——高于 500 毫秒就开一张“后端与缓存”任务卡;低于 200 毫秒则暂时跳过服务器优化。<head> 中同步脚本数量。结果说明什么——数量大于两个时,先给统计和客服脚本加 defer,这是改动小、风险低的一步。先做“影响面大、改动小、可回滚”的任务。典型顺序是:先处理阻塞脚本和过大的首屏图片,再处理缓存和 TTFB,最后才考虑架构级改动。原因是前两类改动通常只涉及模板或资源文件,验证快;后端和架构改动影响面大,需要更多测试时间。
如果只能做一件事,就选样本页面中耗时最长的那一段,只优化这一段,并记录前后数据。不要同时改五个地方,否则无法判断哪个改动起了作用。
下一步:打开开发者工具的 Network 面板,对选定的三个样本页面各刷新一次,把 TTFB、最大资源和阻塞脚本三项数据记在同一张表里,然后只把排名第一的问题写成一张任务卡。