01#
如何优化网站速度
1.使用内容分发网络 (CDN)
CDN有助于在全球范围内快速加载网站内容，减少加载时间。
2.不要过度修改主题
过多的主题调整可能会导致代码混乱，减慢网站速度。
3.在分类页面上启用快速查看功能
允许用户在不离开页面的情况下预览产品，减少加载多个页面的需求。
4.移除不必要的弹出窗口
弹出窗口会减慢网站加载时间，尽量避免使用或减少数量。
5.减少首页轮播图的使用
过多的轮播图会增加加载时间，保持简单并只展示最重要的内容。
6.压缩、调整和减少图片大小
大量未优化的图片会显著降低加载速度，尽量压缩和减少图片尺寸。
7.使用精简嵌入代码播放视频
使用轻量化的嵌入代码来加载视频，以减少页面加载时间。
8.减少重定向和修复断链
每个重定向和断链都会延迟加载时间，尽量减少它们的使用。
9.启用延迟加载（Lazy Loading）
让页面上的图片和其他内容仅在用户滚动到它们时加载，以加快初始加载速度。
10.避免阻止浏览器解析的脚本
确保脚本不会阻塞浏览器解析页面，从而加快页面加载速度。
11.使用Google Tag Manager管理追踪代码
02#
网站加载缓慢，会导致损失。以下是优化网站速度以提升性能和销量的方法。
互联网用户比以往任何时候都更加缺乏耐心
大约 70% 的消费者承认，网站加载缓慢会影响他们的购买意愿。这意味着必须在提供美观且内容丰富的数字体验与确保其高效之间取得平衡。
更快的网站速度还能带来更多销售。我们的数据显示，哪怕只将网站速度提升半秒，转换率也可能会增加。
接下来，将了解到提升网站速度以促进销售的顶级技巧和工具。
03#
什么是网站速度优化？
网站速度优化指的是采取策略和行动来提高网站的加载速度，也称为网站性能优化，其目标是确保您的电商商店尽可能快地加载，以免客户感到沮丧并离开网站。
有两个关键指标用于衡量速度：
●First Contentful Paint ：此指标衡量的是浏览器在用户访问页面后首次渲染内容（如文字或图片）的时间。
●Time to First Byte ：此指标衡量的是网站服务器响应用户浏览器请求所需的时间。
04#
为什么速度优化很重要？
网站速度越快，您越能抓住潜在客户，包括那些可能会因为竞争对手网站速度慢而离开的客户。
Google 建议电子商务网站的页面加载速度为两秒。但总的来说，越快越好。 Semrush的一项研究发现，如果页面加载时间超过三秒，跳出率几乎会增加三倍。
例如，如果经营的商店平均订单价值为 60 美元，每天有 5,000 名访客，则网站速度一秒钟的延迟可能会导致每天损失 9,000 美元。
加载缓慢也会对网站的可搜索性和 SEO 排名产生负面影响。谷歌是世界上最大的搜索引擎，在其搜索结果中优先考虑具有强大核心网络生命力（即网站性能）的网站。
另外，如果以付费搜索作为客户获取渠道，缓慢的网站会降低Google Ads 质量得分，这意味着每次点击费用更高。在大多数行业的客户获取和广告成本不成比例增加的时代，这是一个代价高昂的问题。
05#
影响网站速度的因素
Ecommerce platform 电商平台
Hosting 托管
Site architecture 网站架构
Excessive third-party apps第三方应用过多
电商平台
品牌需要一个拥有适当基础设施的电商平台来缩短加载时间。作为平台用户，应该与平台提供商讨论网站后端的改进，以便购物者可以快速加载网站。
渲染是当用户在 Web 浏览器中加载页面时创建 HTML 标记的过程。电商平台基础设施决定了渲染过程。
例如，Shopify店面渲染器(SFR) 是一个致力于尽快服务店面请求的应用程序。事实上， Shopify 商店是世界上最快的*，加载速度比其他平台上的商店快 1.8 倍。如果电商平台不致力于将速度作为首要任务，那么接下来的其余建议不会产生太大的影响。要知道 Shopify 上 93% 的品牌都拥有快速商店，比任何其他主要商务平台都多，您可以通过以下几项工作来进一步改进您的网站，从而拥有自己的电子商务网站速度。
托管
电商托管服务和基础设施会影响网站的性能，尤其是在高流量和高交易的日子里。
研究托管平台要求时，请注意：
促销期间和季节性促销期间扩展的内存或带宽限制
预计流量和峰值用户负载，以避免访客突然激增导致崩溃
或者是选择一个可以让避免管理自己的服务器的平台。 DTC零售商往往需要在IT基础设施上投入大量资金，而且成本多年来一直在稳步上升。Shopify在服务器上完全托管所有 Shopify 计划，这些服务器因其速度和可靠性而受到世界上一些最大的零售商的信任。在任何重大销售活动之前，请要求电商平台提供商为意外的流量高峰或订单涌入做好准备。
网站中断从来都不是一件容易处理的事情，但对于一家价值 50 亿美元的公司来说，在一年中最大的销售季节，网站中断的情况尤其严重。由于网站问题， JB Hi-Fi的网站在 BFCM 期间关闭了两个小时。 “我们已经看到知名零售商的网站瘫痪了，”JB Hi-Fi 的工程总经理 Chris Lang 说道。 “全国都知道这件事了。这对客户不利，对品牌不利。我们会采取一切措施来避免这种情况。
迁移到 Shopify 平台后，JB Hi-Fi 的销售额创下了破纪录的记录，这要归功于黑色星期五网络星期一期间在线流量几乎翻倍，而且网站性能没有出现任何问题。借助基于云的基础设施，Shopify 的总体正常运行时间为 99.98%，店面加载速度比其他 SaaS 平台快 2.97 倍。
网站架构
电商网站采用多种架构向用户和浏览器展示信息。随着规模的增长，网站会变得更加复杂。Shopify的数据科学经理Javier Moreno表示：“随着品牌的发展和日益复杂化，网站内容会更加丰富。然而，这种丰富通常伴随着速度下降，除非您时刻关注速度，否则这些变化会让网站变慢。”
为了提升网站速度，一些企业转向无头电商——一种将电子商务网站的前端与支撑其运行的后端平台分离的概念。
使用Shopify电商组件的零售商将这一概念提升到一个新的水平。他们根据需求选择所需的技术，而不是给浏览器加载过多的代码片段，从而避免影响网站速度。
随着网站规模的扩大，网站性能会变得更差。
第三方应用过多
如果您的商店安装了超过20个电子商务插件，您很可能并没有全部使用它们。也许有些插件是在试用期间安装的，后来忘记删除，但这些应用仍然在后台运行，可能会对网站性能产生不利影响。
请开发人员移除任何不必要的应用。然后，使用如GTmetrix或PageSpeed Insights等工具，或通过Chrome开发者工具中的手动测试来进行页面速度测试。点击“网络”选项卡并重新加载页面。
在安装新应用之前，问问自己，这个应用所带来的附加价值是否超过了它可能导致的加载速度变慢的影响。
大多数通过Shopify管理后台下载的应用程序脚本/CSS文件都会被注入到主题文件的 部分，位于 {{ content_for_header }} 内。
一个应用程序在加载任何其他代码之前需要被渲染。
“在加载速度与应用程序的体验和销售价值之间找到平衡，这就是为什么我们使用异步加载通过Script Tag API添加的脚本，这样页面加载就不会被暂停，”Shopify解决方案工程团队负责人Jason Bowman说，“然而，直接添加到 中的往往对性能有直接影响。”如何优化网站速度
06#
如何优化网站速度
1.使用内容分发网络（CDN）
内容交付网络或内容分发网络 (CDN) 是一组分散在世界各地的服务器。它通过距离访问者位置最近的服务器分配内容交付负载，从而使本地用户体验更快。由于越来越多的电商网站走向全球，CDN（或者对于 Shopify，双 CDN ）是平台性能不可妥协的因素。Shopify 免费提供由 Cloudflare 提供支持的世界一流的 CDN 。近年来，Shopify 通过利用静态内容的单域托管显着提高了服务器速度。这通过 HTTP/3 优先级增强了浏览器性能，并对页面元素采用了智能延迟加载技术。
通过将托管整合到单个域而不是 cdn.shopify.com 下，Shopify 可确保更快的加载时间和更好的资源管理。过去一年的 Chrome 用户体验 (CrUX) 数据显示，店面的首字节时间 (TTFB)提高了 35% ，从而增强了全球用户体验。这些优化可以带来更快的页面呈现和更一致的购物体验，无论用户位于何处。总体而言，CDN 提高了速度，同时降低了成本。 “从 Shopify 获得许可证、托管和 CDN 每年立即为我们节省了约 100,000 美元，” Red Dress Boutique老板 Diana Harbour 说道。以视觉内容为例——这通常是网站性能缓慢的原因。当您的资产（例如图像、JavaScript 和 CSS）发生更改时，Shopify 会通知 CDN。
使用 Shopify 执行此操作
Shopify 企业可以使用 asset_url 过滤器并自动将版本号附加到我们生成的所有 URL 中。例如，附加到 URL 末尾的版本号可能如下所示：?v=1384022871。此过滤器告诉 CDN 提取正确的版本。如果没有它，在更改内容后可能看不到期望的资产此外，如果直接在 CSS 中引用内容，则 URL 将是静态的。它也不会携带 Shopify 自动更新的资产版本。为了确保自动更新，请更改 CSS 语法以包含 asset_url 过滤器。有关有助于提取资产的所有 URL 过滤器的信息，请访问Shopify 帮助中心。
2.主题调整不要过度
网站的外观决定了客户与其互动的可能性。研究表明，第一印象 94% 与设计相关，而且这些决定的发生速度创纪录。网站访问者的第一印象是在十分之一秒内形成的。也就是说，网站速度和漂亮的主题之间需要权衡——后者通常伴随着混乱的代码和过多的图形。 “你不需要一个花哨的主题，”乔什·斯图特说。 “您需要一款干净、快速且易于导航的产品。我发现，只需切换到更精简的主题，新访问者的主页跳出率就会提高 50% 以上。”Anatta首席执行官兼创始人 Nirav Sheth 表示：“快速黑客不会为长期性能奠定基础，只有真正的速度改进才能做到这一点，而这要从优化底层主题架构开始。”
3、类目页面支持快速查看
快速视图弹出窗口直接从产品列表页面显示产品，而不是让访问产品详细信息页面。从理论上讲，快速查看应该可以节省客户的时间，但实际上可能会影响客户在电商网站上的体验：
为客户的旅程增加了额外的一步。
可能会被误认为是产品页面。
可能会被意外点击，这会让用户感到沮丧。
最重要的是，它可以显着减慢页面加载时间。
快速查看弹出窗口实现（内置于主题中或来自应用程序）有时可以预加载整个产品页面的信息，以防访问者选择“快速查看”按钮。
但这需要加载大量数据，尤其是在包含 20 或 30 个产品缩略图的集合页面上。点击映射（一种基于 JavaScript 的工具，用于跟踪用户在您的网站页面上滚动或移动光标的位置）可以帮助您了解客户是否正在使用快速查看。
在 Shopify 中查找快速查看
应该很容易看出店面产品缩略图上是否有“快速查看”按钮。检查主题定制器是否有启用或禁用此功能的选项。如果主题定制器中没有看到此选项，请检查它是否来自应用程序。如果是，那么如何删除它应该是显而易见的。如果前两个步骤没有帮助，它可能会融入到主题本身中。在这种情况下，需要开发人员来识别并删除它。查找Shopify 服务合作伙伴来协助完成此过程。一旦访问者单击“快速查看”弹出按钮，就使用AJAX提取产品信息。或者，将一组有限的产品信息保存为产品网格项上的数据属性。然后使用 JavaScript 动态构建 HTML 和弹出窗口。任何一个选项都不如删除快速查看选项理想。仍然需要为每个产品加载产品信息。不过，这比下载所有产品图片和链接要好。
4.删除不必要的弹出窗口
弹出窗口的存在是为了显示特别优惠或吸引人们在客户旅程中采取下一步。无论是兑换优惠券还是输入电子邮件地址，弹出窗口都有助于吸引首次访问者并为未来的沟通打开大门。然而，电商弹出窗口有一种精美的艺术。过多的闪烁图形可能会损害网站速度和性能，更不用说会分散用户与您已经针对转化进行优化的网站内容的注意力。设置有关弹出窗口使用的参数，以防止网站速度延迟。例如，可以创建弹出触发器，这样额外的代码就不会导致网站加载缓慢。页面加载后立即显示，例如退出意图或延时弹出窗口。这两个触发器都在初始页面加载和弹出窗口加载之间提供了一些喘息空间。
5.简化主页滚动大图
带有多个图像的巨大幻灯片非常适合展示产品。不幸的是，它有一个缺点：看起来不错所需的尺寸和质量可能会增加加载时间 – 特别是如果有四到五张幻灯片。
减少主页幻灯片的数量或完全消除它们。一张高质量、经过深思熟虑的英雄图片（带有明确的号召性用语）有助于快速吸引客户，因为大脑处理视觉图像的速度比处理文本的速度快 60,000 倍。
如果必须使用滑块，请遵循UX 最佳实践，例如：
●坚持使用两到三张幻灯片
●将幻灯片显示为静态内容部分，而不是自动旋转轮播
●使用srcset或延迟加载作为包罗万象的方法
例如， Chubbies使用优化的图像代替传统的主页英雄滑块。联合创始人 Tom Montgomery 表示：“我们从第一天起就与 Shopify 合作。我们都不是工程师，因此能够依靠 Shopify 的专家真是太好了，这样我们就可以专注于创新。”
6.压缩、调整大小和缩小图像
图片占网页总重量的 50% 到 75% 之间。随着电商网站规模的扩大，这可能会成为一个更大的问题。销售的产品越多，服务器上的图像文件就越多。在页面上使用的每个图像都会创建一个新的 HTTP 请求。在简化页面速度的同时，修剪图像可以事半功倍。
Evenvape的营销经理 Alex Mirzaian 表示：“当您不断通过博客文章创建内容或每天创建许多产品时，您往往会不假思索地向网站添加图像。当网站上有数千张图像时，压缩图像会很有帮助。”可以使用TinyJPG或TinyPNG等工具通过无损压缩来最小化图像大小，而不会降低质量。另外，请注意代码中的空图像源 – 。这些会向服务器发送另一个请求，从而给浏览器带来额外的负担。一种简单的解决方案是 CSS“精灵”，它将多个图像（例如图标）合并为一个，从而限制服务器单个图像请求的数量。它还可以提高页面速度。
Shopify 的内置图像尺寸参数可让下载尽可能小的图像，同时保持质量。它会向 Shopify 询问要显示的确切图像大小，然后减少从 CDN 下载的文件大小并减少所需的浏览器端缩放。
“我们的一个客户的网站加载速度很慢，因此我们首先优化图像，” Loopex Digital联合创始人 Maria Harutyunyan 说道。 “我们将它们缩小并压缩，这对页面加载速度产生了巨大影响。事实上，图像现在占用的空间减少了 60%，并且加载速度更快。”
7.使用精简版视频嵌入
视频正迅速成为互联网语言——约91% 的公司使用视频作为营销工具。但根据它们在您网站上的嵌入方式，它们可能会导致加载时间存在很大差异。YouTube 的标准嵌入代码不仅会使您的网站变得臃肿（因为某些文件甚至在访问者单击“播放”按钮之前就已下载），它还使用
8.减少重定向和损坏的链接
太多的重定向和损坏的链接会对性能产生负面影响并损害 SEO 排名。
对重定向进行一些清理工作。例如，302 重定向（表示页面已暂时移动）可能会损害SEO。它们还会触发额外的 HTTP 请求并延迟数据传输。相反，请在导航面板中使用“可缓存重定向”或 Shopify 的内置重定向功能（默认情况下为 301）。请记住：切勿将 URL 重定向到本身重定向的页面。图像、CSS 和 JS 文件等页面元素的损坏链接会增加 HTTP 请求并降低网站速度。使用损坏链接检查器等工具来删除它们。创建自定义 404 错误页面将帮助意外输入错误 URL 的访问者。
9.启用延迟加载
延迟加载是一种防止所有内容立即加载到网页上的技术。使用延迟加载的电子商务网站仅在用户点击某些触发器时才显示内容。当用户访问电商产品页面时，可以看到延迟加载的实际情况。只有首屏可见的内容会在到达后立即显示，例如商品的标题、图像和产品说明。当用户滚动到此部分下方时，会显示支持内容。用户生成的内容、社交媒体轮播和客户评论都是延迟加载的，以防止代码在加载后立即用太多信息压垮服务器。
GoGoChimp 的 Chris McCarron 在客户的电子商务商店中使用了这种页面速度优化策略：“每个网页的首屏下方都有数量惊人的图像。这样做的问题是，网络浏览器将同时下载网页上的每个图像，无论哪些图像可见。然而，延迟加载仅在可以在浏览器中查看时才下载图像
10.解除浏览器对解析器阻止脚本的阻止
在浏览器向客户显示页面之前，它必须经过一个称为“解析 HTML”的过程。但是解析器阻止脚本会中断此过程：当浏览器遇到解析器阻止脚本时，它必须停止所有操作并只专注于运行该脚本，然后才能继续执行其他操作。幸运的是，有一个简单的修复方法，只需要“async”或“defer”属性即可：
值得注意的是，JavaScript 本身不会阻止浏览器，而是 JavaScript 的加载方式决定了它是否阻止浏览器。对代码进行这些更改后，请检查以确保您的网站仍然提供相同的所需体验。
11.使用 Google 跟踪代码管理器组织跟踪
客户数据推动电商和数字营销策略。但收集这些数据也会降低网站性能。所有这些 JavaScript 跟踪标签（例如，用于一般分析、转化、目标和行为重定向）通常都是罪魁祸首。客户数据收集也可能会给开发人员、IT 或营销团队带来时间和资源负担。像 Google Tag Manager 这样的标签管理系统 (TMS) 将所有标签压缩为一个 JavaScript 请求。如果标签故障导致网站瘫痪，TMS 还可以帮助快速删除标签。Nirav Sheth 补充道，当 Anatta 优化美容领域电子商务网站的网站速度时，“最能提高网站速度的是利用 Shopify API 和清理 Google 跟踪代码管理器的结合。”只需使用一小段代码即可使用 Google 跟踪代码管理器在一个位置管理您的 Shopify 商店代码。
12.谨防过多的代码循环
Liquid是一种功能强大的 Shopify 编码语言。但在某些情况下，您需要权衡额外收益与权衡。Forloop 迭代就是其中之一。 Forloop意味着系统必须循环（例如抓取或搜索）集合中的所有产品，并且在查找特定条件（例如价格或标签）时发生。这些功能在某些情况下可能很有用，例如输出图像或产品变体。当产品系列页面上的产品数量较少时，它们也很有帮助，但要注意对加载时间的影响。检查主题代码，确保没有多次运行液态 for 循环来查找相同的信息。当多个开发人员处理同一个主题并且可能重复任务或引入冲突的代码时，就会发生这种情况。删除这些重复项将使页面加载速度更快。使用简单的product.options_with_values循环通常更容易。
13.构建加速移动页面
Accelerated Mobile Pages (AMP) 是 Google 赞助的一个项目，旨在为移动设备重新格式化网站内容。在启用 AMP 的网站上，Google 会缓存每个页面，并在用户每次通过搜索访问时重新加载它。与非 AMP 页面相比，这减少了页面加载时间，导致页面花费时间增加两倍，转化率增加 20%。使用AMP 、 Fire AMP或AMP 应用程序等 Shopify 应用在您的电子商务商店中实施 AMP。每个都消除了复杂的代码，使您的移动网站变得混乱，从而快速加载页面。
14.禁用移动视频自动播放
并非所有移动互联网用户都通过强大的网络连接浏览电商网站。也许他们是Allbirds 的顾客，在徒步途中浏览零售商的网站，此时他们所穿的鞋子已经散架了。或者他们是Firebelly Tea 的顾客，在停车场等待孩子放学时订购下一盒茶包。无论哪种方式，这些人都可能会观看零售商用来在其移动网站上与潜在客户沟通的视频。但自动播放这些视频可能会导致网站速度严重滞后。当视频设置为自动播放时，移动网络连接需要下载大文件。当它被静态缩略图和触发视频的可选按钮取代时，全尺寸文件不需要通过弱互联网连接加载。参观者在创纪录的时间内首次获得有意义的景观。
15.优化移动端结账
在提高移动网站速度时，结帐流程常常被遗忘。主页、产品和类别页面受到最多的关注，主要是因为不希望潜在客户在第一个障碍中跌倒：他们与商店的初始移动交互。未能将结账流程纳入网站速度优化策略可能会导致更高的购物车放弃率。人们有足够的信心亲自挑选他们想要购买的商品。但如果他们在结账时遇到延迟，他们需要真正喜欢购物车中的产品才能留下来。或者换句话说，可能会失去冲动购物者。Shop Pay使移动购物者能够以创纪录的速度快速完成结账。根据一项外部研究，使用 Shop Pay 结账的零售商的移动结账订单率比使用常规结账的零售商高 1.91 倍。Kotn联合创始人本杰明·塞尔 (Benjamin Sehl) 表示：“如今，我们的大多数客户都在移动设备上随时随地发现新产品，如果他们必须填写表格，我们就会失去他们。”结账确实让客户体验中最痛苦的一点变得愉快，而且由于它与百万商户生态系统紧密相连，即使是新客户也可以一键结账。”
07#
网站速度测试工具
每个速度测试工具都使用不同的评分方法，就像每个团队对良好网站速度都有不同的定义一样。提供“页面加载”计时的工具必须在其结果中选择一个特定的时间标记（例如 TTFB）。
Shopify 的网络性能仪表板
Shopify 的网络性能仪表板是一款功能强大的工具，旨在帮助电商品牌优化其数字店面。当页面加载时间和用户体验关系到销售的成败时，此仪表板可提供有关商店在三个关键核心 Web 生命体方面的绩效的宝贵见解：
●加载速度
●互动性
●视觉稳定性
该仪表板根据 28 天收集的数据展示真实客户在桌面和移动设备上的商店体验。可以通过跟踪性能排名（从“好”到“差”）来观察应用安装或主题更新等变化如何随时间影响指标。
借助可定制的过滤器和清晰的可视化效果，商家可以确定需要改进的领域，并做出数据驱动的决策，以提高商店绩效。优化核心网络生命力也是提高转化率和商店在搜索结果中的可见度的有效方法。随着 Shopify 不断发展其基础设施，该仪表板已成为商家努力为现代在线购物者提供无缝、快速加载体验的重要工具。
Shopify Site Speed Audit Shopify 网站速度审核
Shopify站点速度审核可让您执行有竞争力的站点速度分析。输入网站详细信息以及托管网站的当前平台（例如 Adobe Commerce (Magento)、WooCommerce）。该工具将测量各种性能指标，例如加载时间、TTFB 和相关速度因素。
该工具使用从数百万笔全球交易中收集的数据，将当前网站的速度指标与 Shopify 上的平均或预期性能进行比较。然后该工具显示比较结果。例如，它可能表明，如果用户的 WooCommerce 网站托管在 Shopify 上，速度会提高一定百分比。
Google PageSpeed Insights谷歌页面速度洞察
PageSpeed Insights是一款 Google 实验室工具，可为您提供个性化建议以提高网站性能。它还会指出网站上导致页面速度变慢的元素，例如 CSS 和 JavaScript。
甚至可以查看竞争对手的移动网站性能。了解他们的网站出了什么问题可以避免犯同样的错误。
GTMetrix
GTMetrix为网站提供从 A 到 F 的速度等级。它合并来自 Yslow 和 PageSpeed Insights 的数据，以提供网站性能报告，其中包括：
●页面加载速度
●网络生命和灯塔分析
●网站速度优化机会
●按请求和总字节大小划分的页面组成细分
Pingdom
Pingdom.com将对网站性能进行评分（范围从 0% 到 100%）。它还具有有用的“瀑布分析”功能，可以帮助您识别其他主要问题领域。这种逐行评分是一个有用的参考工具。
