城市服务官网，不能让市民等3秒
图片WebP转码、代码压缩合并、CDN全站加速、浏览器缓存与懒加载，把Core Web Vitals三项指标压到"良好"区间，让办事页面在4G下也能秒开。
城市服务站慢，慢在哪四个地方
我们接过的提速项目，慢的原因九成不在服务器，而在图片、脚本和缓存策略。
首屏图几MB没人压
设计师导出的PSD原图直接上传，一张banner 3MB，手机在4G下光等图就要3秒，市民早切走了。
第三方脚本排满队列
统计、客服、地图、天气插件一股脑塞进head，同步加载阻塞渲染，首屏白屏时间全花在等这些外部脚本上。
没CDN也没缓存
全国市民都回源郑州同一台服务器，静态CSS/JS每次都重新下载， Repeat访问和首次访问一样慢。
代码没压缩也没合并
十几个CSS文件、二十几个JS请求，没压缩、没合并、没按需加载，光建立HTTP连接就把时间耗光了。
提速不是换服务器，是把每一颗请求都管住
我们按"图片管线→静态资源→CDN与缓存→脚本调度→性能监测"五个环节逐一定向优化，而不是笼统地说"帮您优化一下速度"。
8年城市服务建站经验，我们把LCP、FID、CLS三项Core Web Vitals作为交付底线，不优化到"良好"不交付。
图片WebP与多尺寸
全站图片批量转WebP，按设备宽度输出多尺寸，首屏图inline占位防抖动，平均图片体积下降70%。
代码压缩与合并
CSS/JS去掉注释与空白，按路由拆包合并，首屏只加载关键CSS，其余异步注入，请求数从30+降到8个以内。
CDN全站加速
静态资源接入全国CDN节点，图片与JS缓存到边缘，外省用户访问延迟从200ms压到30ms以内。
浏览器缓存策略
静态资源设强缓存+内容指纹，HTML设协商缓存，二次访问几乎不发请求，Repeat PV秒开。
懒加载与预加载
非首屏图片延迟加载，关键字体与首屏图preload，不阻塞渲染；第三方脚本defer或异步，不卡主线程。
性能真实监测
接入真实用户RUM监测，按城市、设备、网络分桶看LCP，发现哪个地区变慢立即定位，而不是靠猜。
五个模块，把每一颗请求都管住
图片管线
上传自动压缩、WebP格式、多尺寸适配、首屏图占位，后台编辑不用手动改图，发布即优化。
静态资源治理
CSS/JS压缩合并、Tree-shaking去掉未用代码、字体按unicode-range分包，首屏加载体积砍半。
CDN与缓存
全国CDN节点+边缘缓存+内容指纹，动态接口走源站，静态资源走CDN，各走各的最快路径。
脚本调度
第三方统计、客服、地图脚本按需加载，首屏只留关键脚本，其余在空闲时间或用户交互后再加载。
性能监测
RUM真实用户监测+ Synthetic定时拨测，按城市和设备分桶，变慢5分钟内告警。
五步交付，提速前后数据对比说话
性能基线诊断
用Lighthouse与真实用户数据跑一遍全站，输出当前LCP、FID、CLS与请求瀑布图，列出最该先修的三个点。
优化方案设计
按收益/工作量排序优化项，先做高收益低工作量的图片与CDN，再做代码与脚本治理，输出排期。
优化实施
图片转码、代码压缩、CDN接入、缓存策略、脚本调度并行推进，每步在测试环境验证不影响功能。
复测对比
上线后再跑一轮Lighthouse与真实用户监测，对比优化前后三项Core Web Vitals，出报告。
持续监测
RUM长期挂着，新版本发布自动回归性能，发现哪次更新把速度拖慢了立即回滚。
页面提速常被问的五件事
Q1：换台更好的服务器是不是就快了？
不一定。我们接过的项目里，八成像慢在图片没压、脚本没管、CDN没接，升级服务器只能解决数据库慢一类问题，解决不了前端白屏。
Q2：WebP会不会影响老浏览器？
我们用picture标签同时输出WebP与JPG，新浏览器走WebP，老浏览器自动降级JPG，不会出现图片裂掉。
Q3：CDN会不会把内容缓存成旧的？
不会。HTML不缓存、静态资源带内容指纹，后台发新版本自动刷新CDN缓存，发布后5分钟内全国节点生效。
Q4：优化会不会改坏现有功能？
不会。所有优化在测试环境先跑，核心流程（咨询、报修、登录）回归一遍再上线，灰度切流观察一周再全量。
Q5：优化完以后还会再慢回去吗？
会，如果后续随意加大图、加脚本。我们把图片压缩、脚本按需加载做进后台与发布流程，新内容默认按优化规则走。