如何大幅提升
网站建设 完成后打开的速度 Web性能：11个必读技巧，可帮助您加快网站速度
我们可以向我们的网站添加更多功能，并拥有比以往更多的工具和技术。但是，不利的一面是，我们的选择可能会极大地降低网站的速度，从而使客户感到沮丧（在2018年的一项调查中，有80％的用户表示加载缓慢的网站比暂时关闭的网站更令人沮丧）。如果在缓慢的网络条件或低端设备上无法访问站点或无法响应站点，则它甚至可以完全排除潜在客户。
网站性能优化对业务的影响已得到充分证明。例如，时尚零售商Missguided 将页面加载时间中位数减少了4秒，收入增加了26％。在下面观看有关此内容的演讲：
其中很多是关于提高知名度的，所以我们邀请了七位专家来提出一些技巧，以帮助提高您的网站的性能。
模板图标
培养技能的资源
获得免费的项目计划模板副本，直接发送到您的收件箱。
电子邮件
输入您的电子邮件地址
输入您的电子邮件-我们还将向您发送与Shopify相关的营销电子邮件。您可以随时取消订阅。
我们的虚拟齿轮正在转动。
请注意，
我们的电子邮件最多可能需要15分钟
才能到达您的收件箱。
1.首先为手机打造
客户越来越多地移动，仅移动客户的比例正在上升。但是，移动设备上的转化率往往较低。在上述时尚零售商网站上工作的独立网络性能顾问Andy Davies表示，现在应该改变这一点，并最终将移动设备视为一流公民。
他解释说：“响应式Web设计使我们能够构建理论上可以在台式机和移动台上均能正常工作的网站。” “不幸的是，我们似乎经常经常先为台式机设计和构建，然后尝试缩小网站规模以适应移动设备的限制。这会导致缓慢，缓慢的移动体验，尤其是对于使用Android的访问者而言，他们的设备通常无法应付桌面上的JavaScript以及我们向他们提供的其他内容，因此使用它们的用户尤其如此。
为了创建快速的移动优先体验，Andy建议构建可在低成本Android手机（例如Alcatel 1x）上使用的网站，然后在运行时对其进行增强，以通过功能更强大的设备和更大的屏幕为访问者提供更丰富的体验。
您可能还会喜欢： 为下一个十亿用户设计。
2.停止使用转盘和滑块
旋转木马，幻灯片和滑块听起来像在纸上一个伟大的想法，但Shopify速度优化专家亚历山大·林，首席执行官Rvere，这背后是Shopify应用Hyperspeed警告说，他们有两个重大缺陷，我们需要让我们的客户知道的。
他警告说：“他们不会将访问者转化为客户，并且会降低您的网站速度。” “ 尼尔森·诺曼集团（Nielsen Norman Group）进行的可用性测试发现，访客实际上忽略了轮播。更可恶的是，在圣母大学网站上进行的一项测试发现，只有百分之一的访客点击了第一张幻灯片。其余幻灯片的点击次数甚至更少。”
轮播不仅吸引转化，还使网站陷入困境。亚历山大警告说，精美的滑块需要额外的JavaScript，并且通常由几张大图像组成。
他建议说：“摆脱圆盘传送带，可以使页面加载快得多，因为总页面大小将大大减少。” “考虑一个摆放位置很好的英雄形象，用引人注目的号召性用语而不是轮播。它的加载速度更快，并且您将吸引更多的访问者点击您希望他们点击的内容。”
网站性能：静态主页英雄
静态首页英雄图片，带有清晰的号召性用语。
3.优化图像
图像是任何电子商务商店中必不可少的一部分，它们通常构成了其中的最大部分。但是，大图片可能会使网站慢下来，因为大页面的加载时间更长。
如果您或您的客户希望保留所有图像，Alexander Lam建议至少压缩它们。
他建议：“在将任何图像上传到商店之前，请先通过tinyjpg.com或shortpixel.com之类的免费图像压缩器运行该图像。” 这些服务将使您的图像在数据大小方面变小，而不会牺牲质量或更改其实际尺寸。原始图像通常可以缩小70％以上，而不会出现明显的质量变化。”
确保您使用正确的文件格式也很重要。如果您想要图片中的透明像素，PNG图像确实很有用，但是它们通常比JPEG占用更多的空间。
“如果您的PNG没有透明像素，请在上传之前考虑将其转换为JPEG，” Alexander建议。“使用Photoshop或PNG2JPG之类的服务来更改文件格式。”
Web性能：原始文件，带压缩的JPEG，gif
将原始JPEG与压缩版本进行比较，质量损失为70％。
4.延迟加载图像
帮助企业保持客户在线帐户安全的创业公司Castle的会议发言人和软件工程师Anna Migas同意，图像是网络性能的最大罪魁祸首之一。
她警告说：“一张图片可以说一千多个单词，但加载可能还需要一千毫秒或更长的时间，更糟糕的是，延迟加载其他内容。” “想象一下，如果您的网站上有20张图片并且它们都争相下载，那会发生什么！”
Anna解释说，最佳做法是默认情况下不下载页面上的所有图像，而是使用一种称为延迟加载的技术。这意味着最初只从页面顶部提供图像，然后在用户向下滚动并靠近页面上可以找到更多图像的位置时开始获取其余图像。
“ 惰性加载通常是使用JavaScript完成的，您可以找到许多小型库来帮助您达到这种效果，”安娜建议。“我个人最喜欢的是LazyLoad和yall.js。在Chrome浏览器中，可以通过将loading=“lazy”属性添加到
标签来使用本地函数来延迟加载所选图像，但是对于其他浏览器来说，这不能解决问题。”
您可能还会喜欢： 延迟加载如何优化Shopify主题图像。
5.通过字体交换加载网络字体
不可否认，图像是电子商务网站上销售计划的重要组成部分，但用户也希望快速查看价格和产品说明。这就是为什么使文本尽可能快地可见至关重要的原因，但是由于Web字体的原因，它的加载速度并不总是足够快。
“用户看不到文本的一个原因是使用了默认情况下用户计算机不支持的外部字体，”安娜·米加斯（Anna Migas）解释说。“在那种情况下，网站需要先下载字体，然后才能在屏幕上显示它们。有时可能要花一些时间，最好提供一种备用字体，该字体将立即显示，然后换成所需的字体。”
为此，安娜建议，您可以font-display: swap在@ font-face声明中添加属性，或者，如果使用的是Google字体，则可以添加&display=swapURL参数（例如：
可以在Chris Coyier的CSS-Tricks文章中找到更多详细信息（请注意，它是在可能使用URL参数选项之前编写的）。
Web性能：加载和不加载字体交换
一个没有（左）和有（右）字体交换的字体加载示例（来源：www.zachleat.com/foitfout/）。
6.创建流畅的动画
只要做得好，动画就可以无缝，巧妙地改善网站上的用户体验。但是，如果做错了，他们可能会使您的访客感到困惑和分散注意力。
目前在Netflix任职的高级软件工程师Tyler Childs建议了一些技巧，以改善使用CSS或JavaScript创建的网络动画。
的CSS
泰勒解释说：“固定平滑的CSS动画有一个小秘密，那就是使用不会强制更改布局或重新绘制像素的属性。” “经验法则是只使用opacityand transform，但是如果您想更深入一点，请查看CSS触发器。”
不透明度和变换都只会影响其样式的内容。样式化的内容可以有效地保留在页面其余部分的适当位置，但是正如Tyler所展示的，对用户而言，魔术将会发生：
其它属性，如padding，margin，width，height，top，bottom，left，和right将迫使你的布局变化，这淌下来的所有内容，并可能导致颠簸或回流。
所有CSS属性都可以用于布局，但是在设置内容动画时要小心。
的JavaScript
泰勒（Tyler）警告说，JavaScript动画非常棘手，因为它们与您网页上的所有其他JavaScript共享相同的资源集。
requestAnimationFrame他建议：“ 使用JavaScript平滑动画的秘诀是一种称为的方法。” “如果正确完成，采用这种方法的动画可以达到60 FPS！”
实际的用例requestAnimationFrame包括限制用户交互，例如滚动或拖动事件。这些事件每秒可能触发多次，这就是为什么对它们进行反弹以控制触发次数是一种非常常见的方法。
许多去抖动实现的缺点是，它们没有针对动画或对DOM的任何更改进行优化。requestAnimationFrame最好使用的浏览器作为去抖动功能，因为它已针对动画进行了优化。
requestAnimationFrame泰勒建议：“下一次您要限制某个事件时，请考虑尝试一下防抖功能。” “最后一个好处是，requestAnimationFrame当不使用网页时，通过暂停回调，将使用更少的系统资源。”
您可能还会喜欢： 具有CSS变量的UI动画。
7.最小化第三方影响
随着电子商务创新步伐的不断提高，企业根本无法内部构建所有内容，因此自然而然地，我们依靠越来越多的第三方服务来支持我们。
网络性能专家Ryan Townsend警告说，这些服务中的许多服务都集中在使用户更容易上手，而不是实现的质量上，因此，性能通常因此受到损害。
他建议：“我的第一个建议是尽可能避免使用关键渲染路径。” “确保您的网站快速绘制可以最大程度地减少那些来之不易的访问者的跳出率，因此请注意标记中从第三方加载的任何同步脚本，样式表或字体。即使您只进行了很小的更改，也可能会产生巨大的影响-我的一位客户只需将单个脚本标签更改为异步即可将其在3G连接上的首次有意义的绘制时间减少了三分之一！”
解决涂装时间只是解决性能问题的第一步。另一个是JavaScript执行，Ryan称这是当今网络的巨大瓶颈。他建议：
“我的提示是考虑何时需要第三方脚本来下载和执行。” “我的另一位客户通过在访问者扩展产品页面上的评论选项卡时加载其顾客评论服务，而不是在每个页面上均加载，从而在阻止低端移动设备上执行CPU方面节省了40％的费用。”
Ryan建议，这种技术通常适用于实时聊天，而不是在每个页面上都弹出它，而是考虑在产品说明或常见问题解答中提供一个按钮，以在访问者表示愿意聊天时加载该按钮。
Web性能：单个脚本加载的积极影响
将单个脚本从页面加载期间的加载移动到用户操作的积极影响。
8.预连接到关键的第三方域
独立的网络性能顾问Andy Davies指出，浏览器在发现和下载内容方面做得很出色，其顺序使我们的页面更??快，但是有时它们需要一点帮助。
他解释说：“有些资源发现得较晚。” “字体和背景图片仅在浏览器开始将样式应用于页面时才发现，其他资源可能依赖脚本来插入它们，例如Google Analytics（分析）或标签管理器。如果这些资源来自第三方域，则在建立和保护新连接时会存在延迟。”
Andy建议使用Preconnect Resource Hint，它可以通过建议浏览器预热到第三方域的新连接来帮助克服此延迟。
例如，如果资源托管在example.com上：
crossorigin如果要从example.com提取字体，则需要添加该属性：
单个预连接有时可能会有很大的不同，但是Andy建议您可能需要尝试一下，看看哪种方法最适合您的站点。
您可能还会喜欢： 通过缩小来提高商店加载时间的5种方法。
9.纠缠您的应用
使用Shopify主题时，第三方应用程序也会产生重大影响。Shopify Plus合作伙伴机构Disco的创始人兼首席执行官Gavin Ballard提醒说，无论您花费多少时间和精力来优化主题，都可以在Shopify App Store上的五分钟内完成所有操作。
他解释说：“可用的各种第三方应用程序是Shopify的优势之一，但许多应用程序开发人员并没有想到主题性能，甚至那些必须构建其应用程序才能与1,000,000 +跨Shopify平台的电子商务商店，而不仅仅是您客户的商店。”
为了最大限度地降低对Shopify商店的性能影响，Gavin建议采取几个步骤。
您需要一个应用程序吗？
首先，首先考虑您是否真正需要一个应用程序。
加文指出：“许多Shopify应用商店应用程序都是为那些不具备HTML / CSS / JavaScript技能的商人而设计的，他们只需要一键安装即可解决他们的需求。” “倒数计时器，公告栏或退出意图弹出窗口之类的东西都可以仅使用少量Liquid，CSS和JavaScript 内置到主题中。直接在主题中构建这些功能可以使您更好地控制性能影响（例如，避免加载jQuery的 30个版本），并允许您应用此处和Web上其他地方讨论的其他技术来优化代码的交付。浏览器。”
该应用程序可以控制您吗？
其次，如果您确定确实需要支持其所需功能的应用程序，请调查该应用程序是否可以控制它与主题的交互方式。
“ 例如，流行的Back in Stock应用程序使客户能够在产品重新入库时通过电子邮件和SMS注册通知通知的功能，而仅靠主题一个主题是无法实现的，” Gavin解释道。“但是，它为前端开发人员提供了一系列选择，包括如何将其功能集成到Shopify主题中-通过自动安装程序，通过复制和粘贴的Liquid代码段，或者通过使用JavaScript构建完全自定义的集成API。”
Web性能：Javascript文档
Back in Stock应用程序的Javascript API文档。
在一些实际案例中，Gavin能够将Back In Stock应用程序集成到主题的产品页面中，而对初始页面大小或客户加载时间没有明显影响。如果变体缺货，他只是在产品页面上渲染了一个“通知我”按钮，而不是一个“添加到购物车”按钮，然后，一旦页面变了，就异步地将Back in Stock JavaScript库和一些粘合代码一起加载了。呈现给用户。
“如果应用程序的开发人员不提供这类集成选项，可能值得与他们联系，看看他们是否可以做任何事情，” Gavin建议。“至少，它将帮助提醒应用程序开发人员性能是其客户商店的重要组成部分！”
您可能还会喜欢： 业内人士对Shopify所采用技术的关注。
10.监视每个子域的请求数
自Honeycomb.io工程总监Emily Nakashima于2000年代初开始为网络编写代码以来，浏览器的发展便突飞猛进，但是对于我们仍然需要支持HTTP 1.1的我们来说，一件事并没有已更改-浏览器对任何一个子域（通常是六个）发出的并发请求数量仍然存在限制。
“这个限制的目的是防止当您尝试一次加载整个图像目录页面或其他资源时，意外地在某个小型Web服务器上发起DOS攻击，” Emily解释说。“但是在当今的网络上，我们许多人使用高度可扩展的云服务并通过CDN提供图像，因此限制可能不必要地减慢了您的体验。”
要解决此问题，Emily建议使用一种称为域分片的技术，该技术从多个域或子域中加载一组资源，以增加并发请求的数量。例如，您可能将多个子域（cdn1.example.com，cdn2.example.com等）与同一个CDN一起使用，以便能够一次加载更多图像。但是使用多个域会产生一些开销，您需要为每个新域提出另一个DNS请求，然后才能开始下载我们的资源。
如果您想知道是否最佳配置了我们的域分片，或者是否应该添加更多内容，请分析每个域的并发请求数。
“当您在浏览器开发人员工具中查看客户端分布式跟踪或浏览器的网络瀑布时，请查看请求的模式，” Emily建议。“如果瀑布相对狭窄，并且请求大多同时发生，那么您可能有足够的碎片。如果您以阶梯状模式看到到同一域的顺序请求块，则可能应该配置更多的分片。”
下图中的图1显示了一个向单个域发出请求的网站-您可以看到许多阶梯式的顺序请求。另一方面，图2演示了在向许多不同的域发出请求时，可以实现更高的并发性（在这种情况下，x轴被放大，因此各个跨度显得更宽）。
Web性能：对单个域还是多个域的请求
“我们希望能够在发生此类问题时获得自动警报，” Emily解释说，“因此，我们使用Resource Timing API来收集加载在特定页面上的子资源的列表，并在总数达到请求或对特定子域的请求超过了一定数量。”
11.使用绩效预算
对于许多开发人员来说，性能优化是目前最有趣的工程工作类型之一，因此很容易陷入困境，花几天时间优化缓慢的东西，即使这对他们的客户来说可能并不那么重要。因此，艾米莉·中岛（Emily Nakashima）建议确保您正在优化真正重要的事情。
她透露：“在Honeycomb，我们非常乐于采用“服务水平目标（SLO）”方法来防止兔眼优化。” “使用SLO时，您会根据客户的期望和容忍度提前设置目标，以提高网站的性能和可靠性（例如，'我的客户整天使用我们的网站，因此他们需要它感觉敏捷-主页请求应在一秒钟内完成”）。
“您还为超出目标的频率设置了预算（例如，'主页请求的第95个百分位延迟应少于一秒钟，即99.9％的时间”）。当您的预算超出预算时，这就是您要花时间优化使预算不足的事情的信号，因此您可以确保自己正在研究客户最关心的问题。在剩下的时间里，您会对进行非性能工作感到满意，例如投资新功能或清理技术债务。”
Emily指出，在网络性能世界中，性能预算是一种特殊的SLO类型，旨在确保您的网站快速加载。有很多很棒的工具使跟踪性能预算比跟踪平均SLO更容易。
在Honeycomb，Emily使用实时开发人员工具帮助软件工程师了解生产系统中发生的事情，该团队通过跟踪生产中的页面加载时间来衡量其性能预算。但是，对于不大量使用实时用户监控（RUM）数据的团队，Emily说，跟踪和执行性能预算的最简单方法是将其内置到其构建工具（例如webpack）中并确保HTML，CSS和JavaScript限于一定的文件大小和文件数。
查看Google的Lighthouse审核工具和MDN网络文档，它们都对如何设置自己的效果预算有很好的建议。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益共享的机会，发展业务的工具以及充满激情的商业社区。
放在一起
正如我们专家的提示所显示，图像和第三方服务仍然是网站运行缓慢的主要原因之一。在图像优化上投入时间和资源，并最大程度地减少第三方影响，并且很有可能对正在工作的网站的性能产生重大影响。此外，抛开轮播并优化字体和动画，您将节省更多的时间。
将其与移动优先方法和性能预算相结合，您将拥有一个可靠的Web性能策略，其结果将使您的客户和他们的客户都满意。现在加快该网站的速度！
