使用资源提示在Shopify网站上进行性能优化

resource-hints-by-traffic-global
Load WooCommerce Stores in 249ms!

当你试图提高你的Shopify商店的性能时,了解一系列的优化机会,以使你的网站尽可能地以最佳状态运行,这真的很有帮助。

一个经常被忽视的,简单而有效的Shopify优化机会是使用所谓的 “资源提示”。

如果您没有兴趣阅读文章而又想得到性能优化,请联系我们,我们可以代劳。

目录

什么是资源提示?

资源提示包括在<link>元素的rel=属性中使用值:preloadpreconnectprefetch 和 dns-prefetch来优化资源的加载。

例如:

<link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">
<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">
<link rel="dns-prefetch" href="//cdn.shopify.com">
<link rel="preconnect" href="//cdn.shopify.com"> 

‘PRELOAD(预加载)’ 有什么作用,什么时候应该使用它?

预加载就是告诉浏览器尽快获取当前页面的关键资源。

关键资源可包括:CSS样式表,JavaScript,图像和字体文件。

几乎所有Shopify主题中都存在并且可以使用预加载的关键资源的示例是jquery.min.js文件。下面的示例演示了如何预加载此资产:

<head>
  <meta charset="utf-8">
  <title>Preload Example</title>
 
  <link rel="preload" href="{{ jquery.min.js | asset_url }}" as="script">
 
  <script src="{{ jquery.min.js | asset_url }}"></script>
</head> 
通过预加载关键资源,可以减少资源阻塞页面渲染的可能性,因为资源是在浏览器开始渲染页面之前就开始加载的。

使用获取的资源,但在3秒内未被当前页面使用,将在Chrome开发者工具的控制台中触发警告,所以一定要注意这些资源!

preload warning 1024x238

支持预加载的浏览器

preload support 1024x207

‘PREFETCH(预取)’ 有什么作用,什么时候应该使用它?

预取就是告诉浏览器,当前页面不需要某个特定的资源,但用户下一个可能访问的页面可能需要。

由于当前页面不需要预取资源,所以在当前页面加载完成后,它会在后台下载。

和预加载一样,预取也可以用在CSS样式表、JavaScript、图像和字体文件上。

预取资源会被存储在浏览器的缓存中,这样当用户访问需要资源的页面时,预取的内容就会立即被加载。预取可以帮助减少用户在点击链接后加载页面前需要等待的时间。

这是一个在CSS样式表中使用预取的例子。

<head>
  <meta charset="utf-8">
  <title>Prefetch Example</title>
 
  <link rel="prefetch" href="{{ stylesheet.css | asset_url }}">
</head> 

支持预取的浏览器

prefetch_support

分解请求

在我继续介绍剩下的两个资源提示–dns-prefetch和preconnect之前,我想简单地分析一下在请求被发送到服务器之前所发生的过程,这将有助于你更好地理解后面的dns-prefetch和preconnect。这将有助于你在后面更好地理解dns-prefetch和预连接。

当一个请求被发出后,在请求被发送到服务器之前,会发生3件事情。

  1. DNS查找 – 获取域名的IP地址。
  2. TCP握手–与主机通信,建立连接。
  3. TLS协商–与服务器协商,同意在HTTPS通信中使用的加密方法。

观察WebPageTest等网站生成的瀑布图,可以直观地看到上述流程,如下图所示。

webpagetest-waterfall

'DNS-PREFETCH'有什么作用,什么时候应该使用?

Dns-prefetch用于通过提前执行DNS查找来最大程度地减少请求的延迟,以为将来向第三方服务器发出请求以获取资源提供准备。

延迟是指将浏览器的请求发送到服务器,进行处理以及将信息返回给浏览器所花费的时间。

与预取不同,在预取中,要获取样式表和图像之类的资产,而dns-prefetch本质上是获取要存储资产的域的位置,而不是资产本身。当前页面加载完成,在后台执行DNS查找。

由于使用了第三方应用程序,这在Shopify中特别有用。

Shopify上的大多数第三方应用程序都从其自己的域中提供资源,这导致向许多不同的第三方域提出了许多请求以获取资源。

如果正在使用大量应用程序,这些请求通常会极大地降低商店的性能。为了尝试改善对这些域发出的请求的响应时间,可以使用dns-prefetch。

Dns-prefetch可用于CDN(内容交付网络),Google字体,Google Analytics(分析)以及从其请求资源的任何其他第三方服务器的URL上。以下是Shopify主题中其常用用法的示例:

<head>
  <meta charset="utf-8">
  <title>DNS-Prefetch Example</title>
 
  <link rel="dns-prefetch" href="//cdn.shopify.com">
  <link rel="dns-prefetch" href="//v.shopify.com">
  <link rel="dns-prefetch" href="//fonts.shopifycdn.com">
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//www.google-analytics.com">
  <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
</head> 

支持 Dns-prefetch 的浏览器

dns prefetch usage 1024x209 1

"PRECONNECT(预连接) "有什么作用,什么时候应该使用它?

预连接是告诉浏览器你打算从指定的主机中获取内容。

“dns-prefetch “只是提前执行请求中的DNS查找部分,而 “preconnect “则会执行DNS查找、TCP握手和TLS协商这三个过程。

通过提前执行这三个过程,建立与服务器的连接,并保持开放10秒

然后在10秒的时间内请求内容时,由于已经建立了连接,所以可以立即发送过去,更快地获取内容。

重要的是,只预连接到你知道将在指定时间框架内使用的起源,因为建立连接会使用宝贵的客户端和服务器资源。

如果最终未使用预连接,则浪费了建立连接所花费的工作。

使用的预连接示例:

<head>
  <meta charset="utf-8">
  <title>Preconnect Example</title>
 
  <link rel="preconnect" href="//cdn.shopify.com">
  <link rel="preconnect" href="//v.shopify.com">
  <link rel="preconnect" href="//fonts.shopifycdn.com">
  <link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
  <link rel="preconnect" href="//www.google-analytics.com" crossorigin>
  <link rel="preconnect" href="//cdnjs.cloudflare.com" crossorigin>
</head> 

支持预连接的浏览器

preconnect usage 1024x206 1

将“ DNS-PREFETCH”与“ PRECONNECT”配对

浏览器对dns-prefetch的支持比对preconnect的支持要好,所以在用户的浏览器不支持preconnect的情况下,使用它作为后备是很理想的。

它们的配对可以如下图所示。

<head>
  <meta charset="utf-8">
  <title>Preconnect and DNS-Prefetch Example</title>
  <link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
</head> 

将两者结合起来,就有机会进一步降低跨源请求的感知延迟。不支持预连接的浏览器仍然可以通过回到dns-prefetch获得一些额外的好处。

总结

由于过度使用第三方应用程序、资源密集的主题功能和一些网站设计元素等因素,Shopify商店上加载的资源量会很快失控。

现在,资源提示已经涵盖了它们的作用和何时应该使用的细节,希望你能更好地理解资源对Shopify商店性能的影响,以及确保其加载优化的重要性。

在搭建或维护Shopify商店时,请牢记性能选择对商店的影响非常重要。

反过来,这些性能的影响将最终影响你的客户的用户体验,这可能会提升转化率,也有可能降低。

如果你希望我们为你实施这种预加载策略,可以随时与我们联系。

附加阅读

WordPress主机推荐:Siteground 或者 Kinsta 。承接企业建站、独立站托管运营、Shopify 优化 & WordPress 优化 等业务,有兴趣请联系微信:"paul-tse"。

Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments
Load WordPress Sites in as fast as 37ms!