通过Edgio预测性预取功能降低跳出率并提升网站体验-CSDN博客

即时转换：如何利用预测性预取将边缘缓存扩展到浏览器中

众所周知，浏览导航延迟会降低转换率并增加跳出率，对于那些管理和追踪网站转化率和流量的网站人而言，这种情况的并不陌生，或许您也看到了相反的情况——当导航和页面加载时间改善时——您可以看到转化率的明显提升。

性能和转化率是相辅相成的

CDN公司通常使用此示例来验证其服务的投资回报率。解决方案很简单，让静态内容尽可能接近您的用户，以加快交付速度，并且投资回报率是正向的——访客将逗留更长时间，购买更多，复购更频繁。这很有道理，不是吗？如果您正在读这篇文章，那么您可能已经知道这是真的了。但接下来呢？我们能不能更进一步，从网络体验中完全消除网络响应时间带来的影响，使其类似于本地的应用程序？如果我们能将延迟降低到趋于零，难道我们不能把转化率最大化吗？如果我们可以在用户点击之前在浏览器中缓存边缘内容，那么转化可能是即时的，类似于本地应用程序。

“我们真的可以为网站访问者提供

与本地应用程序相当的 Web应用性能吗？”

有了Edgio，你可以。

让我们先来看看是什么让本地移动应用体验变得更好。大多数移动应用用户不知道幕后发生了什么，但他们一定欣赏在设备上下载和安装应用程序的性能提升。这很简单，加载应用程序、在屏幕上导航、转换都是即时的。从一件事情切换到另一件事情，将一件物品添加到购物车中，享受丝滑的体验。用户很少看到 “加载” 的提示，当他们做到这一点，这是非常有意义的——尤其在结账、提交付款信息的时候。而这些性能改善，完全能够通过更巧妙的开发和强大的平台来实现。

通过使用Edgio的预测预取功能，现在，您的Web 用户可以享受同等体验。

许多CDN公司都提供缓存预热的功能，他们称之为“预取”，以帮助将内容从源站传输到边缘。这是一个很好的第一步，但它并不能一直进行下去。当内容交付到他们的设备上时，用户仍然需要等待。那么Edgio 是如何进行后面的步骤呢？与传统CDN不同的是，Edgio的预取是通过浏览器集成的方式，它将边缘直接引入设备中，在用户点击之前，内容就已经从源站传输到边缘，以及浏览器，这是传统CDN无法做到的。

“听起来很神奇，它是怎么做到的？”

这是一个好问题，我们完全理解您的疑问。要了解它是如何工作的，我们需要从基础知识开始, 让我们看看预取的核心是什么。

什么是预取…真的？

让我们看看MDN，了解浏览器所理解的预取定义。链接预取是对用户代理的一个提示，即它应该下载一个资产，而这个资产可能在以后资源释放时需要。首先，页面加载并开始处理异步请求。当网络和CPU释放时，浏览器将抓取您添加到文档中的额外资源。对于基本的预取，正如浏览器所理解的那样，它可能看起来有点像这样：

最终的结果是，当用户与源站页面交互时，浏览器将下载并缓存next-page.html和next-image.jpg。如果他们单击，则将拥有下一页的框架和一张已经缓存在本地的图片，这些图片将立即显示。当然，可能需要下载额外的CSS、JS和其他资产，但我们已经在需要之前将浏览过程中最关键的部分带到了浏览器中。这是一个很好的开始，从示例中可以看出，对于小型用例来说，它真的很好。连续的访问站点，可能是一个或两个登录页面，但你可能在想的是…

“我的网站有成千上万的图片和页面，我无法做到这一点。

我们不可能在所有页面的头文件中链接每个图片和页面，对吗？”

不，你不需要这样做。使用Edgio的预测预取和深度提取插件即可，当用户的浏览器与我们的边缘网络协同工作获取关键资源时，你无需再考虑相关的工程问题和猜想。

好吧，那我们怎么做？

Edgio的预测预取使用了一种叫做“服务工作者”的技术。这是一个所有现代浏览器都支持的软件，实际上从Chrome 40就开始支持了。这套软件是与网站绑定的后台进程，在主请求闲置时工作。如果您曾经从事过前端开发或更现代的渐进式web应用程序开发，您可能已经接触过“服务工作者”。如果您现在还没有在站点上使用“服务工作者”，您可以在不影响当前用户体验的情况下轻松添加一个。Edgio可以帮助您使用我们预置的服务工作程序来轻松设置一个。

注册和安装“服务工作者”可能会有所不同，这取决于您是否使用前端框架。请务必查看我们的文档，找到多种方法的更详细说明。

现在，您已经添加了一个“服务工作者”，并且已经在您的站点上注册了。需要做一些事情。在您添加了Edgio Prefetch预取包之后，就可以把我们的路由添加到用户的的浏览器上工作了。默认情况下，服务工作者程序的缓存被存储为两分钟。为了使性能最大化，我们可以在路由文件中做如下调整：

通过一个简单的规则，我们已经配置了边缘，通过24小时验证我们的API响应来保持实时更新，并指示浏览器不仅要预取它，还要把它挂在上面一个小时。

如果您熟悉Edgio，您就知道可以在本地测试这个功能。打开浏览器的开发工具，在浏览网站时查看网络标签，当您浏览时，您会看到“服务工作者”在您的路由文件中抓取链接的原始HTML。请注意，独特的齿轮图标和作为启动器的“服务工作者”。

您还可以通过检查应用标签以及查看缓存来单独查看“服务工作者”缓存。

Edgio预取脚本的作用是将链接拉到用户的视窗中，让用户单击。如果用户单击，就会立即被带到后续页面。

这是一个很好的开始，但如果您有一个内容丰富繁杂的网站，其中包含产品或文章图片需要提取，该怎么办？那就需要使用Edgio独一无二的Deep Fetch（深度提取）插件了。

启用DeepFetch (深度提取) 插件很简单。只需将该插件导入到现有项目中，并选择几个HTML选择器，该插件就可以查找到。如果您正在运营一个电商网站，产品页面可能是模板式的。您的LCP可能看起来像这样——每个页面都有不同的图片，但您使用 "main-image "(主图片) CSS选择器来保持整个网站的风格。

尝试将 "main-image (主图片）”选择器添加到DeepFetch（深度提取）数组中，让“服务工作者”开始工作。

简而言之，这告诉DeepFetch插件查找 main-mage（主图片）选择器，并将src作为图片预取。在示例中，我们将maxMatches设置为1，这意味着我们只预取第一个匹配项，但不需要停止。根据预取的资产类型，您可以调整maxMatches。

现在，您的“服务工作者”将在视窗中预取链接，扫描该选择器的HTML，并为有问题的图片添加预取链接。当用户单击图片时，该页面将立即显示。

“那我们的源站呢？我们不能支持每个用户的流量增加。”

Edgio也为您提供了解决方案。如果内容资产未被缓存，我们的下一代WebCDN不会将预取请求传递给您的源站，Edgio只需简单的以412作为响应。如果用户单击了未缓存的链接，我们会像处理任何其他请求一样将其传递给源站，并遵守您现有的代理规则。请放心，有了Edgio,您的源站是安全的。

整个网站的自然流量会生成热缓存，412 响应将减少。为了让您的网站保持敏捷，请确保使用stale-while-revalidate，以便我们可以在寻找新项目时交付老项目。

想看到这些所有操作，而不需要在Chrome的开发者工具中挖掘？Edgio也可以提供帮助：我们已经看到预测预取对客户的价值，因此我们在Edgio控制台中专门设计了一个仪表板，可以轻松监控预取性能，包括预取请求和命中率。

希望您现在可以看到Edgio预测性预取功能是如何为用户带来一个真正的、难以置信的数字体验，通过将边缘缓存持续交付给用户，提高转换率并降低跳出率。

关于 Edgio

Edgio（NASDAQ：EGIO）是全球领先的边缘软件解决方案提供商，通过对内容交付、应用和流媒体平台的无缝集成，提供卓越的安全数字体验。Edgio全球规模的技术和专家服务为全球顶级品牌赋能，覆盖教育、娱乐、现场实况及各种应用，为每一位用户提供最迅捷、最动态和最流畅的数字体验。Edgio致力于提供无与伦比的客户服务，并在每一步都扩展价值。Edgio是首选的合作伙伴，承载了全球约20%的互联网流量，为最受欢迎的节目、电影、体育、游戏、音乐以及即时加载网站提供强大的支持服务。