从89分到98分，一个创业网站的100天重生记

打开Google PageSpeed Insights，鲜红的59分刺痛了运营总监的眼睛，创业公司“景途旅行”的官网，经过两年迭代，代码已膨胀如臃肿的中年人，首页加载时间长达8.3秒，每增加1秒延迟，转化率就暴跌7%——这个数据在第三季度财报会上被反复提及，优化前100天,我们接过了这个烫手山芋。

第一步：诊断——寻找速度杀手

从89分到98分，一个创业网站的100天重生记

用GTmetrix爬取全站瀑布图，发现一个惊人事实：首页总共请求217个文件，总大小4.2MB，阻塞渲染的CSS文件有3个，JS文件12个穿插在首屏，最致命的是，一张1920×1080的未经压缩的景区照片，大小2.1MB,占到了总资源的一半。

我们用WebPageTest进行三次模拟测试，在深圳节点、4G网络下得到基准数据：首字节时间（TTFB）1.2秒，完全加载时间9.8秒，速度指数（Speed Index）高达12890,用户要盯着白屏超过2秒才能看到首屏标题。

第二步：压缩与合并——给代码减负

首先对图片动刀，原来设计团队用PS导出的JPEG质量设为95%，我们改用TinyPNG批量压缩同一批图片，将质量降至82%——肉眼几乎看不出差异，但图片体积从2.1MB骤降至487KB，接着用WebP格式作为备选，配合<picture>标签为旧浏览器提供JPEG降级方案，光这一步，首页总大小就从4.2MB降到2.6MB。

CSS与JS的合并是第二场战役，原来的前端框架引入了14个独立的CSS文件和22个JS文件，每个文件都有独立的HTTP请求，我们用Webpack搭建打包流程，将首屏关键CSS内联到HTML头部（Critical CSS），其余CSS合并为2个文件，JS按照“首屏必需”和“延迟加载”分类：地图组件、聊天插件、统计代码全部标记为defer和async，首屏只留下4个核心JS文件，合并后，请求数从217降为47，体积从4.2MB变成1.8MB。

第三步：缓存——让回访用户不用再等

浏览器缓存策略往往被忽视，但它能砍掉至少70%的二次加载时间，我们对静态资源设置强缓存：字体文件缓存365天，图片缓存30天，CSS/JS缓存7天，使用Cache-Control: immutable标识不变资源，避免304验证，API接口则采用协商缓存，服务端返回ETag，配合Last-Modified。

更聪明的是在Nginx层部署了页面缓存，针对网站首页和目的地列表页（约200个静态页面），我们开启Nginx FastCGI Cache，将整页HTML缓存5分钟，当用户刷新时，Nginx直接从内存返回缓存文件，不再经过PHP和数据库，测试显示，缓存命中后的TTFB从1.2秒降至45毫秒。

第四步：CDN——让全球用户不再卡顿

景途旅行的用户集中在华东和华南，但来自新疆、西藏的订单虽然少，转化率却极高——原因无他，全国用户都需要的服务，我们接入腾讯云CDN，覆盖38个国内节点，原静态资源位于杭州一台ECS上，延迟到新疆用户可达120ms以上；改用CDN后，新疆节点命中率达92%,延迟降至15ms以内。

重点是将动态资源也加速：对用户登录、查询接口，启用CDN的动态加速（DSA），通过智能路由选择最优链路，原来跨运营商的网络抖动导致部分用户接口响应超过3秒,DSA优化后稳定在800ms以内。

第五步：服务器——从虚拟机到裸金属

原来的配置是2核4G云服务器，Nginx+PHP7.3+MySQL5.6，高峰期服务器平均负载升至15，CPU使用率打满，第一步，升级到4核8G裸金属服务器；第二步，启用PHP8.1+JIT编译器，页面渲染时间下降40%；第三步，MySQL开启Query Cache并优化慢查询——一个关联6张表的酒店列表SQL，执行时间从2.3秒优化到0.12秒。

同时配置Nginx的gzip压缩，将文本类资源压缩率提升至70%，开启HTTP/2，多路复用让并发请求不再排队，最后启用TCP Fast Open和Brotli压缩算法，下载CSS资源的速度又快了18%。

优化前后实测数据对比

我们使用Lighthouse v10在模拟Moto G4、3G网络下重复测试3次取平均值：

优化前：性能评分59，LCP 7.8秒，FID 310ms，CLS 0.32，Total Blocking Time 980ms。 优化后：性能评分98，LCP 1.6秒，FID 45ms，CLS 0.04，Total Blocking Time 120ms。

更直观的商用数据：GTmetrix的完全加载时间从9.8秒降至2.1秒，在真实的4G网络环境中，页面的First Paint时间从2.3秒缩短至0.8秒；

第101天的早晨：运营总监发来截屏，某用户从朋友圈扫码进入首页，白屏仅持续0.7秒就看到了推荐卡片，那次点击，转化了当月的最大一笔订单——一个价值2.8万元的定制欧洲团，速度,真的能换回真金白银。