我们可以向我们的网站添加更多功能，并拥有比以往更多的工具和技术。然而，不利的一面是，我们的选择可能会显着降低我们网站的速度，这让客户感到非常沮丧（在2018 年的一项调查中，80% 的用户表示加载缓慢的网站比暂时关闭的网站更令人沮丧）。当网站在缓慢的网络条件下或低端设备上变得无法访问或无响应时，它甚至可以完全排除潜在客户。
Web 性能优化的业务影响有据可查。例如，时尚零售商 Missguided 将平均页面加载时间缩短了 4 秒，并将收入提高了 26%。在下面观看有关此内容的演讲：
1.首先为移动设备构建
客户的移动性越来越强，仅使用移动设备的客户比例正在上升。然而，移动端的转化率往往较低。在上述时尚零售商网站工作的独立网络性能顾问安迪·戴维斯 (Andy Davies)表示，是时候改变这种状况了，最终将移动设备视为一等公民。
“响应式网页设计使我们能够构建理论上可以在桌面和移动设备上同样出色运行的网站，”他解释道。“不幸的是，我们通常似乎首先为桌面设计和构建，然后尝试缩小我们的网站以适应移动设备的限制。这导致了缓慢、滞后的移动体验，尤其是对于使用 Android 的访问者而言，他们的设备通常无法处理桌面上大量的 JavaScript 和我们抛给他们的其他内容。”
2.停止使用轮播和滑块
旋转木马、幻灯片和滑块在纸面上听起来可能是个好主意，但 Shopify 速度优化专家 Alexander Lam是 Shopify 应用程序Hyperspeed背后的Rvere首席执行官，他警告说，它们有两个主要缺陷，我们需要让我们的客户意识到这一点。
“他们不会将访问者转化为客户，而且会降低您网站的速度，”他警告说。“ Nielsen Norman Group 的一项可用性测试发现，轮播基本上被访客忽略了。更糟糕的是，在圣母大学网站上进行的一项测试发现，只有百分之一的访问者点击了第一张幻灯片。其余幻灯片的点击次数更少。”
轮播不仅不利于转换，还会使网站陷入困境。Alexander 警告说，花哨的滑块需要额外的 JavaScript，并且通常由几张大图像组成。
“摆脱轮播可以使页面加载速度更快，因为总页面大小将显着减少，”他建议道。“考虑一个放置得当的英雄形象，并带有引人注目的行动号召，而不是轮播。它的加载速度会快得多，而且您会吸引更多访问者点击您希望他们点击的内容。”
3.优化你的图片
图片是任何电子商务商店的重要组成部分，而且它们通常占其中的最大部分。但是，大图像会使网站变慢，因为较大的页面需要更长的加载时间。
如果您或您的客户想要保留所有图像，Alexander Lam 建议至少压缩它们。
“在将任何图片上传到商店之前，先通过tinyjpg.com或shortpixel.com等免费图片压缩器运行它，”他建议道。“这些服务将使您的图像在数据大小方面更小，而不会牺牲质量或改变它们的实际尺寸。原始图像通常可以缩小 70% 以上，而没有任何明显的质量变化。”
确保您使用正确的文件格式也很重要。如果您希望图片中有透明像素，PNG 图像非常有用，但它们通常比 JPEG 占用更多空间。
“如果您有没有透明像素的 PNG，请考虑在上传之前将其转换为 JPEG，”Alexander 建议。“使用 Photoshop 或PNG2JPG等服务更改文件格式。”
4.延迟加载图像
Anna Migas是Castle的会议发言人兼软件工程师，这是一家帮助企业保护客户在线帐户安全的初创公司，她同意图像是影响网络性能的最大罪魁祸首之一。
“一张图片可以表达一千多个字，但它也可能需要一千毫秒或更长时间才能加载，更糟糕的是，会延迟加载其他内容，”她警告说。“想象一下，如果您的网站有 20 张图片并且它们都争相下载，会发生什么情况！”
Anna 解释说，最好不要默认下载页面上的所有图像，而是使用一种称为延迟加载的技术。这意味着最初只提供页面顶部的图像，并在用户向下滚动并靠近页面上可以找到更多图像的位置时开始获取其余部分。
“延迟加载通常使用 JavaScript 完成，您可以找到大量小型库来帮助您实现这种效果，”Anna 建议。“我个人最喜欢的是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应用程序使客户能够在产品重新入库时通过电子邮件和 SMS 注册通知——这是仅通过主题无法实现的，”Gavin 解释道。“但是，在如何将其功能集成到 Shopify 主题方面，它为前端开发人员提供了一系列选择——通过自动安装程序、通过复制和粘贴 Liquid 片段，或通过使用他们的 JavaScript 构建完全自定义的集成应用程序接口。”
在几个真实案例中，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 性能的最佳技巧是什么？在下面的评论中分享它们！
网络性能常见问题解答
Web性能的含义是什么？
什么是良好的网络性能？
我怎样才能提高我的网络性能？
- 使用内容分发网络 (CDN)。
- 尽量减少 HTTP 请求。
- 启用浏览器缓存。
- 优化图像。
- 缩小 HTML、CSS 和 JavaScript。
- 减少服务器响应时间。
- 使用更快的网络托管服务提供商。使用延迟加载。
- 使用 GZIP 压缩。
- 使用浏览器缓存。
