当你试图提高你的Shopify商店的性能时，了解一系列的优化机会，以使你的网站尽可能地以最佳状态运行，这真的很有帮助。
一个经常被忽视的，简单而有效的Shopify优化机会是使用所谓的 “资源提示”。
如果您没有兴趣阅读文章而又想得到性能优化，请联系我们，我们可以代劳。
目录
什么是资源提示？
资源提示包括在<link>元素的rel=属性中使用值：preload, preconnect, prefetch 和 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开发者工具的控制台中触发警告，所以一定要注意这些资源!
支持预加载的浏览器
‘PREFETCH(预取)’ 有什么作用，什么时候应该使用它？
预取就是告诉浏览器，当前页面不需要某个特定的资源，但用户下一个可能访问的页面可能需要。
由于当前页面不需要预取资源，所以在当前页面加载完成后，它会在后台下载。
和预加载一样，预取也可以用在CSS样式表、JavaScript、图像和字体文件上。
预取资源会被存储在浏览器的缓存中，这样当用户访问需要资源的页面时，预取的内容就会立即被加载。预取可以帮助减少用户在点击链接后加载页面前需要等待的时间。
这是一个在CSS样式表中使用预取的例子。
<head>
<meta charset="utf-8">
<title>Prefetch Example</title>
<link rel="prefetch" href="{{ stylesheet.css | asset_url }}">
</head> 支持预取的浏览器
分解请求
在我继续介绍剩下的两个资源提示–dns-prefetch和preconnect之前，我想简单地分析一下在请求被发送到服务器之前所发生的过程，这将有助于你更好地理解后面的dns-prefetch和preconnect。这将有助于你在后面更好地理解dns-prefetch和预连接。
当一个请求被发出后，在请求被发送到服务器之前，会发生3件事情。
- DNS查找 – 获取域名的IP地址。
- TCP握手–与主机通信，建立连接。
- TLS协商–与服务器协商，同意在HTTPS通信中使用的加密方法。
观察WebPageTest等网站生成的瀑布图，可以直观地看到上述流程，如下图所示。
‘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 的浏览器
“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> 支持预连接的浏览器
将“ 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> 根据Mozilla开发人员：
将两者结合起来，就有机会进一步降低跨源请求的感知延迟。不支持预连接的浏览器仍然可以通过回到dns-prefetch获得一些额外的好处。
总结
由于过度使用第三方应用程序、资源密集的主题功能和一些网站设计元素等因素，Shopify商店上加载的资源量会很快失控。
现在，资源提示已经涵盖了它们的作用和何时应该使用的细节，希望你能更好地理解资源对Shopify商店性能的影响，以及确保其加载优化的重要性。
在搭建或维护Shopify商店时，请牢记性能选择对商店的影响非常重要。
反过来，这些性能的影响将最终影响你的客户的用户体验，这可能会提升转化率，也有可能降低。
如果你希望我们为你实施这种预加载策略，可以随时与我们联系。
附加阅读
- Chrome中的预加载，预取和优先级— Addy Osmani
- 通过预连接消除往返行程— Ilya Grigorik
- 资源提示-KeyCDN