电商网站速度优化：页面更快，转化更高

网站速度直接影响电商收入。Amazon 发现，每增加 100ms 延迟就会损失 1% 的销售额。Google 将页面速度作为排名因素之一。Walmart 则发现，加载时间每缩短 1 秒，转化率就提升 2%。对于电商网站而言，速度优化不是可有可无的选项，而是关乎收入的硬性要求。

衡量电商网站速度

请将 Core Web Vitals 作为你的核心速度指标。Largest Contentful Paint 衡量用户感知的加载速度。First Input Delay 衡量交互响应能力。Cumulative Layout Shift 衡量视觉稳定性。目标是将 LCP 控制在 2.5 秒以内、FID 控制在 100ms 以内、CLS 控制在 0.1 以内。使用 Google PageSpeed Insights、Lighthouse 和 Chrome UX Report 进行测量。通过 Search Console 中的 CrUX 数据监控真实用户指标。

图片优化

图片通常是电商页面上体积最大的资源。使用 WebP 和 AVIF 等新一代格式，并提供回退方案。为首屏以下的产品图片实现懒加载。使用带 srcset 的响应式图片以适配不同屏幕尺寸。使用 ImageOptim 或 Squoosh 等工具压缩图片。通过 CDN 分发图片。使用正确的图片尺寸以防止布局偏移。可以考虑使用渐进式图片加载来改善用户的感知体验。

JavaScript 与 CSS 优化

压缩并打包 JavaScript 和 CSS 文件。延迟加载非关键 JavaScript。为首屏内容内联关键 CSS。移除未使用的 CSS 和 JavaScript。使用代码拆分，每个页面只加载必要的代码。实施 tree shaking 以消除无用代码。可以考虑采用无头（headless）架构，以获得更好的性能控制能力。

服务端优化

使用 CDN 从靠近用户的边缘节点分发静态资源。通过适当的缓存头实现服务端缓存。使用 HTTP/2 或 HTTP/3 实现并行加载。为文本类资源启用 Brotli 或 gzip 压缩。优化产品数据的数据库查询。为高频查询实现对象缓存。可以考虑使用边缘计算来实现动态内容的个性化。

第三方脚本管理

电商网站通常会加载大量第三方脚本，用于分析、聊天、评价组件和广告。审计所有第三方脚本并移除不必要的脚本。以异步方式加载或延迟加载非必要脚本。使用标签管理器来控制脚本加载。可以考虑为 Google Analytics 使用服务端标签。为第三方脚本设定性能预算。

移动端速度优化

超过 60% 的电商流量来自移动端。移动网络往往更慢、更不稳定。通过更小的图片和更少的请求来优先保障移动端性能。使用 service worker 实现离线缓存。实现类似应用的导航模式。可以考虑为回访用户提供渐进式 Web 应用（PWA）。在真实移动设备和慢速网络下进行测试。

结语

随着网站不断扩张和变化，电商网站速度优化需要持续投入精力。建立性能预算、监控 Core Web Vitals，并在开发和内容创作流程中将速度作为优先事项。更快的页面带来的收入提升，使速度优化成为任何在线商店投资回报率最高的举措之一。