集市之声
已发表: 2024-02-14任何在重大节日前一天去杂货店购物的人都知道绕圈寻找停车位并努力争取其他 50 个人想要的物品的痛苦。 任何人都不想在自己的电子商务商店中复制这种体验，但如果您不努力提高网站性能，您就可能会这样做。
好吧，好吧，也许我们有点夸张了。 没有什么比在商店音响系统中响起你最不喜欢的圣诞歌曲时试图找到一个不太像样的土豆更糟糕的了。 然而，我们确实知道顾客喜欢网上购物所提供的便利。 近 70% 的消费者将网站速度作为他们从在线零售商处购买的意愿的考虑因素。 大多数在线购物者期望页面加载时间为 3 秒或更短。
如果您最近没有对您的网站进行性能检查，那么现在就已经过去了。 以下是评估您当前表现的方法，以及任何人都可以采取的一些步骤来优化电子商务网站以获得快速的购物体验。
章节：
- 为什么网站性能很重要
- 7个主要网站性能指标
- 如何衡量您的网站性能
- 如何提高电子商务网站的性能
- 网站性能就是对速度的需求
为什么网站性能很重要
如果您没有达到 3 秒加载标记，这真的很重要吗？ 是的，它确实。 未能优先考虑网站加载速度会降低用户体验的质量，这在很多方面都是不好的。
首先也是最明显的，更长的加载时间意味着更高的跳出率。 即使用户在最初的几个缓慢的页面加载中坚持下来，也可能在购买之前放弃您的网站。
较低的初始转化率可能会伴随较低的整体忠诚度。 那些记得自己购物体验不佳的客户不太可能再次尝试，而且他们也不想点击将他们引导至您网站的链接。
糟糕的网站性能也会影响您的 Google SERP 排名。 由于搜索引擎的算法优先考虑用户体验，加载速度慢的页面在搜索结果中会被下推。 较小的媒体争夺注意力可能会输给速度更快的竞争对手。
7个主要网站性能指标
页面加载时间不是独立的网站性能指标。 这是一项综合了多个指标的总体评估。 其中四个指标是 Google 的核心网络生命力：
- 最大内容绘制测量用户可以在“首屏”（即无需向下滚动）看到的最大页面元素的加载速度
- 与 Next Paint 的交互衡量页面对交互的响应能力，例如单击“添加到购物车”按钮或在表单中输入信息
- 首次输入延迟测量用户与您的网站交互（例如，单击“添加到购物车”按钮）和浏览器开始处理该请求之间的时间间隔
- 累积布局偏移测量页面加载时页面内容移动的频率
谷歌认为这些方面最重要，因为它们对用户体验影响最大。 但是，还有其他四个指标也可以捕获用户体验的重要部分：
- 首字节时间衡量您的 DNS 提供商在收到请求后开始交付网站内容的速度
- 总阻塞时间衡量网页加载到用户可以与其交互所需的时间（因为正在加载页面的浏览器无法处理交互）
- First Contentful Paint衡量网站第一个内容渲染所需的时间
如果您想深入了解这些指标中的任何一个，Google 的 web.dev 网站会详细解释每个指标的重要性以及如何衡量它们。 或者，您可以继续阅读我们讨论衡量您网站的性能。
如何衡量您的网站性能
使用 Google 的免费 PageSpeed Insights 可以轻松衡量网站的性能。 该工具根据上面列出的指标评估您的网站，并将其排名为良好、需要改进或较差。 您还将获得有关网站性能、可访问性、最佳实践使用和 SEO 的注释。
有一个选项可以查看您的网站在移动设备和桌面设备上的表现以及帮助您优化网站的提示。 在谷歌的网络生态系统中，你可以以低廉的生活成本得到很多帮助，让我们面对现实吧——这已经发生了。
当您查看报告时，您可能会注意到总阻塞时间被排除在“核心网络生命评估”框中。 向下滚动到“性能”框，然后查看“指标”表以查看结果。
PageSpeed Insights 通过颜色编码图形和个性化提示，让您轻松了解您的网站为何获得如此高的排名。 现在就开始运行测试 - 只需几秒钟 - 这样您就可以获得网站性能的基线，并了解哪些地方还有改进的空间。
如何提高电子商务网站的性能
如果您还在这里，我们会假设您的核心网络生命评估显示您还有一些工作要做。 这并没有什么可耻的。 连Google的web.dev网站都没有通过评估！ 以下是我们的最佳提示，可帮助您提高电子商务网站的性能以及实现这一目标所需的工具。
1. 减少 HTTP 请求
HTTP 请求存在于加载网页的核心。 您无需了解此处的技术细节 - 只需了解浏览器必须发出这些请求即可加载页面上的 CSS 文件、脚本、图像和其他内容。 每个请求都要求浏览器向您的网络主机发送一条消息，然后网络主机必须以适当的内容进行响应。
HTTP 请求越多，完成所有请求所需的时间就越长。 想象一下，如果您去一家餐馆，首先要了水，然后当服务员回来时，点了一杯苏打水。 当他们送来苏打水时，你要了一份开胃菜。 最后，开胃菜上桌后，您就决定了主菜。 无论服务员的速度有多快，你都需要很长时间才能吃完饭。
删除不必要的 HTTP 请求，让您的（Web）服务器休息一下。 如果您不需要脚本或 CSS 文件，请不要在页面标题中引用它。 您还可以尝试减少多媒体内容以提高页面加载速度。
2. 使用 HTTP/2
并非所有 HTTP 请求都是一样的。 HTTP/2 是 2015 年首次推出的标准，具有可帮助您更快加载网页的功能。 首先，它允许开发人员确定首先加载哪些元素的优先级，因此您可以告诉浏览器在较大的脚本之前请求轻资源。 它还可以同时服务多个资源。 回到我们餐厅的比喻，HTTP/2 允许您一次发出整个订单，以便服务员可以更快地为您提供食物。
KeyCDN 有免费的 HTTP/2 测试来确定您的网站是否支持 HTTP/2 协议。 或者，如果您想仔细查看，请打开浏览器的开发人员工具，导航到网络选项卡，然后查找“协议”列。 （您可能必须右键单击列列表并添加协议。）
HTTP/2 支持由您的网络主机决定，因此如果您需要启用该协议，可以求助于它们。 每个提供商的流程都不同。
3. 消除不必要的重定向
许多公司在网站检修期间采用重定向来绕过链接失效。 但是，每次将用户重定向到新页面时，都会迫使他们等待另一个页面加载。 特别是导致另一个重定向的重定向 - 不，谢谢！ 当用户到达实际的 URL 时，他们已经准备好关闭您的页面。
重定向有随着时间的推移而累积的习惯。 这意味着您需要定期审核它们； 在重新设计或重新构建网站后这样做尤其重要。
Screaming Frog SEO Spider 可以帮助您检查整个网站的重定向，甚至为您检测重定向链和循环。 您还可以使用 Ahrefs SEO 工具栏逐页检查，但我们不建议这样做。 除非你确实有某种义务想要摆脱。
4. 限制外部脚本
大多数开发人员使用第三方脚本来添加他们没有资源进行内部编码的功能。 不过，就页面速度而言，合并外部脚本总是存在风险的。 您无法控制代码，因此如果脚本加载缓慢，您将无法执行任何操作。
缓慢加载的脚本会使页面加载时间更长，并可能导致内容跳跃等问题（通过累积布局移位指标来衡量）。
检查每个页面以确保没有加载不必要的脚本。 例如，您可能在整个网站上启用了评论功能，但您不需要在用于浏览的页面上包含该脚本。 您还可以问自己是否真的需要该模式来收集客户的电子邮件，或者它是否会拒绝比吸引的买家更多的买家。
更多的花哨并不总是更好。 一个具有良好用户体验的简单网站可以击败过度设计的商店。
5. 启用延迟（异步）加载
当浏览器呈现网站时，它的默认设置是按顺序处理每个请求，仅在完成当前任务后才转到下一个命令。 大型脚本会减慢整个过程，因为浏览器必须加载整个文件才能继续渲染其余内容。
通过指示浏览器异步加载脚本（即在继续渲染网页的同时）来避免这种延迟。 只需将 async 属性添加到您的脚本标记中（您的代码将如下所示：<script src=”my_script.js” async></script>）。
一些专家建议在正文内容底部附近添加 <script> 标记，因为较旧的浏览器可能无法读取 async 属性，但没有必要这样做。 您很难在野外找到无法处理异步标记的浏览器。
6. 使用移动优先设计
网站性能优化需要包括移动优先的思维。 目前，智能手机是近五分之四的电子商务网站访问量和三分之二的电子商务购买量的来源。 不幸的是，移动网络仍然是一个障碍。 大多数网站在移动设备上的加载时间要长得多。 如果网站加载时间超过 3 秒，超过 50% 的移动访问者会准备跳槽，电子商务零售商可能会失去大量业务。
如今几乎每个发布的网站都是响应式的，但是为桌面编码然后针对移动设备进行优化的设计师可能会按照错误的顺序进行。 使用手机模拟器进行小屏幕设计将不断增长的受众的需求放在首位。
另外，这很简单 - Google Chrome 的开发工具允许您进入“设备模式”以查看您的网站在较小屏幕上的外观。
手机设计还要求您充分利用有限的屏幕空间，这可能意味着您选择较少的装饰元素，这些元素会减慢页面速度。 您还需要简化导航和交互，而不是寻求需要外部脚本和插件的华而不实或独特的体验。
如果您正在使用现有站点，那么您现在可能无法实施此实践。 下次重新设计时请记住这一点。
7. 使用 gzip 压缩基于文本的文件
HTML 和 CSS 文件的加载可能看起来不太麻烦，但当您以毫秒为单位计算时，每个字节都很重要。 压缩可以减小基于文本的文件的大小，以便它们可以更快地从服务器传输到客户的浏览器。 Gzip 是最常见的压缩框架，但 Brotli 和 Deflate 也可以很好地加速您的网站。
这是在托管端设置的另一个功能。 大多数主机默认启用它，但最好使用免费的 HTTP 压缩测试来检查您的主机。 如果您发现您的内容未经过压缩，则需要联系您的托管提供商。
8. 缩小 CSS、JavaScript 和 HTML 文件
像 Gzip 这样的压缩框架并不是唯一的字节节省者。 您还可以通过删除任何不是代码关键部分的内容（例如注释、格式或冗长的变量名称）来缩小文本文件。 其中许多元素对人类开发人员很有帮助，但网络浏览器不需要它们来直接显示您的网页。
无需自己检查并删除注释以及多余的空格和制表符。 Minifier.org 提供了一个可以处理 CSS 和 JavaScript 的免费工具。 Google 的 web.dev 推荐这个免费的 HTML 压缩器。
如果您正在寻找可以大规模缩小的工具，Google 的 PageSpeed 模块可以与 Apache 或 Nginx Web 服务器配合使用，并自动缩小您的文件。 但是，安装像它或 CSSNano 这样的工具可能需要您致电 IT。
9. 优化图像和视频
多媒体文件通常会因为太大而降低网站性能。 严重依赖图像和视频的电子商务商家必须努力优化这些文件，以减轻访问者互联网连接的负担。
优化图像最简单的部分是调整它们的大小。 任何文件都不应超过 20 兆字节 (MB) — 但实际上，只有您的英雄图像才应该那么大。 Shopify 建议商家尽可能将图像保留在 500 KB 左右，尽管他们允许某些网站需要最大 2 MB 的文件大小。 您可能必须压缩图像才能实现这些目标。 值得庆幸的是，有很多免费的图像压缩工具可供您使用。
缩小文件大小后，请确保使用响应式设计原则，以使用户能够快速地从较小的设备加载您的网站。 由 Mozilla 运行的 MDN Web Docs 有一个很好的响应式图像教程，如果您是该主题的新手，可以遵循。
10. 利用浏览器缓存
Web 浏览器可以将文件本地存储在用户的计算机上，从而加快重复访问者的加载时间。 浏览器可以从计算机的本地内存中提取缓存的资源，而不是为每个文件联系服务器。
对于大多数电子商务商家来说，缓存是一个出色的解决方案，因为您的资产保持相当静态。 如果您对网站进行重大检修或替换产品图片，您需要确保浏览器有重新下载新内容并替换缓存资源的说明。 然而，对于大多数在线零售商来说，这种情况很少见，因此设置缓存是最佳选择。
您的网络主机再次是负责您的缓存设置的一方。 您需要找到其文档并按照说明启用本地缓存并设置到期日期（指示浏览器应多久刷新您网站的缓存资源）。
11. 使用内容分发网络 (CDN)
浏览器缓存仅帮助以前访问过您网站的受众。 内容交付网络（CDN）将资产尽可能靠近每个访问者，以减少加载时间。
CDN 不依赖本地计算机来存储资产。 他们只是将您的资产分发到不同位置的服务器网络。 这意味着您可以在弗吉尼亚州拥有一台服务器，在加利福尼亚州拥有一台服务器，在伊利诺伊州拥有一台服务器，等等，而不是在弗吉尼亚州拥有一台服务器来回答所有请求。 为国际受众提供服务的公司可以与国际 CDN 合作，因此他们在多个国家、地区和大洲拥有服务器。
每当浏览器发送加载您网站的请求时，该请求就会路由到地理位置上距离用户较近的服务器。 这听起来可能不是一个巨大的节省时间的方法，但由于页面加载速度是在很小的范围内测量的，CDN 会产生显着的差异。
12. 定期审核您的插件
对于大多数 Web 开发人员来说，插件、附加组件和扩展可以节省大量时间。 但是，就像外部脚本一样，臃肿的插件会降低页面速度。 通过重新访问您的插件库以查看是否有您不再使用的插件来提高您的网站性能。
有时，您需要所有插件，但页面加载速度仍然太慢。 既然如此，是时候找出罪魁祸首了。 将您的网站复制到暂存环境中，禁用所有插件，并测试您的网站加载速度。 然后，一次启用一个插件，以确定是否有一个插件正在降低您的性能指标。 （确保启用、测试然后禁用每个插件，这样您就不会意外地测量累积效应。）
值得庆幸的是，有这么多插件，您可能能够找到任何缓慢工具的替代品。
另一种选择是寻找已针对速度进行优化的插件。 例如，我们的评级和评论显示技术旨在让您的网站快速运行，我们的开发人员分享了他们为实现这一承诺而采取的步骤。 寻找以这种方式构建的工具（使用缩小和减少脚本文件、缓存和延迟加载等最佳实践的工具），使您的审核变得轻而易举。
13. 删除不必要的弹出窗口
是的，我们会这么说。 弹出窗口非常不受欢迎。 它们会导致糟糕的体验，尤其是在移动设备上。 即使您认为您的弹出窗口做得很有品味并且很有帮助，但互联网用户整天都会面对大量的模式、叠加层和聊天小部件。 每个人都有弹出窗口疲劳，如果你做出贡献，你就会削弱消费者的信任。
大多数弹出窗口调用外部脚本并引用图像和字体等资源，浏览器必须加载所有这些资源。 有条件出现的模态必须在触发之前收集受众数据，这也需要时间。 如果您的总阻塞时间很高，则用户可能无法在网站其余部分呈现时关闭这些元素。 即使没有实际的速度减慢，这种延迟也会影响用户对网站速度的看法。
不过，这种放缓是真实存在的，因为几乎所有人都不喜欢这些工具。 从您的网站中删除它们是双赢的。
14. 选择最快的服务
当客户单击链接或输入 URL 时，他们会告诉浏览器查询 DNS 服务以将他们带到目标站点。 该 DNS 服务将浏览器路由到您站点的 IP 地址。 然后，他们的浏览器开始读取您的 HTML 文件并向您的服务器或 CDN 请求资源，以便它可以呈现您设计的网站。
许多服务汇集在一起才能让您的网站出现。 如果其中任何一个速度慢，您的页面速度都会受到负面影响。 这就是为什么最便宜的选择不一定是您的技术基础设施的最佳选择。
例如，许多基础网站托管计划是共享的。 这意味着其他网站使用与您相同的服务器，因此其中一个网站的流量激增可能会减慢您的加载时间。 VPS 托管（对于成长中的网站）或专用网站服务器（对于那些负担得起的人）将返回更好的结果。
您还希望确保处理 DNS 托管的域名注册商表现出色。 DNSPerf 会持续记录 DNS 性能，以便您可以亲自了解各个提供商的表现如何。
当然，速度不仅仅对高层很重要。 我们讨论了寻找轻量级且简化的插件。 您还需要考虑安全软件和其他后端工具等服务。 尽管客户不直接与他们互动，但他们仍然会影响您的电子商务网站的性能。
15. 监控网站运营
每隔一段时间检查一下您的网站性能，看看是否存在大问题是一个明智的主意。 持续监控您的网站，以便您在问题出现时立即意识到这一点，这样就更明智了。
您可以投资收集用户体验数据的工具，以展示您的网站在现实世界中的表现。 由于许多购物者会通过与您自己不同的设置来访问您，因此真实的用户监控提供了一个全新的视角。
其他工具伪装成人类访问者，使用一系列脚本来导航您的网站并测试其性能。 像这样的综合监控设置对于希望从受控测试中收集数据的团队来说更有用。 如果您正在优化网站，综合监控将帮助您发现真正产生影响的更改。 这些系统还可以运行预定的测试，目的是在客户遇到重大问题之前发现这些问题。
有很多工具可以执行这两项工作（以及更多）：
- Site24x7 为您执行综合和真实用户监控
- LogRocket 监控用户并识别用户通常遇到的错误和站点交互
- New Relic 是一个端到端综合监控系统，与几乎所有基础设施集成
无论您使用哪种工具，请确保配置警报以在出现问题时通知您。 您越快解决问题，让您失望的客户就越少。
网站性能就是对速度的需求
随着互联网和移动连接变得更快、更普遍，消费者标准将继续提高。 提供快速、便捷的体验是基本期望。 能够弄清楚如何在移动设备上脱颖而出并将加载速度降低到一秒或更短的公司将有机会占领更多的市场份额。
您提供的客户体验与您的转化率和保留率直接相关，而您网站的性能也与该客户体验直接相关。 网站优化不是一个可以等到未雨绸缪的项目。 这是吸引客户访问您的网站并增加销售额的重要组成部分。
提高网站速度并不是吸引更多客户的唯一方法。 查看这些增加自然流量的方法，以保持您在 SERP 上的势头。
