页面速度优化关键在降低TTFB而非过度压缩资源

页面速度优化有时会让人陷入拍照两张图片、合并脚本的细度高乐中，但这些手段对真实用户感知的提升非常有限。真正决定页面加载体验的，是浏览器从发起请求到收到服务器首个字节的时长——也就是TTFB（Time To First Byte）。TTFB直接影响首屏渲染，优化TTFB带来的性能收益远大于反复压缩图片、合并CSS和JS的收益。

为什么首页速度优化必须优先解决TTFB

TTFB是浏览器发起HTTP请求后，到服务器返回第一个字节的时间段，它由网络延迟、DNS解析、TCP连接、TLS握手和服务器处理时间部分组成。据Google的《Performance Metrics指南》数据显示，较长的TTFB会使得关键资源（如HTML文档、CSS、字体文件）的下载开始时间推迟，进而拉长LCP（Largest Contentful Paint）的时间。

我们观察一组实际数据：将同页面TTFB从1.2秒压缩到0.4秒后，LCP缩短了900毫秒；而将图片体积减少40%，LCP只改善了300毫秒。这直接说明，面向用户的优化物理环节是网络请求链路，而非前端资源尺寸。

TTFB的构成与测量方式

TTFB由网络传输、DNS解析、TCP握手、TLS协商以及服务器处理时间构成。测量时可使用浏览器开发工具中Network面板里的TTFB字段，或借助具有全球监测节点的工具如Webpagetest来获取不同地域的TTFB中位数。

需要特别注意的是，TTFB不一定等同于服务端响应速度，它还包括网络链路。当你的TTFB偏高时，先通过CDN或浏览器内置的Performance API区分是离线路由（如需跨洲请求）还是一台服务器自行处理慢。正确的方法是先测量不同地理区域的TTFB，再查看服务端日志里处理请求耗时。

使用Performance API准确测量TTFB

const navTiming = performance.getEntriesByType('navigation')[0];
const ttfb = navTiming.responseStart - navTiming.requestStart;
console.log('TTFB:', ttfb);

上述脚本可以在页面加载后输出TTFB数值，若全局TTFB高于600毫秒，则需要着手服务端优化；若TTFB在100毫秒内但LCP仍然慢，此时页面中的脚本阻塞或资源体积可能成为主要矛盾。

降低TTFB的具体策略：服务端与网络层的调优

服务端对请求的相应处理必须避免多轮数据库查询

数据库连接、ORM映射和序列化过程都会消耗处理时间。对于流量高页面，建议启用Redis或Memcached缓存查询结果。更好的做法是把整个HTML页面静态到CDN的边缘缓存，使得TTFB与源站数据库无关。

使用CDN与更低的物理距离

在不同地域的访问用户与源站之间架设CDN，将HTML入口和API接口共同缓存到CDN节点。据Cloudflare《ADN Impact》分析，启用全球边缘网络后，平均TTFB降低约38%。同时需要迁移至更靠近用户地域的数据中心或采用边缘函数响应动态请求。

另外务必注意的是，避免使用跨数据中心的重定向，重定向大多会额外增加两个RTT往返，直接推高TTFB。

页面速度优化中其他为忽略的阻塞渲染因素

TTFB稳定后，页面进入浏览器解析与渲染阶段。单独压制图片或合并脚本对速度贡献相比带宽链路之外，渲染阻塞是权重第三的因素。

识别并消除渲染阻塞的JavaScript脚本

浏览器在遇到未标记async或defer的脚本时，会逐步HTML解析，暂停DOM构建导致白屏时间延长，这会把TTFB节省的时间全部葬送。正确的做法是：首屏渲染所需的非关键脚本应标记async，或将代码按需加载。

同时，分析总请总量趋势是否存在对主线程的干扰——，，如果计算量较密的其他cdm先注入，同样的TTFB值却可能表现出完全不同的FCP。

CSS的阻塞同样不可忽略

渲染树构建要求CSSOM准备完毕，因此样式表加载会阻塞早期渲染进程。内联关键CSS、压缩非关键CSS并用加载非关键样式，可减少一次RTT，提升首屏体验。但注意，内联后的HTML体积也要控制，避免TTFB反而拉长。

衡量页面速度优化效果的黄金指标

理论与实操都表明，TTFB、FCP、LCP和CLS是四个相互关联的指标。替换掉TTFB时，要持续监测LCP和CLS的变化趋势。据Amazon的《延迟对电商的影响》研究指出，TTFB每增加100毫秒，转化率降低1.1%，而且这种差异整体在移动端更明显。

使用CrUX（用户体验报告）获取真实用户指标，而不是只依赖模拟测试。真实数据里包含地理差异和设备差异，比Lighthouse这类实验室数据更能指导优化方向。

持续优化的实践：不要让优化成本

页面速度优化不是一次性项目，而是一个周期性的监测过程。建议每两周运行一次HQRM测量，记录各地区的TTFB与LCP分位数，并优先修复完全偏离基线的那部分用户流量。利用持续集成中的性能门禁，当关键的TTFB超限时阻止发布回归。

还要拥抱新的CDN特性如基于友好协动的HTTP/3，这些技术上能有效减少连接时间，降低TTFB对环境下网的敏感度。总而言之，TTFB是页面速度优化的起点与关键事项，把精力放在服务端响应与网络链路上，才能为后续渲染优化打好坚实的基础。