电子商务：对网站速度的感知决定一切

我们都知道网站速度可以对电子商务网站的转化率和粘性产生巨大影响。

SOASTA 的一项案例研究声称，提高移动页面加载速度可将转化率提高 25% 以上。 亚马逊创始人兼首席执行官杰夫·贝佐斯（Jeff Bezos）一直致力于将用户放在首位，他着名的痴迷于页面加载速度，并不断推动他的员工降低亚马逊网站的页面速度。

移动主导地位的兴起扩大了对更快页面加载速度的需求，因为用户通常会以较慢的连接浏览网站。

有很多工具可以帮助您提高网页的速度，例如 Yslow 或 Google Pagespeed Insights，还有各种最佳实践，例如 css 和 js 缩小和合并、使用 css sprite 以及最小化网络请求前端开发人员应遵循以确保最大化页面速度。

我们遇到的问题是，一旦您遵循标准的最佳实践并实现了巨大的胜利，您很快就会开始看到提高整体页面速度的努力的回报递减。

您可以花费大量时间进行越来越小的增量改进，这将是一个昂贵且耗时的过程。 拥有在这个级别工作所需技能和经验的前端开发人员出奇地稀缺和昂贵。

有些事情是您无法控制的，例如网络延迟或移动连接速度，因此原始页面速度可以实现的目标是有限的。 在 3G 连接上，600 毫秒到 1 秒之间的任何时间都被强制网络开销所消耗，您对此无能为力。 基于 2 秒的所需页面加载时间，这给了我们 1 秒的时间来玩。 那不是很多。

不可否认，原始页面速度非常重要，所有开发人员都应至少遵循标准的最佳实践。

但是，本文不会讨论如何使您的页面加载得更快。 有很多关于这方面的文章，而且都有些技术含量。

本文将重点关注页面速度的感知。
哪个更重要：页面加载速度或用户感知它加载的速度有多快？

当然，感知对用户来说是最重要的。

网站速度：第一印象

让我们专注于您网站的主页。 它可能包含顶部导航、搜索栏、英雄横幅，可能包含指向关键类别的链接、轮播和一些内容。 主页往往内容繁重，在移动连接上快速加载所有这些内容将是一个巨大的挑战。

这里的关键是首先优先加载关键内容，然后是其他内容——让用户尽快看到重要的内容。

在他们处理这些关键信息时，您可以开始加载下一层内容。

在移动设备上，大部分内容将从首屏下方开始，因此应在首屏内容之后加载。 合并和缩小 JavaScript 是一种常见的做法。 这通常被视为最佳实践，但它可能会阻止您将关键 JavaScript 的加载优先于不太关键的代码。 相反，您可以考虑拆分缩小和合并的 JavaScript，并根据需要逐步加载它。 在加载搜索框之前，无需加载执行搜索所需的 JavaScript。 用户在页面加载后至少几秒钟内不会在搜索字段中输入字符。

让我们看看一个做得很好的网站。 亚马逊已将资产和内容的交付分开，以确保尽快为用户提供关键内容，然后按优先级顺序逐步加载资产。

该测试是在 iPhone 6 模拟器上运行的，具有良好的 3G 连接并禁用缓存。 最初加载页面后，我启动了硬刷新。

在刚刚超过 600 毫秒的时间内，我开始在标题中加载我的名字。 您还会注意到，仅进行了 6 个网络调用并加载了 5 个资源（3 个 css 文件和 2 个图像）。

仅仅 50 毫秒后，我现在看到了标题的关键组成部分以及主角横幅。 我已经对速度有了感知，因为关键内容正在非常迅速地传递给我，并且在加载其他内容时，我的眼睛和大脑需要处理一些东西。

仅 1 秒后，主导航已加载。 您会注意到在此阶段没有可见的滚动条。 这意味着当前没有首屏下的内容。 没有浪费宝贵的时间来加载用户看不到的内容。 您还会注意到到目前为止只发出了 13 个请求。

在不到 2 秒的时间里，我现在有了一个新的重要内容部分。

在不到 3 秒的时间里，我现在认为页面已经完全加载，而页面实际上只用了不到 5 秒的时间来完全加载。 这表明我认为该站点已完全加载，而实际上它仅加载了 60%。

内容交付的实际时间因人而异，但这非常清楚地说明了亚马逊如何优先加载移动内容，以确保尽快加载关键内容，并确保用户认为网站开始快速加载。

现在让我们看一个做得不太好的网站。 该测试使用与之前的 Amazon 测试完全相同的工具和网络速度运行。 虽然 Charles Tyrwhitt 网站确实优先考虑了一些内容，但要接近亚马逊的优化，还有很多工作要做。

我在将近 7.5 秒内没有看到任何内容。 我立刻感觉到这个网站在我的移动设备上速度很慢。 尽管该站点优先考虑标题内容和英雄横幅，但您可以看到此时已经发出了 90 多个请求，并且，正如我看到的滚动条，很明显，内容一定是在首屏下方加载的。

8.5 秒后，我可以看到轮播开始加载。 请求的数量没有改变，这表明大部分与内容相关的请求都是在页面加载开始时发出的。

直到将近 22 秒，我才意识到该站点现在已完全加载。 该页面实际上总共需要 28.4 秒才能完全加载。 这表明我认为该页面实际上已加载 77% 时已完全加载。

很容易看出这两种体验之间的明显差异。 虽然亚马逊移动主页的加载速度明显快于 Charles Tyrwhitt 主页，但我们已努力确保用户认为它更快。 用户开始在总页面加载时间的 12.5% 内看到加载的内容，而 Charles Tyrwhitt 网站的用户只看到在总页面加载时间的 26% 内发生的事情。 在用户看到进度之前，亚马逊主页发出了 6 个网络请求，而 Charles Tyrwhitt 主页发出了 90 个请求。

这并不是要过度批评 Charles Tyrwhitt，因为他们在构建网站的方式上绝不是独一无二的。 许多领域都遵循公认的最佳实践，但似乎可以做更多的工作来提高对速度的感知以及实际速度。

通过优先考虑 CSS 来提高网站速度

对于前端开发人员来说，将网站的大部分 css 放在少数文件中并始终使用外部而不是内联 css 是相当普遍的。 这导致的问题是在向用户显示任何内容之前需要加载一个大的 css 文件。

解决此问题的方法是拆分您的 css 文件并按顺序将它们与关键内容一起加载。 如果我们看一下亚马逊的例子，他们会加载一个大小仅为 6.5k 的 css 文件作为他们最初的 6 个请求之一。 此文件包含在其主页上设置关键内容样式所需的 css。 事实上，用户在亚马逊移动主页上看到内容之前请求的所有 css 文件的总大小不到 40k，而在 Charles Tyrwhitt 主页上超过 500k。

这种做法使您可以非常快速地将关键内容交付给用户，并有助于加强对速度的感知。

对 JavaScript 做同样的事情

除了优先考虑 css 之外，您还应该考虑如何使用 JavaScript 来做到这一点。 几乎所有电子商务网站都将严重依赖 JavaScript 来运行。 只要 JavaScript 没有阻止关键内容的加载，就可以了。 如果我再次以 Charles Tyrwhitt 网站为例并在我的浏览器上禁用 JavaScript，我现在可以在 4.5 秒内看到内容加载。 这是我对该网站速度的看法发生了巨大变化，在关键内容之前加载的 JavaScript 对该内容没有影响，因此没有理由在该内容之后加载 JavaScript。

Web 开发人员可以从亚马逊等网站关注其网站速度以及实际速度的感知方式中学到很多东西。 尽管他们的网站显然非常快，但用户认为它甚至更快，因为他们优先向用户展示关键内容。

速度可能对您的转化率产生的影响已经很多，零售商应该考虑在优化他们感知的网站性能以及实际网站速度方面进行投资。