即时转换:如何利用预测性预取将边缘缓存扩展到浏览器中
众所周知,浏览导航延迟会降低转换率并增加跳出率,对于那些管理和追踪网站转化率和流量的网站人而言,这种情况的并不陌生,或许您也看到了相反的情况——当导航和页面加载时间改善时——您可以看到转化率的明显提升。
性能和转化率是相辅相成的
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%的互联网流量,为最受欢迎的节目、电影、体育、游戏、音乐以及即时加载网站提供强大的支持服务。
Edgio 诚邀您访问