即时过渡：如何使用预测性预取将Edge缓存扩展到浏览器中
导航延迟会降低转化率并增加跳出率，这是众所周知的。 对于那些在流量较大的网站上管理和跟踪转换的人，您可能已经看到了这种情况。 希望您也看到了相反的情况。 当导航和页面加载时间改善时，转化率会提高。
性能和转换是齐头并进的。
CDN公司经常使用此图示来证明其服务的投资回报率。 解决方案很简单。 尽可能靠近用户获取静态内容，以加快交付速度，投资回报率也是积极的。 访客会更长时间闲逛，购买更多商品，并更频繁地返回。 这是有意义的,不是吗? 如果你正在阅读这篇文章,那么你可能已经知道它是真实的。 但接下来怎么办？ 我们能否进一步消除Web体验中的网络响应时间，并使其类似于本机应用程序？ 如果我们可以将延迟降至零，难道我们不会最大限度地提高转化率？ 如果我们可以在用户单击之前在浏览器中缓存边缘内容,转换可能是瞬时的,类似于本机应用程序。
“我们真的能为网站访问者提供类似于本机应用程序的Web应用程序性能吗？”
有了Edgio，您就可以了。
让我们先看看是什么让本机移动应用程序变得出色。 大多数移动应用程序用户不知道后台发生了什么,但他们肯定欣赏通过将应用程序下载并安装到他们的设备所获得的性能改进。 它很简单,加载应用程序,浏览屏幕和过渡是即时的。 从一件事到另一件事,添加一件物品到购物车,享受无摩擦的体验。 用户很少会看到”正在加载”指示器，当他们看到时，这是有意义的；例如在结账时提交付款信息。 通过巧妙的开发和强大的平台，所有这些都是可能的。
通过Edgio输入预测性预取。 现在，您的Web用户可以享受相同类型的体验。
许多CDN公司提供了他们称之为”预取”的缓存加热选项，以帮助将源站的内容带到边缘。 一个伟大的第一步,但它不会让你一路走到那里。 用户仍需等待内容移至其设备。 那么，我们如何进一步推进呢？ Edgio的预取是一种浏览器集成,它将边缘直接引入设备。 传统CDN不具备的功能。
“听起来像魔法，它是如何工作的？”
很好的问题，我们完全理解您的怀疑态度。 要了解它的工作原理，我们需要从基础知识入手。 观看下面的快速解释，然后让我们看看预取的核心是什么。
什么是预取…？
让我们看看MDN，了解浏览器理解的预取定义。 链接预取是对用户代理的一个提示，提示它应该下载以后释放资源时可能需要的资源。 首先，页面加载并开始处理异步请求。 当网络和CPU释放时，浏览器将获取您添加到文档中的其他资源。 对于基本的预取，正如浏览器所理解的那样，它看起来有点像以下内容：
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
最终结果是，当用户与原始页面交互时，浏览器将下载并缓存next-page.html和next-image.jpg。 如果他们点击,他们将有下一页的框架和一个额外的图像缓存在本地,将立即显示。 当然，可能需要下载其他CSS，JS和其他资源，但我们已在需要之前将旅程中最关键的部分带到浏览器中。 这是一个很好的开端，从示例中可以看出，它非常适合小型用例。 连续的旅程网站,也许是一个或两个登陆页,但你可能想的是这…
“我的网站有成千上万的图像和页面，我无法做到这一点。
我们不可能将所有图片和页面链接到我们所有页面的头部吗？”
不用,你不用担心。 使用Edgio的预测性预取和深度提取插件，您可以绕过工程和猜测，而用户的浏览器与我们的EDGE网络协作以获取关键资源。
好的，那么我们如何做到这一点呢？
Edgio的预测预取利用了一种叫做服务工作者的功能。 软件是所有现代浏览器都能理解的东西,实际上自Chrome 40以来,它就一直得到支持。 SW是一个与您的站点关联的后台进程，在主请求闲置时工作。 如果您曾经从事过前端开发或更现代的渐进式Web应用程序，您可能会接触到服务工作者。 如果您现在没有在您的网站上使用服务工作者，您可以轻松添加服务工作者，而不会对您当前的用户体验产生任何影响。 Edgio可以帮助您轻松地与我们的预先建造的服务人员建立一个。
服务工作者的注册和安装可能因您是否使用前端框架而异。 请务必查阅我们的文档，以找到有关多种方法的更详细说明。
现在你已经添加了一个服务工作者并且它正在注册你的网站,它需要做一些事情。 添加Edgio Prefetch软件包后，可以添加我们的路由以使用户的浏览器正常工作。 默认情况下，service-worker缓存存储两分钟。 为了最大限度地提高性能，我们可以在路线文件中进行调整：
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
通过一个简单的规则,我们将Edge配置为通过验证24小时来保持API响应的新鲜度,并指示浏览器不仅预取它,还将其挂起一个小时。
如果您熟悉Edgio，您知道可以在本地测试。 打开浏览器的开发者工具并在浏览网站的同时观看”网络”选项卡。 当您浏览时，您将看到服务工作者正在抓取Routes文件中链接的原始HTML。 注意独特的齿轮图标和”service-worker”标记为启动器。
您也可以通过检查应用程序选项卡并查看缓存来单独查看service-worker缓存。
Edgio预取脚本用于将链接拉入用户的视口中供其单击。 如果他们单击，他们将立即转到下一页。
一个很好的开始,但如果你有一个内容繁重的网站,产品或文章图片也需要提取,以及该怎么办? 那么是时候使用Edgio独一无二的Deep Fetch插件了。
启用Deep Fetch插件非常简单。 只需将插件导入到现有项目中,然后选择几个HTML选择器,插件应该查找。 如果您运行的是电子商务网站，您的商品页面可能是模板化的。 您的LCP可能类似于此–每个页面都有不同的图像，但您可以使用”主图像”CSS选择器来维护整个网站的样式。
<img src=”/images/product-image.jpg” class=”main-image” />
尝试将”主映像”选择器添加到Deep Fetch阵列中，让服务工作者开始工作。
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
简而言之,这告诉Deep Fetch插件查找主图像选择器并将src预取为图像。 在示例中，我们将maxMatches设置为1。 这意味着我们将只预取第一个匹配项。 没有必要停留在那里,虽然。 根据您要预取的资产类型调整maxMatches。
现在，您的服务人员将预取视口中的链接，扫描该选择器的HTML，并为有问题的图像添加预取链接。 当您的用户单击图像时，页面将立即显示。
“我们的源站怎么样？我们不能支持每个用户增加流量。”
Edgio已涵盖您。 如果资产未缓存，我们的下一代WebCDN不会将预取请求传递到源站。 Edgio将简单地回应412。 如果用户单击未缓存的链接,我们将把它传递给源站,就像我们对任何其他请求所做的那样,并遵守您现有的代理规则。 请放心,你的起源是安全的与Edgio。 整个站点的自然流量将加热缓存，412个响应将减少。 为了让您的网站保持整洁，请务必使用stale-white-revalidate，以便我们可以在寻找新商品时交付陈旧商品。
想要在不必深入了解Chrome开发人员工具的情况下查看所有这些功能吗? Edgio也能为您提供帮助。 我们已经了解到预测预取对客户的价值，因此我们在Edgio控制台中有一个专门构建的仪表板。 轻松监控预取请求和命中率的预取性能。
希望您现在看到Edgio的预测性预取如何通过将边缘缓存一直带给您的用户,为您的用户提供真正令人难以置信的数字体验,提高转化率并降低跳出率。
