Google 的数据很直白：页面加载超过 3 秒，半数以上移动用户直接离开。网站速度不只影响用户体验，还直接关系到 SEO 排名和转化率。这篇围绕 Core Web Vitals 指标，讲讲怎么把网站调快。

一、理解 Core Web Vitals (CWV)

Google 推出的 CWV 是衡量网页用户体验的核心指标，直接影响搜索排名：

• LCP (Largest Contentful Paint)：衡量加载性能。应在 2.5 秒内完成最大内容渲染。
• INP (Interaction to Next Paint)：衡量交互性。响应时间应低于 200 毫秒。
• CLS (Cumulative Layout Shift)：衡量视觉稳定性。布局偏移分数应小于 0.1。

二、使用 CDN 加速（解决 LCP 瓶颈）

CDN（内容分发网络）是最有效的网站加速方式之一。通过将内容缓存到全球各地的边缘节点，让用户从最近的服务器获取内容。

CDN的优势：

• 降低网络延迟，提高访问速度
• 减轻源站压力
• 提供DDoS防护等安全能力
• 支持HTTPS加密传输

三、优化图片资源（降低 LCP/CLS）

图片通常占网页总大小的50%以上，优化图片是提速的关键。

• 压缩图片：使用TinyPNG、ImageOptim等工具压缩
• 使用WebP格式：比PNG/JPEG小30%以上
• 懒加载：首屏外的图片延迟加载
• 响应式图片：根据设备提供不同尺寸的图片
• 使用雪碧图：合并小图标减少请求数

三、启用浏览器缓存

合理设置缓存策略，让浏览器缓存静态资源：

• 设置Cache-Control和Expires头
• 使用ETag进行缓存验证
• 静态资源使用长期缓存+版本号策略

四、压缩和合并文件

• Gzip/Brotli压缩：压缩HTML、CSS、JS文件
• 合并文件：减少HTTP请求数量
• 代码压缩：移除注释和空白字符
• Tree Shaking：移除未使用的代码

五、优化CSS和JavaScript

• CSS放头部：避免页面闪烁
• JS放底部：或使用async/defer属性
• 关键CSS内联：首屏关键样式内联加载
• 代码分割：按需加载JavaScript模块

六、使用HTTP/2或HTTP/3

新版HTTP协议提供更好的性能：

• 多路复用，一个连接传输多个资源
• 头部压缩，减少传输数据量
• 服务器推送，提前发送资源

七、优化服务器响应

• 使用高性能的服务器和数据库
• 启用服务端缓存（Redis、Memcached）
• 优化数据库查询
• 使用负载均衡分散压力

八、性能测量工具

优化不能凭感觉，需要依赖数据：

• Google PageSpeed Insights：提供移动端/桌面端评分及优化建议。
• Chrome DevTools (Lighthouse)：本地开发调试神器，实时查看 Performance 面板。
• WebPageTest：支持全球多节点测试，提供详细的瀑布流图 (Waterfall Charts)。

总结

网站加速需要从多个层面入手，CDN是最简单有效的方式。结合图片优化、缓存策略、代码压缩等手段，可以显著提升网站性能，为用户带来极速体验。