原文链接： nitropack.io/blog/post/w…
原文作者：Lora Raykova
2024年网页性能优化：趋势与预测
TL;DR: 2024年网页性能优化预测突出了核心网页指标（Core Web Vitals）的重要性，特别是新指标如“到下一次绘制的交互”（Interaction to Next Paint, INP），以及长动画帧API（Long Animation Frames API）和AI增强技术的应用。
每天我们翻阅约130个网页，每个页面加载时间约为6秒。这意味着你每天在屏幕前无所事事的时间高达13分钟——如果使用手机，则超过17分钟。
因此，网页性能优化（WPO） 继续推动发展，以寻找更好的方式赢回这些失去的时间，或至少确保等待时间最少。
让我们回顾过去12个月的主要成就，并准备利用2024年即将出现的细微趋势！
当前的网络速度：我们现在在哪里？
2023年，网络性能经历了显著的进化，特别是核心网页指标（Core Web Vitals，CWV）的进步。CWV代表了加载速度、交互响应和布局稳定性，设立了新的网站性能基准。
一个真实的进步证明是惊人的10,000年等待时间减少——这是通过改进核心网页指标实现的巨大成就。
此外，来自HTTP Archive的数据充分说明了核心网页指标的日益普及和实施。通过核心网页指标评估的网站数量显著增加，2023年提高了6%。这反映了全球网站开发者、网站所有者和产品优先考虑和优化其网站以提供更顺畅、更快速和更友好的浏览体验的集体努力。
目前，Chrome用户体验报告（CrUX）中有超过650万个合格来源。
核心网页指标的回顾与成就
2023年初，41.8% 的网站通过了核心网页指标。自那时起，我们看到稳定增长，桌面端通过率上升到 47.4%。这些显著成果是如何实现的？让我们看看Chrome和更广泛的生态系统引入了哪些发展。
Google Chrome 的进展
主要的进展直接来自 Google Chrome 开发团队：
- 2023年核心网页指标的最大新闻是新响应性指标——到下一次绘制的交互（INP） 的正式推出。INP将于2024年3月取代FID，成为一种更全面的会话交互测量方式。
- **引入前进/后退缓存（bfcache）**到 Chrome 浏览器：设计帮助你快速返回或前进浏览历史，而无需重新加载页面。 结果： BFCache的命中率在Android（3.6%）和桌面端（1.8%）上逐月提高。
- 新 PreconnectOnAnchorInteraction 特性 在指针下移而非抬起时连接到来源。
结果： 在Android/桌面端上，平均LCP提高了6/10ms（0.4/1%），跨源LCP在Android和桌面端上提高了约60ms。发布还导致内容广告收入增加了0.08%。
- 预渲染 页面，使其在用户实际访问之前即时加载。
结果： 通过直接在地址栏中输入URL加载页面的平均LCP提高了500-700ms（14-25%），使所有导航的全球平均LCP提高了6.4ms。
- 在Windows 11上运行EcoQOS的后台标签**节流** 和在macOS上运行的任务角色和QoS调整。
结果： 改进了最大内容绘制（LCP）和到下一次绘制的交互（INP）。
- 持续优化Chrome 在多个活动标签下的表现。
结果： 调度和争用改进，过去六个月INP提高了5%，LCP提高了2%。
- 对 Chrome 渲染器的改进，优化任务队列优先级，如高优先级图像加载、延迟后的优先合成和SVG光栅化优化。所有改进均提高了LCP、CLS和INP的通过率。
WordPress 与核心网页指标的成就
在2023年，WordPress 在核心性能团队和贡献者的努力下，在提高核心网页指标通过率方面取得了显著进步。桌面端和移动端分别提高了8.25%和8.13%。
2023年的主要目标之一是使站点所有者能够通过WP核心中最具挑战性的CWV指标——LCP。许多核心改进旨在提高服务器响应时间、运行更高效的数据库、改进JS和CSS的交付以及优化图像：
- 识别和解决 WordPress 核心中最大的服务器响应时间瓶颈
- 提高块主题的PHP性能
- 支持Gutenberg第3阶段的性能提升和审查
- 自动加载 WordPress PHP 类
- 探索提高翻译性能的方法
- 集成SQLite数据库
- 优化WordPress核心中自动加载选项数据库查询
- 探索进一步提高数据库查询性能的方法
- 使用加载策略增强脚本API
- 消除WordPress默认主题前端的jQuery使用
- 在 WordPress 核心中向 LCP 图像添加 fetchpriority=”high”
- 避免在 WordPress 核心中懒加载 LCP / 主打图像
- 改进图像大小属性的计算
结果？
WordPress 6.3 根据最大内容渲染（Largest Contentful Paint，LCP）指标，与 WordPress 6.2 相比，块主题加载速度提高了 27%，经典主题提高了 18%。 进一步分析，我们在移动版 WordPress 上所有核心网络指标上都明显改善：
- 43.37% 通过 LCP
- 78.98% 通过 CLS
- 97.42% 通过 FID
作为帮助 180,000+ WordPress 站点所有者提供优质用户体验的解决方案，我们在 NitroPack 自豪地为平台的 CWV 改进做出了贡献。通过 speculation rules API 预渲染链接，我们看到与没有任何推测加载的页面相比，预渲染页面的 LCP 改善了 80%，INP 改善了 55%。
为了更好的核心网络指标而努力的 JavaScript 社区
作为 Chrome Aurora 项目的一部分，Chrome 和开源 Web 框架合作，我们与 Next.js、Angular 和 Nuxt 成功合作，发布了性能为中心的功能，例如：
2022 年，Next.js 的通过率从 20.4% 增加到 27.3%。Angular 的通过率从 7.6% 上升到 13.2%，而 Nuxt 的通过率从 15.8% 上升到 20.2%。
在现实生活中，这些新功能为像 Land’s End 和 CareerKarma 这样的企业带来了显著的核心网络指标改进。
切换到 NgOptimizedImage 后，Land's End 在 Lighthouse 实验室测试中的移动版 LCP 改善了 40%，桌面版 LCP 改善了 75%。相反，切换到 next/script 的 Web Worker 模式后，CareerKarma 的 LCP 减少了 24%。
“我在此宣布 2024 年是 Web 组件的一年！小巧、无依赖、可选 JavaScript、框架不限、服务器渲染的 Web 组件。”
— Stoyan Stefanov，perfplanet.com 创始人，前雅虎员工，JS 作者
SEO/SEA 与核心网络指标：接触点
核心网络指标与 SEO（搜索引擎优化） 的关联重要性长期以来一直在讨论之中。
在 四月的更新 对页面体验指南进行更新之后，一个明确的答案是，核心网络指标不是单一的排名因素，而是页面体验评估的一部分。
“核心网络指标与 SEO 性能之间的关系仍然备受争议，许多人认为它很少直接影响排名。但我很高兴地看到越来越多的组织优先考虑速度改进。更快的网站意味着更幸福的用户、减少摩擦、更好的生态证书和更多的收入。”
— Jono Alderson，世界领先的 SEO 专家（前 Yoast SEO 主管）
需要注意的是，在排名页面时，相关性仍然是决定性因素，正如 John Muller（Google 搜索倡导者） 所解释的：
“如果网站 A 比网站 B 更快，但 B 对搜索用户的查询更相关，那么网站 B 仍然会超过 A。”
在他于 2023 年 6 月在悉尼举行的 Google I/O Extended 活动上的 演讲 中，Tamas Piros 也确认了核心网络指标的重要性，他说 “...如果您的网站加载速度较慢，这将对您的搜索页排名结果产生负面影响。”
在 SEA（搜索引擎广告） 方面，用户体验直接影响您的广告质量分数。现实世界的例子包括：
- Lever Interactive 的一个客户通过提高质量分数实现了 CPC 降低 17% 和 CPA 降低 31%，这也意味着在更快的着陆页上转化率提高了 20%；
- 高质量分数还意味着您的 CPC 价格最多可优惠 50%，并立即优化您的广告预算；
- Netzwelt 通过优化核心网络指标，看到了广告收入增长 18%、广告可见度增加了 75%、跳出率减少了 50%、页面浏览量增加了 27%；
- 在 2023 年，满足 Google 所有要求的页面的排名比平均值高出 1 个百分点。而较慢的域名排名将比快速域名低 3.7 个百分点。
业务网络指标：网页性能优化对底线的影响
2023 年，企业继续采用核心网络指标优化，以提升其底线，其中加载时间提高 0.1 秒意味着：
- 会话中浏览的页面数量增加了高达 8.6%
- 客户参与度提高了 5.2%
- 转化率提高了 8.4%
- 平均订单价值（AOV）增加了 9.2%
最新的 WPO 案例研究 展示了 Carpe 在优化其网站以提供更好用户体验后的结果——最大内容渲染提高了 52%，累积布局转换提高了 41%，流量增加了 10%，在线商店转化率增加了 5%，收入增加了 15%。
在 2023 年 9 月与 Google 举办的 “您的业务的核心网络指标” 的网络研讨会上，NitroPack 分享了公司内部研究结果，将用户体验和速度与特定用户行为模式联系起来：
-
体验加载时间为 3 秒或更短的用户访问了更多页面。
-
与加载时间为 2 秒相比，页面加载时间为 3 秒时，有 50% 更多的访客会放弃页面。
-
-
访客会失去耐心，并在页面加载的 2.75 秒时开始不成比例地放弃网页。
我们看到越来越多的企业放弃速度作为终极目标的想法，而更加关注改善用户与其网站的互动。解决 核心网络指标问题 远远超出了后端的调整。事实上，它已经在业务关键绩效指标以及增长报告中找到了当之无愧的位置。
2024 年更快的网络：预测
“除了继续改进核心网络指标的现有趋势外，我真的认为 2024 年可能是‘即时网络’的一年，因为 Chrome 的 Speculation Rules API 进入主流并使预渲染成为许多网站的轻松添加。这将使体验更加流畅，尤其是与多页面 View Transitions API 结合使用时。”
— Barry Pollard，Google Chrome 开发者关系工程师
让我们看看哪些趋势将塑造 2024 年，不仅更快，而且几乎即时。
通过 LCP：专注于正确的优化
56.4%
这是移动端通过 LCP 的网站比例，而 FID 为 94.2%，CLS 为 77.2%。LCP 指标的挑战性在于加载最大内容要素所花费的时间的复杂性。
在 2022 年，Philip Walton 提出了一种新的拆分这段时间的方法：
- 客户端开始接收内容的时间 (TTFB)
- 开始加载 LCP 图像的时间（资源加载延迟）
- 完成加载 LCP 图像的时间（资源加载时间）
- 直到 LCP 要素呈现的时间（元素渲染延迟）。
这样可以进行细粒度测量，帮助网站所有者识别瓶颈以及哪些优化方法最有效地提高 LCP 分数。在 2023 年 11 月，Estela Franco 分享了以毫秒为单位的研究结果。
问题在于什么？资源加载延迟。
这意味着我们需要专注于尽快加载最大内容要素资源，而不是优化加载持续时间。
✦ 我们预测...
在 2024 年，开发人员和网站所有者都将专注于通过 资源提示 提高 LCP 要素的可发现性，并将其完全排除在懒加载之外。
为 INP 做准备：新的响应度指标
许多人已经猜测 FID 指标的退出是否会对 CWV 通过率产生重大影响。 答案是肯定的。
一旦 INP 开始（特别是在移动端），通过率将会下降，开发人员将不得不动起手来确保他们的 CWV 评估保持良好状态。
然而，INP 是理解用户如何与我们的网站进行交互的重大进步。由于它测量了会话期间的所有交互，网站所有者将获得更多洞察力，了解大多数延迟发生的地方。
✦ 我们预测...
在 2024 年，开发人员将越来越多地利用 scheduler.yield() 和 Long Animation Frames API，分解和减少长任务，使主线程准备好接受交互而无需延迟。
更好地理解网站性能
随着网站性能优化的复杂性增加，网站所有者对其实际含义的理解也越来越重要。
在 2023 年，我们看到对核心网络指标如何融入更广泛的业务背景产生了越来越多的好奇心。
CrUX、HTTP 存档、Web Almanac、WPO 统计、独立服务和插件的商业洞察工具 - 所有这些都致力于分析数据并为网站所有者提供透明度，以改善用户体验的努力。
✦ 我们预测...
2024 年将标志着对网站上真实用户体验的理解迈出重要的一步，使核心网络指标成为业务所有者和电子商务商家的重要指标，并直接与他们的底线联系在一起。
“展望 2024 年，我看到我们在对待网络性能方面出现了积极的转变。我们正在摆脱只关注实验室数据的做法，更多地关注实际用户体验。这是一个充满新想法的激动人心的时刻，许多新想法正在涌现，以使每个人的网站更快。在 NitroPack，我们很高兴成为这一变革的一部分，帮助使网络对用户来说更好。”
— Georgi Petrov，NitroPack CEO 兼联合创始人
AI 的作用：网络性能优化的下一步
AI 的蓬勃发展已经影响了整个世界，许多业务所有者正在思考它可能带来的机会。
事实上，在 2023 年，已经有 35% 的公司在他们的业务中利用了 AI，金融服务、医疗保健、零售和制造业在 AI 采用方面处于领先地位。
在网络性能优化方面，我们已经看到了 Chrome 的推测规则 API 的第一次进展。无论是用于自动化任务、改进工作流程还是创建新的服务和产品，WPO 行业中的 AI 将使网站所有者能够满足对更好的用户体验和加载速度日益增长的需求。
它在预测性分析、模式识别和个性化内容交付等领域的应用显著改善了用户体验。
✦ 我们预测...
在 2024 年，AI 将成为优化策略中一个充满希望的新篇章 - 从预测性分析和模式识别到预期功能，这些进展将帮助我们更好地理解用户行为并更快地满足用户需求。
最后的思考
随着 2024 年的临近，重点仍然是保持这种势头。
持续的进步和对正确的网络性能优化技术的早期采用将为更快速、更高效的网络体验铺平道路。
让我们期待一个快速的 2023 年，并共同努力迎接更快速的 2024 年！
