性能vs功能:做出正确的站点速度权衡

铃声和口哨声是双向的。虽然为在线网站添加创新功能可以增加转换，但它们也会减慢网站的速度。慢速网站的跳出率更高，转化率更低。

随着年龄的增长，这种权衡更加明显。客户对大型企业的期望更高。但是一些能让你的品牌与众不同的特征——比如大型产品系列或者3D产品建模或身临其境增强现实(AR)购物体验——可能是性能杀手。

您在功能、体验和设计方面所做的权衡决定了站点的性能，关键是要在性能和功能之间取得适当的平衡。没有放之四海而皆准的指南。帮助你为你的品牌做出正确的权衡是我们写这篇文章的原因。

毫秒意味着百万

你所做的选择可能会给你带来或损失数百万美元。可交互式3D产品建模增加94%的页面浏览量．高清产品视频提升80%的转化率．增加高分辨率产品图像的数量可以双转换．

功能丰富的电子商务网站可以将更多的购物者转化为客户。但同样的特征也可以让你的网站变得沉重让它变慢，让购物者在它呈现之前离开。

对速度的需求是普遍理解的页面加载时间延迟一秒钟可能会导致7%的转换损失-但是交付客户体验充满丰富的媒体，教学视频，库存洞察，实时聊天，支付选项，个性化引擎和客户评论，要求可能对站点性能产生负面影响的功能和第三方解决方案．

这意味着毫秒很重要而且可以让你赚大钱：

• 通过帮助速冻餐供应商COOK减少平均页面加载时间，将转化率提高7%
• 在网页加载速度方面，数字商店提供商Mobify的转化率提高了1.11%，每年的销售额增加了38万美元

如上所述，那一秒钟的延迟导致7%的转化率损失可能意味着数千美元每天损失的销售额。其他数据显示，提高移动网站的速度1%的十分之一可以提高8%的转化率和10%的消费。

财富的得失取决于品牌如何在网站速度和功能之间建立联系。尽管如此，零售系统研究(RSR)调查显示，一般零售商的网站仍然太慢，他们的移动网站也是如此慢．

更糟糕的是，许多人根本不知道自己的成绩如何。

表现第一的心态

即使你没有做过站点性能审计，其他人也做过。百分之八十二在被分析的网站中，有严重影响性能的问题，44%的网站存在研究人员所说的关键问题。

即使你没有，谷歌也在做记录。除了对用户体验产生负面影响外，性能问题还会损害可发现性和自然搜索排名。谷歌分数的网站基于速度等因素，对网站进行排名和推荐。就像你必须培养一种移动优先的心态一样，现在你必须培养一种表现优先的心态。

企业可以使用谷歌的灯塔的工具或PageSpeed见解来给他们的网站打分竞争对手”。该工具运行一系列审计以生成性能报告，并为接受失败审计的站点提供建议，以改进其页面。

电子商务网站的评级尤其严格。最新版本的灯塔造成了大破坏一些最大的电子商务零售商:根据分析，近75%的电子商务网站的表现得分大幅下降。亚马逊、苹果和沃尔玛等品牌的表现得分大幅下降。

以下是《灯塔》对你的评价:

灯塔指标

• 第一幅充实的画测量从导航到浏览器呈现第一个内容的时间。这对买家来说是一个重要的里程碑，因为它提供了页面实际加载的反馈。
• 第一次有意义的绘画本质上是油漆之后，最大的折叠上的布局变化发生了，网页字体已经加载。这是很重要的，因为之后的油漆对买家来说是不可见的。
• 速度指数是一个页面加载性能指标，显示页面内容可见填充的速度有多快。
• 第一个CPU空闲衡量页面交互程度最低的时间。屏幕上的大多数(但可能不是全部)UI元素都是交互式的。平均而言，页面会在合理的时间内响应大多数用户的输入。
• 互动时间测量一个页面需要多长时间才能变成交互式的，这意味着它在50毫秒内响应用户交互，并显示有用的内容，以第一次内容绘制来衡量
• 请求统计浏览器对资源的调用次数
• 页面大小测量加载页面时传输的总数据量。

在很多情况下，罪魁祸首是分析师，都是图片丰富的网站和过大的图片。但这些并不是困扰电商商店的唯一业绩杀手。

在我们向您展示如何检查您的网站的分数并向您展示它如何与其他像您这样的品牌相提并论之前，我们已经创建了一个最常见的功能列表，这些功能虽然可以帮助您区分您的品牌并提供高转化率的客户体验，但也可以减缓您的网站。我们也会帮你修的。

修复性能杀手

你和你的顾客喜欢的同样的功能也可能会损害你的商店的表现。您的图像，视频，旋转木马，Instagram feed和分析工具可以改善商店功能和买家体验。但是您包含的每个特性都需要网络资源才能发挥作用。有些功能要求更多，有些功能要求更少。但综合起来，一组功能会对存储速度产生显著影响。

做出明智的权衡决定包括计算特定特性的好处以及它对整体页面速度造成的负担。确保一个特性带来的好处能够保证速度和用户体验的降低。当审计您的网站和网站建设者，了解以下项目的成本和收益，并优化您希望继续使用的项目:

图像大小

高分辨率图像可以每游客收入(RPV)增加17%．但是图像的大小会影响速度。每个像素等于四个字节的内存。缺少可用内存和较大图像的设备会减慢加载时间。压缩图片提高加载时间和站点速度得分。考虑使用图像压缩器tinyjpg.com或shortpixel.com．电子商务网站通常具有较高的站点性能得分限制图像大小为142KB．优化图片根据谷歌的说法，它可以确保您的网站发送尽可能少的数据，并代表着提高性能的巨大机会。

旋转图像

使用360°旋转图像即可提升转化率27%．它们允许购物者从各个角度查看产品，而不仅仅是二维的。但要获得全面的视图，用户必须这样做下载更多图片比传统的2D产品摄影优化旋转图像通过降低图像质量和尺寸，并使用内容分发网络(CDN)因此，图像将自动从离用户最近的服务器提供。

旋转木马和移动

他们实际上转化率杀手．消除旋转木马可以使页面加载速度更快减小总页面大小．在优化后的英雄图像中替换。一定要响应式地传递图像因此，图像的最佳匹配取决于观看它们的屏幕。谷歌工程师建议添加一个srcset属性到元素，以指定浏览器可以从中选择的图像数组。

延迟加载

而不是自动下载你网站上的每一张图片，延迟加载只在网站的顶部显示购物者的图像。只有在用户开始向下滚动之后，页面才会获取页面中该部分的图像。懒惰加载你的网站与JavaScript库，如LazyLoad和yall.js．如果您的大多数访问者使用Chrome浏览器，通过添加延迟加载选定的图像加载= "懒惰"属性设置为标签，不过要注意，您的图像不会在其他浏览器中延迟加载。

动画

动画动图，比如那些展示产品使用的动图，可以增加103%的转化率．但谷歌的工程师说，动图是巨大的，应该如此用视频代替．视频通常会缩小80%，这可以提高加载性能。如果你坚持使用动画，CSS动画应该在没有强制布局更改或像素重画的情况下创建。避免强制改变布局的属性。在使用JavaScript时，选择requestAnimationFrame因为它使用更少的系统资源．

JavaScript和CSS

之前HTTP / 2在HTTP/1环境中捆绑样式和脚本是很常见的。这样做可以通过限制请求的数量来提高性能。但在HTTP/2环境中就不再是这种情况了。考虑分割代码，或将CSS分成更小的文件，以限制数量下载的脚本的R。谷歌建议迁移到HTTP/2因为它消除了并发请求限制和缺乏报头压缩。

网页字体

高转换产品页面，包括精心设计的产品描述，克服了买家的反对。但买家不会被说服，如果你网页字体不要马上表现出来。如果默认情况下不支持外部字体，则必须下载它们，这可能会导致延迟。将外部字体替换为所需字体通过在你的@font-face声明中添加一个font-display: swap属性来立即加载，或者，如果你使用的是Google Fonts，添加一个& display=swap URL参数(例如:https://fonts.googleapis.com/css?family=Roboto&display=swap样式表“rel = >)。

代码膨胀

缩小消除冗余的、不必要的或可能减慢加载时间的坏代码。删除网站上编码不佳的HTML、CSS和JavaScript减少数据量您发送给用户而不会影响功能。谷歌工程师建议使用JavaScript中的丑化和SVGO(图片)进一步优化网站代码。如果您已经在Shopify Plus上，我们会自动缩小scs .liquid。我们也提供空白控制标签以帮助主题开发人员消除渲染HTML中的一些臃肿。

第三方应用程序

现场搜索工具可以双重转化率．个性化的产品推荐引擎可以占一个品牌销售额的12%．但是第三方解决方案可能会拖慢你的网站，导致访问者在没有购买的情况下离开。在审核网站时，识别在标签内从第三方加载的同步脚本、样式表或字体的数量。脚本添加直接写入通常会对性能产生立竿见影的影响。量化应用程序为你的业务带来的价值。将该值与可能的性能降低进行比较。删除不必要的或破坏价值的应用程序。

第三方域名

浏览器会猜最重要的是(CSS，而不是脚本和图像)并先下载。当浏览器迟来的资源发现，尤其是那些来自第三方的域名，比如谷歌分析或标签管理器。使用资源提示预连接关键第三方域帮助浏览器更快地下载。谷歌工程师建议rel =预加载作为提示资源，允许在浏览器发现关键资源之前提前获取它们。提示可以导致更快的页面呈现。

但在你开始修补之前，你必须进行OB欧宝娱乐APP测量。为了帮助您培养性能第一的心态，Shopify使您的网站比以往任何时候都更容易得分，并查看您与竞争对手的竞争情况。

Shopify的在线欧宝体育官网入口首页商店速度报告

我们的目标不仅仅是让你“意识到速度”，而是把你的网站的性能放在上下文中。Shopify Plus品牌将在其管理的分析部分看到他们的速度得分，包括:

• 谷歌灯塔评分
• 相对分数:你的商店与Shopify上的同类商店相比如何
• 你的灯塔分数随时间变化的时间序列图

该报告包括可操作的建议，如提高网站速度的技巧和可以帮助提高性能的合作伙伴目录。但提高网站速度的最全面的方法之一是请专家进行网站审核。

表演走钢丝

成功地平衡性能和功能就像走钢索。你走的每一步都可能让你觉得自己在一个方向上走得太远。你所做的调整会让人觉得你矫枉过正。

找到合适的平衡对每个品牌来说都是独一无二的，这取决于你对特定功能的重视程度，以及由此带来的速度降低。它还需要知道要改变什么以及如何改变。

现在，您已经拥有了立即对站点性能进行评分、评估权衡并采取行动所需的一切。在培养“表现第一”的心态时，你尝试和学习的越多，你就能越快找到完美的平衡点。