Home Blogs 通过Edgio的预测性预取降低退回率并改善网站体验
Applications

通过Edgio的预测性预取降低退回率并改善网站体验

About The Author

Outline

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

众所周知,导航延迟会降低转化率并提高跳出率。 对于那些在流量很大的网站上管理和跟踪转换的用户,您可能已经看到了这种情况。 希望您也看到了相反的情况。 您已经看到,当导航和页面加载时间改善时,转化率会增加。

性能和转换是相辅相成的。

CDN公司通常使用此示例来证明其服务的ROI。 解决方案很简单。 获取尽可能靠近用户的静态内容,以加快交付速度,投资回报为正。 游客将停留更长的时间,做更多的购买和返回更频繁. 这是有道理的,不是吗? 如果你正在阅读这篇文章,那么你可能已经知道这是真的。 但接下来是什么? 我们是否可以更进一步,完全消除网络体验中的网络响应时间,并使其类似于本机应用程序? 如果我们可以将延迟降低到零,我们不会最大限度地提高转化率吗? 如果我们可以在用户点击之前在浏览器中缓存边缘内容,过渡可能是瞬时的,类似于本机应用程序。

“对于我们的网站访问者,我们真的能拥有类似于本机应用程序的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的 预测性预 取和深度提取插件,您可以绕过工程和猜测,而您的用户的浏览器与我们的边缘网络协同工作,以获取关键资源。

好的,我们如何做到这一点?

Edgio的预测性预取利用了所谓的服务工作者。 SW是所有现代浏览器都能理解的东西,它实际上从Chrome 40开始就得到了支持 。 SW是与您的站点绑定的后台进程,在主请求空闲时工作。 如果您曾经在前端开发或更现代的渐进式Web应用中工作过,您可能会接触到服务人员。 如果您现在没有在您的网站上使用服务人员,您可以轻松添加一个,而不会对您当前的用户体验产生任何影响。 Edgio可以帮助您与我们的一名预建服务人员轻松建立一个。

注册和安装服务工作者可能会因您是否使用前端框架而异。 请务必查看我们的 文档 ,了解更多有关多种方法的详细说明。

现在,您已经添加了一个服务工作者,它正在您的网站上注册,它需要做一些事情 . 添加Edgio Prefetch软件包后,可以添加我们的路由,使用户的浏览器正常工作了。 默认情况下,服务工作缓存存储两分钟。 为了最大限度地提高性能,我们可以在路线文件中进行调整:

				
					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,您知道可以在本地测试。 打开浏览器的开发工具,并在仔细阅读网站时查看网络选项卡。 当您浏览时,您将看到服务工作者正在为路由文件中的链接抓取原始HTML。 请注意标记为启动器的独特齿轮图标和”维修人员”。

您还可以通过检查应用程序选项卡并查看缓存来单独查看服务工作缓存。

Edgio预取脚本可将链接提取到用户的视口,供用户单击。 如果他们单击,他们将立即进入后续页面。

一个很好的开始,但如果你有一个内容密集的网站,产品或文章图像,需要获取,以及吗? 现在是Edgio独一无二的Deep Fetch插件的时候了。

启用 Deep Fetch 插件非常简单。 只需将插件导入到现有项目中,然后选择插件应查找的几个HTML选择器。 如果您运行的是电子商务站点,则您的产品页面可能是模板化的。 LCP可能看起来像这样–每个页面都有不同的图像,但您可以使用”main-image”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个响应将减少。 为了保持您的网站正常运行,请确保使用过时而重新验证,以便我们可以在寻找新商品时交付过时商品。

希望无需深入了解Chrome的开发人员工具即可看到所有这些功能? Edgio也可以提供帮助。 我们已经了解了预测预取对客户的价值,因此我们在Edgio控制台中拥有一个专门构建的仪表板。 轻松监控预取请求和命中率的预取性能。

希望您现在能看到Edgio的预测性预取功能如何 通过将边缘缓存一直提供给您的用户,为您的用户提供真正令人难以置信的数字体验,提高转化率并降低跳出率。