Web 性能的“3 秒法则”

你只有三秒钟。

之后，你的用户就会离开。

Google 的研究表明，如果移动端网站加载时间超过 3 秒，53% 的用户会选择放弃。

网站加载缓慢会让你损失金钱。将移动端加载时间缩短 0.1 秒，即可提升 8.4% 的零售转化率。

性能不仅仅是一个技术指标，它更是一个业务指标。

为了取胜，你必须了解核心网页指标 (Core Web Vitals)：

• LCP (Largest Contentful Paint)：用户看到主要内容的速度。目标应在 2.5s 以内。 • INP (Interaction to Next Paint)：页面对点击等操作的响应速度。目标应在 200ms 以内。 • CLS (Cumulative Layout Shift)：页面的稳定性。目标应在 0.1 以内。

停止猜测，开始优化。以下是战胜时间的策略：

JavaScript 优化

• 减少代码传输量。使用动态导入 (dynamic imports) 仅在需要时加载代码。 • 使用 Tree-shaking。从 CommonJS 切换到 ES modules 以移除冗余代码。 • 将繁重任务移至 Web Workers。确保主线程能够及时响应用户输入。 • 使用 defer 或 async。不要让脚本阻塞 HTML 解析。

CSS 与渲染

• 内联关键 CSS (Critical CSS)。优先加载首屏 (above the fold) 可见的内容。 • 避免布局抖动 (layout thrashing)。批量处理读取和写入操作，防止频繁的重新计算。 • 使用 transform 和 opacity 进行动画处理。这些属性会调用 GPU 并避免布局偏移。 • 使用 content-visibility: auto。跳过屏幕外内容的渲染。

图片策略

• 使用现代格式。WebP 和 AVIF 的体积远小于 JPEG。 • 设置 width 和 height 属性。这可以防止布局偏移 (CLS)。 • 对首屏以下的内容进行图片懒加载。但不要对 LCP 关键大图进行懒加载。 • 使用 srcset。为移动端用户提供更小的图片。

网络与缓存

• 使用 CDN。将内容部署到离用户更近的地方以降低延迟。 • 启用压缩。使用 Brotli 或 Zstandard 来减小文件体积。 • 积极使用缓存。为带有哈希值的资源使用不可变缓存 (immutable cache) 响应头。 • 保持 bfcache (往返缓存) 正常工作。避免使用 unload 事件，以确保实现即时的前进/后退导航。

目标很简单：减少不必要的处理。

最快的代码是用户无需下载的代码。最快的请求是浏览器无需发出的请求。

来源：https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1