前端性能预算：面向全球受众的资源约束

在当今的数字环境中，网站性能至关重要。加载缓慢的网站会导致用户沮丧、参与度降低，并最终造成收入损失。对于面向全球受众的企业来说，由于不同地区的网络条件、设备能力和用户期望各不相同，优化前端性能变得尤为关键。本指南探讨了前端性能预算的概念，特别关注资源约束，并提供了为全球用户提供最佳体验的可行策略。

什么是前端性能预算？

前端性能预算是针对影响网站加载时间和整体性能的各种指标预先设定的一组限制。可以把它想象成财务预算，但你预算的不是金钱，而是像下面这样的资源：

• 页面大小： 页面上所有资源（HTML、CSS、JavaScript、图片、字体等）的总大小。
• HTTP 请求数量： 浏览器为渲染页面需要下载的单个文件数量。
• 加载时间： 页面达到可交互状态所需的时间。
• 首字节时间 (TTFB)： 浏览器从服务器接收到第一个字节数据所需的时间。
• 首次内容绘制 (FCP)： 第一个内容（文本、图片等）被绘制到屏幕上的时间。
• 最大内容绘制 (LCP)： 最大的内容元素（图片、视频、块级文本元素）被绘制到屏幕上的时间。
• 累积布局偏移 (CLS)： 衡量页面的视觉稳定性，量化意外的布局偏移。
• JavaScript 执行时间： 主线程上执行 JavaScript 代码所花费的时间。

通过设定明确的性能预算，并持续监控网站性能与这些预算的对比情况，您可以在潜在瓶颈对用户体验产生负面影响之前，主动识别并解决它们。

为什么资源约束对全球受众至关重要

资源约束指的是由以下因素造成的限制：

• 网络条件： 全球各地的网速和可靠性差异很大。某些地区的用户可能使用缓慢的 2G 或 3G 连接，而其他地区的用户则享受高速光纤互联网。
• 设备能力： 用户通过各种设备访问网站，从高端智能手机到处理能力和内存有限的老旧、低性能设备。
• 数据成本： 在某些地区，移动数据非常昂贵，用户非常在意他们消耗的数据量。

忽略这些资源约束可能会给大部分受众带来不佳的用户体验。例如，一个在北美高速网络上加载迅速的网站，对于一个在东南亚使用较慢移动网络的用户来说，可能会慢得令人痛苦。

以下是一些关键考虑因素：

• 过大的图片尺寸： 图片通常是页面大小的最大贡献者。提供未经优化的图片会显著增加加载时间，特别是对于使用慢速网络的用户。
• 过多的 JavaScript： 复杂的 JavaScript 代码可能需要很长时间来下载、解析和执行，尤其是在性能较差的设备上。
• 未经优化的 CSS： 大的 CSS 文件也会增加加载时间。
• 过多的 HTTP 请求： 每个 HTTP 请求都会增加开销，从而减慢页面加载速度。
• 网络字体加载： 下载多个网络字体会显著延迟文本的渲染。

设定前端性能预算：全球视角

设定一个现实有效的性能预算需要考虑您的目标受众及其特定的资源约束。以下是分步方法：

1. 了解您的受众

首先要了解目标受众的人口统计信息、地理位置和设备使用模式。使用 Google Analytics 等分析工具收集以下数据：

• 设备类型： 识别受众最常用的设备（桌面设备、移动设备、平板电脑）。
• 浏览器： 确定最受欢迎的浏览器。
• 网络速度： 分析不同地理区域的网络速度。

这些数据将帮助您了解需要支持的设备和网络条件的范围。 例如，如果您的很大一部分受众在南美使用 3G 网络的老款安卓设备，那么您需要在性能优化方面更加积极。

2. 定义您的性能目标

您的性能目标是什么？您想达到特定的加载时间、FCP 或 LCP 吗？您的目标应该既有挑战性又可实现，同时要考虑到受众的资源约束。请考虑以下通用准则：

• 加载时间： 目标是页面加载时间在 3 秒或更短，尤其是在移动设备上。
• FCP： 目标是 FCP 在 1 秒或更短。
• LCP： 目标是 LCP 在 2.5 秒或更短。
• CLS： 保持 CLS 低于 0.1。
• 页面大小： 尽量将总页面大小保持在 2MB 以下，特别是对于移动用户。
• HTTP 请求： 尽可能减少 HTTP 请求的数量。
• JavaScript 执行时间： 最大限度地减少 JavaScript 执行时间，目标是低于 0.5 秒。

3. 确立预算值

根据您的受众分析和性能目标，为每个指标设定具体的预算值。像 WebPageTest 和 Google 的 Lighthouse 这样的工具可以帮助您衡量网站当前的性能并确定改进领域。可以考虑根据不同页面类型（例如，主页、产品页、博客文章）的具体内容和功能，为它们创建不同的预算。

预算示例：

指标	预算值
页面大小 (移动端)	< 1.5MB
页面大小 (桌面端)	< 2.5MB
FCP	< 1.5 秒
LCP	< 2.5 秒
CLS	< 0.1
JavaScript 执行时间	< 0.75 秒
HTTP 请求数量	< 50

这些只是示例；您的具体预算值将取决于您的个人需求和情况。通常，从一个较宽松的预算开始，然后随着您对网站的优化逐步收紧预算是很有用的。

优化资源约束的策略

一旦设定了性能预算，下一步就是实施策略来优化网站资源，并保持在这些限制之内。以下是一些有效的技巧：

1. 图片优化

图片通常是页面大小的最大贡献者。优化图片对于提高网站性能至关重要，特别是对于使用慢速网络的用户。

• 选择正确的格式： 对于支持的浏览器，使用 WebP 以获得比 JPEG 和 PNG 更好的压缩效果和质量。在可能的情况下，使用 AVIF 以获得更好的压缩。对于旧版浏览器，提供 JPEG 和 PNG 等备用格式。
• 压缩图片： 使用 TinyPNG、ImageOptim 或 Squoosh 等图片压缩工具，在不过分牺牲质量的前提下减小图片文件大小。
• 调整图片尺寸： 提供正确尺寸的图片。如果图片只显示为 200x200 像素，就不要上传 2000x2000 像素的图片。
• 使用懒加载： 仅当图片在视口中可见时才加载它们。这可以显著减少初始页面加载时间。在 <img> 标签中使用 loading="lazy" 属性。
• 响应式图片： 使用 <picture> 元素或 <img> 标签中的 srcset 属性，根据用户的设备和屏幕分辨率提供不同尺寸的图片。这确保了移动设备上的用户不会下载不必要的大图。
• 内容分发网络 (CDN)： 利用 CDN 从距离用户更近的服务器提供图片，从而减少延迟。

示例： 一个为全球用户服务的新闻网站可以对支持 WebP 的浏览器使用 WebP 格式，对旧版浏览器使用 JPEG。他们还会实施响应式图片，为移动用户提供较小的图片，并使用懒加载来优先加载首屏上方的图片。

2. JavaScript 优化

JavaScript 会对网站性能产生重大影响，尤其是在移动设备上。优化您的 JavaScript 代码以最小化下载和执行时间。

• 代码压缩与混淆 (Minify and Uglify)： 从您的 JavaScript 代码中移除不必要的字符（空格、注释）以减小文件大小。混淆通过缩短变量和函数名进一步减小文件大小。可以使用 Terser 等工具来实现。
• 代码分割： 将您的 JavaScript 代码分解成更小的块，并仅加载特定页面或功能所需的代码。这可以显著减少初始下载大小。
• 摇树优化 (Tree Shaking)： 从您的 JavaScript 包中消除死代码（从未使用的代码）。Webpack 和其他打包工具支持摇树优化。
• 延迟加载： 使用 <script> 标签中的 defer 或 async 属性异步加载非关键的 JavaScript 代码。defer 在 HTML 解析后按顺序执行脚本，而 async 在脚本下载后立即执行。
• 移除不必要的库： 评估您的 JavaScript 依赖项，并移除任何非必需的库。考虑使用更小、更轻量的替代品。
• 优化第三方脚本： 第三方脚本（例如，分析、广告）会显著影响网站性能。异步加载它们，并且仅在必要时加载。考虑使用脚本管理工具来控制第三方脚本的加载。

示例： 一个电子商务网站可以使用代码分割，仅在用户访问产品详情页时加载该页面的 JavaScript 代码。他们还可以延迟加载非必要的脚本，如实时聊天小部件和 A/B 测试工具。

3. CSS 优化

与 JavaScript 一样，CSS 也会影响网站性能。优化您的 CSS 代码以最小化文件大小并提高渲染性能。

• 压缩 CSS： 从您的 CSS 代码中移除不必要的字符以减小文件大小。可以使用 CSSNano 等工具。
• 移除未使用的 CSS： 识别并移除网站上未使用的 CSS 规则。像 UnCSS 这样的工具可以帮助您找到未使用的 CSS。
• 关键 CSS： 提取渲染首屏内容所需的 CSS 规则，并将其直接内联到 HTML 中。这使得浏览器无需等待外部 CSS 文件下载即可渲染初始内容。可以使用 CriticalCSS 等工具来辅助。
• 避免使用 CSS 表达式： CSS 表达式已被弃用，并且会严重影响渲染性能。
• 使用高效的选择器： 使用具体且高效的 CSS 选择器，以最大限度地减少浏览器将规则与元素匹配所花费的时间。

示例： 一个博客可以使用关键 CSS 来内联渲染文章标题和第一段所需的样式，确保这部分内容能快速显示。他们还可以从主题中移除未使用的 CSS 规则，以减小整体 CSS 文件的大小。

4. 字体优化

网络字体可以增强您网站的视觉吸引力，但如果未正确优化，也会影响性能。

• 明智地使用网络字体格式： 对现代浏览器使用 WOFF2。WOFF 是一个很好的备用选项。如果可能，避免使用 EOT 和 TTF 等旧格式。
• 字体子集化： 仅包含您网站上实际使用的字符。这可以显著减小字体文件的大小。像 Google Webfonts Helper 这样的工具可以帮助进行子集化。
• 预加载字体： 使用 <link rel="preload"> 标签预加载字体，告诉浏览器在渲染过程的早期就下载它们。
• 使用 font-display： font-display 属性控制字体在加载过程中的显示方式。使用 swap、fallback 或 optional 等值来防止渲染阻塞。通常推荐使用 swap，因为它会在字体加载完成前显示备用文本。
• 限制字体数量： 使用太多不同的字体会对性能产生负面影响。坚持使用少量字体，并在整个网站中保持一致。

示例： 一个使用自定义字体的旅游网站可以对字体进行子集化，仅包含其品牌和网站文本所需的字符。他们还可以预加载字体并使用 font-display: swap 来确保即使字体尚未加载，文本也能快速显示。

5. HTTP 请求优化

每个 HTTP 请求都会增加开销，因此减少请求数量可以显著提高网站性能。

• 合并文件： 将多个 CSS 和 JavaScript 文件合并为单个文件，以减少请求数量。像 Webpack 和 Parcel 这样的打包工具可以自动化此过程。
• 使用 CSS 精灵图 (Sprites)： 将多个小图片合并成一个单一的精灵图，并使用 CSS 来显示精灵图的适当部分。这减少了图片请求的数量。
• 内联小资源： 将小的 CSS 和 JavaScript 代码直接内联到 HTML 中，以消除单独请求的需要。
• 使用 HTTP/2 或 HTTP/3： HTTP/2 和 HTTP/3 允许通过单个连接发出多个请求，从而减少开销。请确保您的服务器支持这些协议。
• 利用浏览器缓存： 配置您的服务器为静态资源设置适当的缓存头。这允许浏览器缓存这些资源，从而减少后续访问时的请求数量。

示例： 一个营销网站可以使用 Webpack 将其所有的 CSS 和 JavaScript 文件合并成单个包。他们还可以使用 CSS 精灵图将小图标合并成一张图片，从而减少图片请求的数量。

监控和维护您的性能预算

设定性能预算不是一次性任务。您需要持续监控网站的性能与预算的对比情况，并根据需要进行调整。

• 使用性能监控工具： 使用 WebPageTest、Google 的 Lighthouse 和 GTmetrix 等工具定期监控您网站的性能，并确定改进领域。
• 设置自动化性能测试： 将性能测试集成到您的开发工作流程中，以便及早发现性能退化。可以使用 Sitespeed.io 和 SpeedCurve 等工具。
• 跟踪关键指标： 长期监控加载时间、FCP、LCP 和 CLS 等关键性能指标。
• 定期审查和调整您的预算： 随着您网站的发展，您的性能预算可能需要调整。定期审查您的预算，并根据受众的需求和您的性能目标进行更改。

结论

一个定义明确并持续执行的前端性能预算，对于为全球受众提供最佳用户体验至关重要。通过了解不同地区用户面临的资源约束，并相应地优化您网站的资源，您可以提高网站性能、增加用户参与度并实现您的业务目标。请记住，要持续监控您网站的性能，并根据需要调整预算，以确保您始终为全球用户提供最佳体验。优先考虑图片优化、JavaScript 优化、CSS 优化和字体优化。利用工具和自动化流程来维持一致且优化的性能水平。