我们可以增加更多功能和引入更多的工具和技术，以提升我们的网站。然而，我们需要考虑到一个不利的方面，即选择之后我们网站的速度可能会显著降低，这也会让客户感到非常失望（在2018年的一项调查中，有80% 的用户表示他们更加沮丧于加载缓慢的网站，而不是暂时关闭的网站）。在网络缓慢或低配置设备上，如果网站无法访问或无响应，甚至可能失去潜在客户的机会。
可以查证到Web性能优化对业务有重要的影响。例如，时尚零售商 Missguided 通过缩短平均页面加载时间4秒，成功提升了26%的收入。请观看下面的演讲内容：
1.首先，需要先构建适用于移动设备的系统。
客户的移动性日益增强，仅使用移动设备的客户比例呈上升趋势。然而，通常情况下移动设备上的转化率相对较低。时尚零售商网站的独立网络性能顾问安迪·戴维斯 (Andy Davies)表示，现在应该改变这种状况，将移动设备视为同等重要的工具。
他解释说，响应式网页设计让我们可以建立在桌面和移动设备上同样出色运行的网站。不幸的是，我们经常会先考虑桌面设计和制作，然后再努力调整我们的网站以适应移动设备的局限性。这给移动体验带来了缓慢和滞后的问题，尤其是对于使用 Android 设备的访问者。他们的设备通常无法处理大量的 JavaScript 和其他内容。
2.弃用轮播和滑块功能。
Shopify 速度优化专家 Alexander Lam指出，虽然在纸面上使用旋转木马、幻灯片和滑块可能是一个不错的想法，但根据他的经验，它们存在两个核心缺陷，需要引起客户的重视。
据他警告，他们会导致您的网站速度下降，且无法将访问者转化为客户。一项可用性测试由 Nielsen Norman Group 发现，访客基本上忽略了轮播功能。更让人担忧的是，通过在圣母大学网站上进行的一项测试，发现只有1%的访问者点击了第一张幻灯片。其他幻灯片的点击量较低。
不仅会阻碍转化率，轮播还有可能导致网站陷入困境。Alexander警告称，花哨的滑块需要更多的JavaScript代码，并且通常由几个巨大的图像组成。
他建议，通过摆脱轮播的方式，可以显著减少总页面大小，从而提高页面加载速度。“不要轮播，而是考虑一个英雄形象的引人注目的行动号召。”访问者点击欲点击内容的可能性会大大增加，因为它加载速度更快，吸引力更强。
具有明确号召性词汇的静态主页横幅图像。
3.对你的图片进行优化。
图片是电子商务商店的关键组成部分，通常占据了**的比重。然而，大型图像会导致网站加载速度变慢，因为较大的页面需要更多时间进行加载。
对于您或者您的客户想要保存所有的图像，Alexander Lam 建议进行至少一定程度的压缩。
他的建议是，在将任何图片上传到商店之前，先使用一些免费的图片压缩器，如tinyjpg.com或shortpixel.com等，对其进行处理。这些服务可帮助您缩小图像的数据大小，而不会损害质量或改变实际尺寸。原始图像的尺寸可以缩小超过70%，而不会出现明显的质量损失。
确保正确选择文件格式也是非常重要的。如果您需要透明像素出现在图片中，PNG 图像将会异常实用，但相比JPEG图像，它们往往会占用更多的存储空间。
Alexander建议，如果您有PNG格式的图片，且其中没有透明的像素，请在上传之前考虑将其转换为JPEG格式。”可以通过利用Photoshop或PNG2JPG等工具来转换文件的格式。
比较原始的JPEG图像和质量损失为70%的压缩版本。
4.图像的加载可以被延迟处理。
作为Castle的会议发言人兼软件工程师，Anna Migas认同图像是对网络性能产生巨大影响的元凶之一。Castle是一家初创公司，致力于帮助企业保护客户的在线账户安全。
她警告说，尽管一张图片可以传达超过一千个字的信息，但它加载所需的时间可能达到一千毫秒甚至更长，更糟糕的是，这还会延迟其他内容的加载。请设想一下，如果您的网站上有20张图片，而且它们同时进行下载，会导致什么情况发生！
根据Anna的解释，建议避免默认下载页面上的所有图像，而是采用一种被称为“延迟加载”的技术。这意味着最开始只显示页面顶部的图像，并在用户向下滚动，接近页面上其他图像的位置时开始加载剩余部分。
Anna建议使用JavaScript来实现延迟加载，在这方面有很多小型库可以帮助您。我个人偏爱的是LazyLoad和yall.js这两个库。在 Chrome 中,可以通过将loading=“lazy”属性添加到 <img> 标签实现延迟加载图像的本机功能,但这种方法并不能解决其他浏览器的相关问题。
您还可以考虑：如何在 Shopify 主题中优化图片加载以提高性能。
5. 使用字体交换加载网络字体
虽然图像无疑是电子商务网站销售议程的重要组成部分，但用户也希望快速查看价格和产品描述。这就是为什么让文本尽可能快地可见是至关重要的——但由于网络字体，它并不总是加载得足够快。
“文本可能不可见的一个原因是使用了用户计算机默认不支持的外部字体，”Anna Migas 解释道。“在那种情况下，网站需要先下载字体，然后才能显示在屏幕上。有时这可能需要一些时间，**提供一种后备字体，它会立即显示，然后换成你想要的字体。”
为此，Anna 建议，您可以font-display: swap在 @font-face 声明中添加一个属性，或者，如果您使用的是 Google 字体，则可以添加一个&display=swapURL 参数（例如：<link href=”https://fonts.geekzu.org/css?family=Roboto&display=swap” rel=“stylesheet”>).
可以在Chris Coyier 的这篇 CSS-Tricks 文章中找到更多详细信息（请注意，它是在 URL 参数选项成为可能之前编写的）。
没有（左）和有（右）字体交换的字体加载示例
6.创建流畅的动画
动画——如果做得好——可以无缝而巧妙地改善网站上的用户体验。但是，如果操作不当，它们可能会使您的访客感到困惑和分心。
目前在 Netflix 工作的**软件工程师Tyler Childs推荐了一些技术来改进使用 CSS 或 JavaScript 创建的网络动画。
CSS
“获得流畅的CSS 动画有一个小秘诀，那就是使用不会强制更改布局或重新绘制像素的属性，”Tyler 解释道。“经验法则是只使用opacityand transform，但如果你想更深入，请查看CSS Triggers。”
不透明度和变换都只影响它们正在设置样式的内容。就页面的其余部分而言，样式化的内容有效地保留在原位，但正如 Tyler 所展示的那样，魔法将会为用户发生：
其他属性，如padding, margin, width, height, top, bottom, ,left和right将迫使您的布局发生变化，这会渗透到所有内容并可能导致抖动或回流。
所有 CSS 属性都可以用于布局，但在动画内容时要小心。
JavaScript
Tyler 警告说，JavaScript 动画很棘手，因为它们与您网页上的所有其他 JavaScript 共享同一组资源。
“使用 JavaScript 平滑动画的秘诀是一种称为 的方法requestAnimationFrame，”他建议道。“正确完成后，采用这种方法的动画可以达到 60 FPS！”
实际用例requestAnimationFrame包括限制用户交互，例如滚动或拖动事件。这些事件每秒可以触发多次，这就是为什么对它们进行去抖动以控制它们触发的次数是一种非常常见的方法。
许多去抖实现的缺点是它们没有针对动画或 DOM 的任何更改进行优化。具有去抖动功能的浏览器requestAnimationFrame是**的，因为它专门针对动画进行了优化。
“下次你要阻止一个事件时，考虑尝试一下requestAnimationFrame你的去抖动，”Tyler 建议道。“**一个好处是，requestAnimationFrame在不使用网页时通过暂停回调将使用更少的系统资源。”
您可能还喜欢： 带有 CSS 变量的响应式 UI 动画。
7. 最小化第三方影响
随着电子商务创新步伐的不断加快，企业根本无法在内部构建所有内容，因此自然而然地，我们依赖越来越多的第三方服务来支持我们。
Web 性能专家Ryan Townsend警告说，其中许多服务的重点是让用户入门变得容易，而不是实施的质量，因此性能往往会因此受到影响。
“我的第一个建议是尽可能多地离开关键渲染路径，”他建议道。“确保您的网站快速绘制可以**限度地降低那些来之不易的访问者的跳出率，因此请注意您的标签中从第三方加载的任何同步脚本、样式表或字体<head>。即使您只进行微小的更改，这也会产生巨大的影响——我的一个客户仅通过将单个脚本标记更改为异步，就将他们在 3G 连接上的First Meaningful Paint时间减少了三分之一！”
解决油漆时间问题只是解决性能问题的第一步。另一个是 JavaScript 执行，Ryan 称之为当今网络的巨大瓶颈。
“我的建议是考虑何时需要第三方脚本来下载和执行，”他建议道。“我的另一个客户通过在访问者展开产品页面上的评论选项卡时加载他们的客户评论服务，而不是无论如何都在每个页面上加载它，将低端移动设备上的 CPU 执行阻塞减少了 40%。”
这种技术通常适用于实时聊天，Ryan 建议：与其在每个页面上弹出，不如考虑在产品描述或常见问题解答中提供一个按钮，当访问者表示他们希望聊天时加载它。
将单个脚本从页面加载期间的加载移动到用户操作的积极影响。
8. 预连接到关键的第三方域
浏览器在按顺序发现和下载内容方面做得很好，使我们的页面更快，但有时他们需要一点帮助，正如独立网络性能顾问安迪戴维斯指出的那样。
“有些资源发现得很晚，”他解释道。“字体和背景图片只有在浏览器开始将样式应用到页面时才会被发现，而其他资源可能依赖于脚本来插入它们——例如 Google Analytics 或 Tag Manager。如果这些资源来自第三方域名，那么在建立和保护新连接时会有延迟。”
Andy 建议使用Preconnect Resource Hint，它可以通过建议浏览器预热与第三方域的新连接来帮助克服这种延迟。
例如，如果资源托管在 example.com 上：
<link rel=”preconnect” href=”example.com”>
crossorigin如果从 example.com 获取字体，则需要添加该属性：
<link rel=”preconnect” href=”example.com” crossorigin>
一个单独的预连接有时会产生很大的不同，但安迪建议您可能需要进行试验，看看哪种方法最适合您的站点。
您可能还喜欢： 通过缩小改进商店加载时间的 5 种方法。
9. 争论你的应用
当您使用 Shopify 模版时，第三方应用程序也会产生重大影响。Shopify Plus 合作伙伴机构Disco的创始人兼首席执行官 Gavin Ballard 警告说，无论您在优化主题上投入了多少时间和精力，都可以在 Shopify App Store 上的五分钟内全部取消。
“广泛的第三方应用程序是 Shopify 的优势之一，”他解释说，“但许多应用程序开发人员并没有将主题性能放在首位，即使是那些必须构建自己的应用程序才能与 1,000,000 + Shopify 平台上的电子商务商店，而不仅仅是您客户的商店。”
为了尽量减少对 Shopify 商店的性能影响，Gavin 推荐了几个步骤。
你需要一个应用程序吗？
首先，首先考虑您是否真的需要一个应用程序。
“许多 Shopify App Store 应用程序都是为没有任何 HTML/CSS/JavaScript 技能的商家提供的，他们只想通过单击安装来满足他们的需求，”Gavin 指出。“倒数计时器、公告栏或退出意图弹出窗口之类的东西都可以构建到主题中，只需少量使用Liquid、CSS 和 JavaScript。将这些功能直接构建到您的主题中可以让您更好地控制性能影响（例如，避免加载 30 个版本的jQuery）并允许您应用此处和网络上其他地方讨论的其他技术来优化代码的交付浏览器。”
该应用程序是否给您控制权？
其次，如果您决定确实需要一个支持所需功能的应用程序，请调查该应用程序是否可以让您控制它与主题的交互方式。
“例如，流行的Back in Stock应用程序使客户能够在产品重新入库时通过电子邮件和 S 注册通知——这是仅通过主题无法实现的，”Gavin 解释道。“但是，在如何将其功能集成到 Shopify 主题方面，它为前端开发人员提供了一系列选择——通过自动安装程序、通过**和粘贴 Liquid 片段，或通过使用他们的 JavaScript 构建完全自定义的集成应用程序接口。”
Back in Stock 应用程序的 Javascript API 文档。
在几个真实案例中，Gavin 已经能够将 Back in Stock 应用程序集成到主题的产品页面中，而对初始页面大小或客户加载时间没有明显影响。如果变体缺货，他只是在产品页面上呈现一个“通知我”按钮而不是“添加到购物车”按钮，然后在页面完成后异步加载 Back in Stock JavaScript 库和一些胶水代码呈现给用户。
“如果应用程序的开发人员不提供这些类型的集成选项，那么可能值得与他们联系，看看他们是否可以做些什么，”加文建议道。“至少，这将有助于提醒应用程序开发人员，性能是客户商店的重要组成部分！”
您可能还喜欢： 内部人士对支持 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 轴被放大，因此各个跨度看起来更宽）。
“我们希望能够在发生此类问题时获得自动警报，”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 Web Docs，它们都对如何设置您自己的性能预算提供了很好的建议。
通过 Shopify 合作伙伴计划发展您的业务
无论您是提供营销、定制还是网页设计和开发服务，Shopify 合作伙伴计划都会助您取得成功。免费加入并获得收益分享机会、发展业务的工具以及充满**的商业社区。
正如我们专家的提示所示，图片和第三方服务仍然是网站运行缓慢的主要原因之一。在图像优化上投入时间和资源，并尽可能减少第三方的影响，您很可能会对您正在处理的网站的性能产生重大影响。同时放弃轮播并优化你的字体和动画，你会节省更多的时间。
将其与移动优先方法和性能预算相结合，您将拥有一个可靠的 Web 性能策略，其结果将使您的客户和他们的客户都满意。现在加速那个网站！
提高 Web 性能的**技巧是什么？在下面的评论中分享它们！
Shopify二次开发, Shopify主题开发, Shopify应用开发, Shopify定制开发, Shopify模板开发, Shopify模板设计, Shopify速度优化
扫码咨询
本文内容根据网络资料整理和来自用户投稿，出于传递更多行业新闻资讯信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！如发现文章、图片等侵权行为，请联系网站管理员，本站将立即删除。
微信扫一扫 
