如何立即加载网页（专家技术和工具）
已发表: 2024-02-07快速地。 快点。 立即的。
当我们步入 2024 年时，一个突破性的时代即将到来，网站访问者可以预见到即时页面加载将成为新常态的重大转变。
加入我们，我们将探索网络浏览的演变，并扩展您为网站访问者带来即时体验的方式。
立即加载页面意味着什么？
即时加载页面是指根据用户请求快速、无缝地显示网页。 简而言之，当网站访问者从您的网站加载页面时，加载时间接近 0 秒。
实现即时页面加载涉及优化各种后端和前端资源，例如最小化文件大小、利用浏览器缓存以及使用内容交付网络 (CDN)。
继续阅读以了解添加到您的优化工具箱的最新技术。
为什么即时页面加载很重要？
目标是通过提供快速响应的信息访问来增强用户体验，这对于保持用户对网站的参与度和满意度至关重要。
NitroPack 最近的用户研究显示，网站访问者会在 2.75 秒后放弃页面，如果后续页面在 3 秒内加载，他们将访问 60% 的页面。
提供即时体验还会对真实用户与您的网站的交互方式产生积极影响，特别是导致通过核心网络生命和最大的内容绘制。
LCP 是众所周知的最具挑战性的性能指标，它是一个需要优化的复杂方面，幸运的是，它受到即时加载技术的严重影响。
现在网络浏览的挑战
虽然网络工程师尽最大努力弥补万维网固有的弱点，但 53% 的移动用户期望在 3 秒或更短的时间内快速加载页面。
为了弥补这一差距，网站所有者如今使用多种策略来减少等待时间并保持竞争力，例如：
- 网络性能预算设置
- 手动和自动页面加载优化
- 图像、媒体和代码压缩
- 实际性能（核心 Web Vitals）优化
- 用户行为分析、客户旅程优化等等！
不过，网站所有者不必仅依赖内部资源。
Google Chrome 等浏览器和 NitroPack 等优化工具越来越多地寻找帮助加快加载时间的方法，旨在实现难以捉摸的“即时体验”。
加入第一个由 AI 驱动的优化器（NitroPack 的 Navigation AI）的候补名单，以解锁自动化即时体验 →
手动即时页面加载技术
利用浏览器功能和资源提示
解决即时浏览体验的一种方法是优化您的网站，以实现未来的快速导航。
登陆网站后随后加载网页。
像link rel=prefetch这样的资源提示是易于实现的 API，在网页渲染中优先级较低。 它被添加到您网站的 HTML 中，并受到浏览器的良好支持（Safari 落后）。
由 Barry Pollard 本人介绍，Chromium 最近令人兴奋的发展是推测规则 API。
推测规则 API 是更新、更规范的 API，用于预取或预渲染整个网页。 它是一个基于 JSON 的 API，允许指定预完善或预渲染的链接以及更高级的用例。
通过使用推测规则 API，您可以预期初始页面加载时间明显快于 2.5 秒，甚至接近最初的几毫秒。 这可以通过利用 API 指定用于预渲染或预取的网页 URL 列表来实现，浏览器将在后台执行该列表。
截至 2024 年 1 月底，推测规则 API 有了全新的增强功能，基本上通过将 URL 添加到文档而不是列表中，我们可以更好地控制 URL。 这使我们能够指定浏览器执行页面和页面上的元素所包含的 URL 的触发器和优先级。 然后，您可以指定“渴望”级别，这基本上代表您对用户单击这些链接的信心。
解锁 WordPress 上的即时页面加载
Adam Silverstein 透露 WordPress 性能团队正在致力于新的推测规则 API 的更稳定的实现。
目前，重点仍然是让生态系统中的网站所有者和开发人员可以使用 API 的一小部分功能，以在将其成为核心的一部分之前测试效率和采用率。 以下是 WordPress 用户迄今为止可以利用的功能：
Performance Lab 插件中的一个模块
仅实现推测规则 API 前端的独立插件（应用保守的“渴望”级别，但开发人员可以自由修改行为）
默认情况下排除 WP 管理路由，但需要 WP 开发人员确定他们想要避免或优先考虑的路由（即，避免预渲染和预取购物车，但优先考虑明显的未来导航）
WordPress 性能团队还致力于在生态系统的插件中实现更复杂的实现。 这样做的目的是减轻开发人员在确定哪些路线是最优先、哪些路线不可行时必须做的一些繁重工作。
如何在任何网站上自动立即加载页面
NitroPack 推出导航 AI（测试版）
Navigation AI 是 NitroPack 的最新产品。 它是一种基于人工智能的网络浏览优化器，可以主动预测和分析用户行为，以在客户旅程中预渲染整个页面。 导航人工智能允许网站所有者在桌面和移动设备上提供即时浏览体验，从而提高客户参与度和转化率。
加入 Navigation AI 的候补名单，让您的网站为即时用户体验做好准备 →
人工智能导航如何工作？
NitroPack 的导航 AI 基于推测规则 API 构建，并提供自动化解决方案，以在预渲染页面和非预渲染页面之间实现高回报、低风险的平衡。 它由精简的 JavaScript 代码片段实现，并且在浏览器中运行时完全与平台无关。
导航人工智能能够通过将整个过程分为两个阶段来解决这个复杂的方程：
第一阶段：根据数据对页面加载应用人工智能增强的初始预测，而不将其传递给推测规则 API（以免压垮浏览器）
第二阶段：分析用户行为，调整预测，并在我们确定下一步操作是什么后指示推测规则 API 预渲染（或预取）页面。
由于该页面已在后台绘制，因此结果是瞬时页面加载。 在移动设备上，导航 AI 依赖于识别用户在页面上的位置，并且考虑到较小的视口，它可以轻松预测他们将点击的位置。
是什么让人工智能导航如此强大？ （+数据）
导航人工智能根据三个自定义指标来衡量成功：
预测精度：导航 AI 成功预测了所有用户交互中有多少
浪费精度：导航 AI 未能预测所有用户交互中有多少，导致浏览器紧张
浏览器荣誉率：表示页面是否确实正确预渲染/预取（如果没有，我们会检查浏览器效率或用户的网络强度，以帮助导航 AI 适应类似情况）
基于 1,200 个网站，Navigation AI 已经显示出惊人的结果。
导航 AI 真实结果
结果#1：使用 Navigation AI 的网页始终显示约 2.86 秒的加载时间，而没有使用 Navigation AI 的网页则为 6.12 秒
结果 #2：使用 Navigation AI，预渲染页面的 LCP 提高了 85%（从 3.1 秒到 0.4 秒），CLS 提高了 80%（从 0.3 秒到 0.06 秒） 。 对于预取页面，Navigation AI 将 LCP 提高了 52%（从 3.1 秒缩短到 1.5 秒）。
结果 #3：借助 Navigation AI，整个网站的性能指标显着提高： LCP 提高 15%，CLS 提高 8%，TTFB 提高 26%
快速的初始页面加载时间、稳定的布局以及对交互的快速响应能力使网站所有者能够让用户保持满意并长时间参与，并最终以更高的转化率。
即时加载技术：准确性和权衡
在决定预渲染/预取哪些页面时取得适当的平衡与您对用户行为的理解程度有关。 手动方法需要仔细考虑过去的用户体验和数据分析，以实现“中等风险，中等回报”的场景。
理想情况下，您需要加倍关注热图并探索用户在您的网页上执行的操作 - 他们点击的位置、向下滚动的距离以及他们倾向于忽略的内容。
由于浏览器可以处理有限数量的预渲染/预取请求，因此网站所有者和开发人员应该：
排除徽标链接、注销页面、成功购买页面、添加到购物车页面等路线。
优先考虑主要号召性用语 (CTA) 按钮、了解更多页面、逻辑后续导航等路线。
或者，您可以将数据处理和预测能力委托给诸如 Navigation AI 之类的自动化工具。
常见问题解答
后台预渲染/预取页面是否显示在分析中？
如果用户尚未登陆相关页面，则不会计入分析（例如 Google Analytics）。 请记住，推测规则 API 仍处于早期阶段，根据您使用的分析提供商，他们可能决定以某种方式包含此数据。 目前，预渲染/预取页面仅在用户实际登陆时才计入 Chrome 用户体验报告 (CrUX)。
浏览器将预渲染页面的缓存版本保留多长时间？
开发人员无法控制持续时间。 但是，Chrome 会将用户未选择的预呈现页面的所有缓存版本存储在 HTTP 缓存中。 这样，如果用户决定稍后返回它们，它们的加载速度仍然更快。
导航人工智能中审查用户操作的人工智能有多重？
AI 完全由 NitroPack 服务器处理，不在浏览器中执行。 导航 AI JavaScript 仅使用来自 NitroPack 服务器的现成结果，而不是运行整个 AI 模型本身。
即时加载技术适用于用户登陆的第一个页面（例如主页）还是仅适用于后续浏览？
预渲染/预取技术不适用于首次访问网站的情况。 然而，Chrome URL 栏开始通过识别我们经常搜索的 URL 并提前加载它们来使用预渲染
例如，输入 www.goo 很可能会触发 www.google.com 页面在后台加载（当然，取决于个人用户的搜索活动）。
目前，也有人在探索谷歌搜索引擎栏如何融入预渲染。