避免不必要的下载

Ilya Grigorik
Ilya Grigorik

最快且最优化的资源是未发送的资源。您应从应用中移除不必要的资源。最好与团队一起质疑并定期回顾隐含和显式假设。以下是几个例子:

  • 您一直在网页上添加资源 X,但下载和显示该资源的费用是否抵消了它为用户带来的价值?您能否衡量和证明其价值?
  • 资源(尤其是第三方资源)是否能提供一致的性能?此资源是否位于关键路径中,或者需要位于关键路径中?如果资源位于关键路径中,是否会成为网站的单点故障?也就是说,如果资源不可用,会影响网页的性能和用户体验吗?
  • 此资源是否需要或是否具有服务等级协议 (SLA)?此资源是否遵循了性能最佳实践(压缩、缓存等)?

网页中经常包含不必要的资源,更糟糕的是,这些资源会影响网页性能,却无法为访问者或托管这些资源的网站带来太多价值。这同样适用于第一方和第三方资源和 widget:

  • 网站 A 决定在其首页上显示照片轮播界面,以便访问者只需点击一下即可快速预览多张照片。页面加载时,系统会加载所有照片,并在用户浏览照片时逐一加载。
    • 问题:您是否衡量过有多少用户查看轮播界面中的多张照片?下载大多数访问者从不查看的资源可能会导致高开销。
  • 网站 B 决定安装第三方 widget,以显示相关内容、提高社交互动度或提供其他服务。
    • 问题:您是否跟踪了有多少访问者使用了该微件或点击了该微件提供的内容?此微件带来的互动度是否足以证明其开销合理?此外,您能否使用加载策略来确保在需要时才加载脚本

确定是否要消除不必要的下载内容通常需要仔细思考和衡量。为了获得最佳效果,请定期对网页上的每项素材资源进行清点,并重新考虑这些问题。

对 Core Web Vitals 的影响

Google 推出了核心网页指标计划,旨在提供一组指标来反映用户在使用网络时获得的体验。虽然有许多 Core Web Vitals 优化策略,但思考是否应在网页上加载特定资源,可能会为您指明改进网站上这些指标的方向。以下是一些值得您考虑的示例,按每个核心网页指标分组。虽然这并不是详尽无遗的示例列表(示例还有很多!),但仔细阅读这些示例可能会给您带来启发。

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 用于衡量加载最大内容(例如主推图片或标题)的时间。它被视为一个重要的感知指标,可让用户认为网站加载速度很快。

通常,下载的资源越少,用户拥有的带宽就越少,分配给资源的带宽就越少,这可能会改善 LCP。一个典型的例子是延迟加载,在页面加载期间,系统不会下载视口之外的图片,除非浏览器确定用户更有可能看到这些图片。如果您有一个包含 50 张图片的大型缩略图库,那么除了前 10 张图片之外,对其余图片采用延迟加载意味着浏览器可以更高效地利用可用的带宽,并且用户看到的第一批图片将更快地加载。

不过,这并不一定只是减少加载图片。浏览器有一个内部优先级方案,用于确定每个资源应获得多少带宽。不过,即使这样,所有资源(尤其是以高优先级下载的资源)也可能会剥夺潜在 LCP 元素的依赖资源。在网络连接速度较慢的情况下,这一点尤为重要。该依赖资源可能是表示网页 LCP 元素的图片文件,但也可能是浏览器渲染可能被确定为网页 LCP 元素的文本节点所需的 Web 字体资源。

如果您的网站包含大量文字,网页的 LCP 元素可能就是文本节点。虽然有很多优秀的字体优化和加载策略,但不妨考虑一下系统字体是否足以满足您网站的需求,以便文本节点形式的 LCP 元素无需依赖 Web 字体资源即可加载,并且在 CSS 和 HTML 从服务器传入后几乎立即绘制。

Cumulative Layout Shift (CLS)

您加载的每个资源都可能会导致网页的累积布局偏移 (CLS) 增加,尤其是在初始绘制时尚未完成下载时。对于图片,避免 CLS 涉及设置明确尺寸等做法。对于字体,管理字体加载和可能的回退字体匹配可以最大限度地减少 Web 字体换位期间的转换。对于 JavaScript,它可以管理脚本如何操控 DOM,以将布局偏移量减少到可接受的程度。

影响网页 CLS 的每个资源都需要进行一些工作,以确保网页布局足够稳定。通过思考您是否需要特定资源,您不仅可以加快网页加载速度,还可以减少维护布局稳定性所需的认知工作量。这样不仅可以大大改善用户体验,还可以改善开发者体验,因为您将有更多时间在项目中追求其他目标。

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) 用于衡量网页在其生命周期内对用户输入的响应速度。网页的 INP 可能会受到其加载的 JavaScript 的极大影响,因为 JavaScript 是用户在网络上体验到的大部分互动性的驱动力。特别是,网页加载期间下载的脚本资源量可能会启动脚本评估和编译中可能很耗时的操作。您在启动期间加载的 JavaScript 越少,浏览器在网页体验的关键时刻(用户可能尝试与浏览器互动)就需要执行的工作就越少。

虽然有可用于缩减启动期间下载的 JavaScript 资源大小的策略(例如代码拆分和树摇动),但您不妨审核项目中使用的软件包,看看它们是否真的有必要。例如,lodash 有许多方法至今仍很有用,但它还附带浏览器开箱即用的许多方法,例如用于映射求和过滤Array 专用函数,以及许多其他函数。

渐进式增强也是 JavaScript 的一种实用方法,因为它可让您为用户提供基准(但仍能正常运行)体验,并可为设备更强大且网络连接更快的用户添加更多体验。无论您是否遵循渐进增强原则,重点是:您能避免下载的每个 JavaScript 资源都能让用户体验对用户互动做出更快的响应,这是 Web 性能的重要方面。

总结

对网站进行审核以查找不必要的下载内容可能只是提供快速用户体验的一个方面,但却具有很大的影响力。总结如下:

  • 在您的网页上清点您自己的资产和第三方资产。
  • 衡量每个素材资源的效果:其价值和技术性能。
  • 确定资源是否提供足够的价值。
  • 了解不必要的下载对核心 Web 指标和支持指标的影响。

通过以这种方式优化内容效率,您不仅可以全面提升性能,还可以避免浪费用户的带宽,并有可能改进以用户为中心的指标并提供更好的用户体验。