我们可以为网站添加更多功能，并拥有比以往更多的工具和技术。然而不利的一面是，我们的选择可能会显着降低我们的网站速度，这让客户非常沮丧（在一项调查中，80% 的用户表示加载缓慢的网站比暂时关闭的网站更令人沮丧）。当网站在缓慢的网络条件或低端设备上变得无法访问或无响应时，它甚至可以完全排除潜在客户。
Web 性能优化对业务的影响是有据可查 的。例如，时尚零售商 Missguided 将页面加载时间中值缩短了 4 秒，收入增加了 26% 。
以下七位专家提出了一些有助于提高网站性能的技巧。
1. 首先为移动端构建
客户的移动性越来越强，仅移动客户的比例正在上升。但是，移动设备的转化率往往较低。在上述时尚零售商网站工作的独立网络性能顾问安迪戴维斯表示，是时候改变这种状况了，最终将移动设备视为一等公民。
“响应式网页设计使我们能够构建理论上可以在桌面和移动设备上同样运行的网站，”他解释道。“不幸的是，我们似乎经常首先为桌面设计和构建，然后尝试缩小我们的网站以适应移动设备的限制。这会导致移动体验缓慢、滞后，尤其是对于使用 Android 的访问者而言，他们的设备通常无法处理桌面数量的 JavaScript 和我们向他们投放的其他内容。”
为了创造快速的移动优先体验，Andy 建议构建可在低成本 Android 手机（例如 Alcatel 1x）上使用的网站，然后在运行时对其进行增强，以通过更强大的设备和更大的屏幕为访问者提供更丰富的体验。
2.停止使用轮播和滑块
轮播、幻灯片和滑块在纸面上听起来可能是个好主意，但 Shopify 速度优化专家、Rvere 的首席执行官 Alexander Lam警告说，他们有两个主要缺陷，我们需要让我们的客户意识到这一点。
“他们不会将访问者转化为客户，并且会减慢您的网站速度，”他警告说。“尼尔森诺曼集团的一项可用性测试 发现，访客基本上忽略了轮播。更糟糕的是，在圣母大学网站 上进行的一项测试发现，只有 1% 的访问者点击了第一张幻灯片。其余幻灯片的点击次数更少。”
轮播不仅在转换方面很糟糕，而且还会使网站陷入困境。Alexander 提醒说，花哨的滑块需要额外的 JavaScript，并且通常由几张大图像组成。
“摆脱轮播可以使页面加载速度更快，因为总页面大小将显着减小，”他建议道。“考虑一个位置恰当的英雄形象，它带有引人注目的号召性用语，而不是轮播。它的加载速度会更快，并且您会吸引更多访问者点击您希望他们点击的内容。”
3.优化您的图像
图片是任何电子商务商店的重要组成部分，它们通常构成其中的最大部分。但是，由于较大的页面需要更长的加载时间，因此大图像可能会使网站慢下来。
如果您或您的客户想要保留所有图像，Alexander Lam 建议至少压缩它们。
“在将任何图像上传到网站之前，请通过tinyjpg.com 或shortpixel.com 等免费图像压缩器运行它，”他建议道。“这些服务将使您的图像在数据大小方面更小，而不会牺牲质量或改变其实际尺寸。原始图像通常可以缩小 70% 以上，而没有任何明显的质量变化。”
确保使用正确的文件格式也很重要。如果您希望图片中有透明像素，PNG 图像非常有用，但它们通常比 JPEG 占用更多空间。
“如果您的 PNG 没有透明像素，请考虑在上传之前将其转换为 JPEG，”Alexander 建议道。“使用 Photoshop 或PNG2JPG 等服务更改文件格式。”
将原始 JPEG 与压缩版本进行比较，质量损失为 70%。
4. 延迟加载图片
帮助企业保护客户在线帐户安全的初创公司Castle 的会议发言人和软件工程师Anna Migas 同意图像是网络性能的最大罪魁祸首之一。
“一张图片可以说一千多个单词，但加载也可能需要一千毫秒或更长时间，更糟糕的是，会延迟加载其他内容，”她警告说。“想象一下，如果您的网站有 20 张图片并且它们都竞相下载会发生什么！”
Anna 解释说，最好不要默认下载页面上的所有图像，而是使用一种称为延迟加载的技术。这意味着最初只提供页面顶部的图像，并在用户向下滚动并靠近页面上可以找到更多图像的位置时开始获取其余图像。
“延迟加载 通常使用 JavaScript 完成，您可以找到大量小型库来帮助您实现此效果，”Anna 建议道。“我个人最喜欢的是LazyLoad 和yall.js 。在 Chrome 中，可以通过将属性添加到 <img> 标记来使用本机函数来延迟加载选定的图像loading=“lazy”
5. 通过字体交换加载网页字体
虽然图像无疑是电子商务网站销售议程的重要组成部分，但用户也希望快速查看价格和产品描述。这就是为什么尽可能快地显示文本至关重要的原因——但由于网络字体 的原因，它的加载速度并不总是足够快。
“文本可能不可见的一个原因是使用了用户计算机默认不支持的外部字体，”Anna Migas 解释道。“在这种情况下，网站需要先下载字体，然后才能显示在屏幕上。有时这可能需要一些时间，最好提供一种后备字体，该字体会立即显示，然后换成您想要的字体。”
为此，Anna 建议，您可以font-display: swap在 @font-face 声明中添加一个属性，或者，如果您使用的是 Google 字体，则可以添加一个&display=swapURL 参数（例如：<link href="https://fonts.googleapis.com/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 所展示的，魔术将为用户发生：
https://codepen.io/tylerchilds/embed/vYYeZXv?height=265&theme-id=default&default-tab=css%2Cresult&user=tylerchilds&slug-hash=vYYeZXv&pen-title=CSS%20Animations&name=cp_embed_1
其他属性，如padding, margin, width, height, top, bottom,left和right将强制您的布局更改，这会渗透到所有内容并可能导致thrashing 或 reflow 。
所有 CSS 属性都可以用于布局，但在为内容设置动画时要小心。
JavaScript
Tyler 警告说，JavaScript 动画很棘手，因为它们与您网页上的所有其他 JavaScript 共享相同的资源集。
“使用 JavaScript 平滑动画的秘诀是一种称为 的方法requestAnimationFrame
实际用例requestAnimationFrame包括限制用户交互，例如滚动或拖动事件。这些事件每秒可以触发多次，这就是为什么对它们进行去抖动以控制触发次数是一种非常常见的方法。
许多去抖动实现的缺点是它们没有针对动画或对 DOM 的任何更改进行优化。带有去抖动功能的浏览器requestAnimationFrame是最好的，因为它专门针对动画进行了优化。
“下次你要限制事件时，考虑尝试requestAnimationFrame作为你的去抖动，”泰勒建议。“最后一个好处是，requestAnimationFrame当网页不使用时，通过暂停回调将使用更少的系统资源。”
您可能还喜欢： 带有 CSS 变量的反应式 UI 动画 。
7. 尽量减少第三方影响
随着电子商务创新步伐的不断加快，企业根本无法在内部构建所有东西，因此我们自然而然地依赖越来越多的第三方服务来支持我们。
Web 性能专家Ryan Townsend 警告说，其中许多服务的重点是使用户入门 变得容易，而不是实施的质量，因此性能经常因此受到影响。
“我的第一个建议是尽可能远离关键渲染路径 ，”他建议道。<head>“确保您的网站快速绘制可以最大限度地降低这些来之不易的访问者的跳出率，因此请注意标签中从第三方加载的任何同步脚本、样式表或字体。即使您只进行微小的更改，这也会产生巨大的影响——我的一个客户仅通过将单个脚本标签更改为异步，就将他们在 3G 连接上的首次有意义的绘制时间减少了三分之一！”
解决油漆时间只是解决性能问题的一步。另一个是 JavaScript 执行，Ryan 称其为当今网络的巨大瓶颈 。何时 需要第三方脚本来下载和执行，”他建议道。“我的另一个客户通过在访问者在产品页面上展开评论选项卡时加载他们的客户评论服务，而不是在每个页面上加载它，从而将阻塞低端移动设备上的 CPU 执行减少了 40%。”
Ryan 建议，这种技术通常适用于实时聊天：与其在每个页面上弹出 它，不如考虑在产品描述或常见问题解答中提供一个按钮，当访问者表示他们希望聊天时加载它。
将单个脚本从页面加载期间的加载移动到用户操作的积极影响。
8. 预连接到关键的第三方域
浏览器在以使我们的页面更快的顺序发现和下载内容方面做得很好，但有时它们需要一点帮助，正如独立的网络性能顾问安迪戴维斯 指出的那样。
“有些资源发现较晚，”他解释道。“字体和背景图像仅在浏览器开始将样式应用于页面时才会被发现，而其他资源可能依赖于脚本来插入它们——例如谷歌分析或跟踪代码管理器。如果这些资源来自第三方域名 ，那么在建立和保护新连接时会有延迟。”
Andy 建议使用Preconnect Resource Hint ，它可以通过建议浏览器预热到第三方域的新连接来帮助克服这种延迟。
例如，如果资源托管在 example.com 上：
<link rel=”preconnect” href=”example.com”>
crossorigin如果从 example.com 获取字体，则需要添加该属性：
<link rel=”preconnect” href=”example.com” crossorigin>
单个预连接有时会产生很大的不同，但 Andy 建议您可能需要进行试验，看看哪种方式最适合您的站点。
您可能还喜欢： 5 种通过缩小来提高商店加载时间的方法 。
9. 争吵你的应用程序
当您使用 Shopify 模版时，第三方应用也会产生重大影响。Shopify Plus 合作伙伴机构Disco 的创始人兼首席执行官 Gavin Ballard 警告说，无论您在优化主题上投入了多少时间和精力，都可以在 Shopify 应用商店的五分钟内轻松完成。
“广泛的第三方应用程序可用是 Shopify 的优势之一，”他解释说，“但许多应用程序开发人员并没有将主题性能放在首位——甚至那些必须构建应用程序才能与 1,000,000 + Shopify 平台上的电子商务商店，而不仅仅是您客户的。”
为了尽量减少对 Shopify 商店的性能影响，Gavin 推荐了几个步骤。
你需要一个应用程序吗？
首先，首先考虑您是否真的需要 一个应用程序。
“许多 Shopify 应用商店应用程序都是为没有任何 HTML/CSS/JavaScript 技能的商家提供的，他们只想通过一键式安装来解决他们的需求，”Gavin 指出。“倒数计时器、公告栏 或退出意图弹出窗口 之类的东西都可以通过少量的Liquid 、CSS 和 JavaScript 构建到主题中。将这些功能直接构建到您的主题中可以让您更好地控制性能影响（例如，避免加载 30 个版本的jQuery ），并允许您应用此处和网络上其他地方讨论的其他技术来优化您的代码交付浏览器。”
该应用程序是否让您控制？
其次，如果您确定确实需要支持所需功能的应用程序，请调查该应用程序是否让您控制它与主题的交互方式。
“例如，流行的Back in Stock 应用程序使客户能够在产品重新入库时通过电子邮件和 SMS 注册通知——这仅通过一个主题是无法实现的，”Gavin 解释说。“然而，它为前端开发人员提供了一系列选项，包括如何将其功能集成到 Shopify 主题中——通过自动安装程序、复制和粘贴 Liquid 片段，或使用他们的 JavaScript 构建完全自定义的集成API。”
Back in Stock 应用程序的 Javascript API 文档。
在几个实际案例中，Gavin 能够将 Back in Stock 应用程序集成到主题的产品页面中，而对初始页面大小或客户加载时间没有明显影响。如果变体缺货，他只是在产品页面上呈现“通知我”按钮而不是“添加到购物车”按钮，然后在页面完成后异步加载 Back in Stock JavaScript 库和一些胶水代码呈现给用户。
“如果应用程序的开发人员不提供这些类型的集成选项，那么可能值得与他们联系，看看他们是否可以做些什么，”Gavin 建议道。“至少，它将有助于提醒应用程序开发人员，性能是其客户商店的重要组成部分！”
10.监控每个子域的请求数
自从Honeycomb.io 的工程总监Emily Nakashima 在 2000 年代初开始为 Web 编写代码以来，浏览器的速度已经突飞猛进，但是对于我们这些仍然需要支持 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% 延迟应低于 1 秒，99.9% 的时间’）。当您超出预算时，这就是您花时间优化会使您低于预算的事情的信号，因此您可以确保您正在处理客户最关心的事情。剩下的时间，你可以对做非绩效工作感觉良好，比如投资新功能或清理技术债务。”
Emily 指出，在网络性能领域，性能预算是一种特定类型的 SLO，旨在确保您的网站快速加载。有很多很棒的工具可以让跟踪性能预算比跟踪平均 SLO 更容易。
在 Honeycomb，Emily 开发一种实时开发工具，帮助软件工程师了解他们的生产系统中正在发生的事情，该团队通过跟踪生产中的页面加载时间来衡量他们的性能预算。然而，对于没有广泛使用真实用户监控 (RUM) 数据的团队，Emily 表示，跟踪和执行性能预算的最简单方法是将其构建到他们的构建工具（例如webpack ）中，并确保他们的HTML、CSS 和 JavaScript 仅限于特定的文件大小和文件数量。
查看 Google 的Lighthouse 审计工具和MDN Web Docs ，它们都对如何设置自己的性能预算提供了很好的建议。
把它们放在一起
正如我们的专家提示所示，图像和第三方服务仍然是网站运行缓慢的主要原因之一。在图像优化上投入时间和资源并尽可能减少 第三方影响，您很有可能会对您正在处理的网站的性能产生重大影响。还可以放弃轮播并优化字体和动画，您将节省更多时间。
将其与移动优先 方法和性能预算相结合，您将拥有可靠的网络性能策略，其结果将使您的客户和他们的客户都感到高兴。现在加快该网站的速度！
