《Shopify Plus：2023网站速度终极指南（23页）.pdf》由会员分享，可在线阅读，更多相关《Shopify Plus：2023网站速度终极指南（23页）.pdf（23页珍藏版）》请在三个皮匠报告上搜索。

1、网站速度终极指南网站速度如何影响网站的转化率。Shopify Plus 刊物目录简介 3执行摘要 3网站性能随着业务增长而下降 4速度对发现的影响 6与可发现性相关的性能问题8代码膨胀问题8第三方集成问题9页面大小问题9如何提升性能和可发现性10案例研究：EmazingGroup12速度对浏览的影响 13与浏览相关的性能问题14配置问题14架构问题14如何提升性能和浏览体验15案例研究：RebeccaMinkoff16速度对结账和转化的影响 18与转化相关的性能问题19基础设施问题19资产大小和格式问题20如何提升性能和转化率20案例研究：Rhone22总结 23目录2/24网站速度终极指南简

2、介速度决定了客户是否能发现您的品牌、信任您的商店并最终下单付款。无论您2021年的业务重点是什么销售额增长、客户留存还是国际拓展能否实现都取决于您的网站性能。执行摘要网站提速迫在眉睫。Google将于2021年5月更新搜索排名，优先考虑页面体验信号，并惩罚网站速度较慢的品牌。网站性能不佳的后果（例如转化率降低和销售额损失）现在还将包括自然搜索排名下降。但品牌越成功，提高或维持网站性能就越困难。除非您对网站速度十分警觉，否则小问题很容易被忽视并随时间推移不断累积，进而导致网站臃肿和销量下降。以数据为指导：将网站性能与财务绩效联系起来。测试加载时间发生1秒变化对收入的影响。我们将发现的网站速度损害

3、因素及其解决措施按客户旅程（发现、浏览和转化）分为几个部分。尽管特定的网站速度问题可能对其类别产生巨大影响，但此影响并不局限于该组。简介3/24网站速度终极指南网站性能随着业务增长而下降您的电子商务业务越成功，维持最佳的网站性能就越困难。代码、应用和脚本会不断累积。曾经适用的自定义设置、新功能和基础设施决策现在会变成阻碍。这是一个随复杂性增加而加剧的问题。随着品牌的成长和成熟，他们的网站内容也变得更加丰富。这种丰富通常是有代价的；除非您积极关注速度，否则这些变化将减慢您的网站速度。Javier MorenoShopify数据科学经理网站性能随着业务增长而下降4/24网站速度终极指南性能问题随业

4、务发展而增多基础设施代码膨胀资产大小和格式第三方应用页面大小配置架构随着业务规模的扩大，基础设施可能不再满足需求。当业务发生10倍增长时，原本适用于100名员工和每月10万网站访客的基础设施便会崩溃。例如，举办限时抢购活动的品牌需要一个完整平台，包括能够按需扩展的托管店面、结账和付款方式，以适应巨大的流量峰值。此处我们概述了您在扩展业务的过程中可能遇到的一些性能损害因素及其解决措施。每个问题都会对客户旅程（从发现、浏览再到转化）产生切实的影响。网站性能随着业务增长而下降5/24网站速度终极指南速度对发现的影响在参与分析的网站中，82%（仅提供英文版）的网站受到严重影响性能的问题的困扰，44%的

5、网站存在严重问题。修复这些问题刻不容缓。Google宣布将于2021年5月开始根据速度等核心网页指标(CoreWebVitals)进行网站评分（仅提供英文版），以对网站进行排名和推荐。性能不佳将对自然搜索排名产生负面影响。系统将以核心网页指标来计算，满分为100分，并衡量多种性能指标（仅提供英文版）来确定真实访客对您网站速度的感受。您还可以使用GoogleLighthouse（仅提供英文版）：GoogleLighthouse不使用来自真实用户的数据，而是在模拟实验室设置中衡量您的网站，以了解您的网站性能并跟踪您的提速进度。评分指标如下：“页面加载过程”网站导航开始首字节时间首次内容绘制网站导航

6、成功开始外观就绪页面外观大致加载完成完全加载加载生命周期结束首次绘制屏幕上第一次非空白绘制来源：Onely（仅提供英文版）首次有效绘制页面主要内容可见可交互时间外观上可用且可交互速度对发现的影响6/24网站速度终极指南根据零售系统研究公司(RetailSystemsResearch)的年度报告单（仅提供英文版），排名接近互联网零售商500强的品牌已将移动端页面加载时间从9.25秒缩短到7秒，但与购物者期望的3秒仍有很大差距。系统将以毫秒为单位衡量（仅提供英文版）您的网站，相对微小的速度疏忽可能会严重影响您的排名。3 秒加载7 秒加载页面加载时间速度对发现的影响7/24网站速度终极指南与可发现性

7、相关的性能问题您添加到网站的代码和第三方应用会加重页面负担、延长加载时间，并且很快将导致网站受到搜索引擎优化(SEO)惩罚。即使是拥有相对成熟开发团队的品牌，也会在尝试改善客户体验时无意间降低网站性能。代码膨胀问题品牌在提高网站速度时通常会优先考虑图片（质量和数量），而事实上，在为高质量图片和媒体文件创造空间的同时，还有影响更大的优化方法。JavaScript问题是其中一大影响因素，在Lighthouse评分中，其执行情况占40%（仅提供英文版）。随着功能的增加，页面上的JavaScript数量也会增加。JavaScript需要更多时间来下载、解析和执行。JavaScript累积得越多，网站速

8、度就越慢。性能不佳的网站也可能使用阻碍解析的JavaScript（使用，而不是或）。这些通常是由堆栈溢出代码片段、设计不佳的应用或模板的内联JavaScript部分中依赖于jQuery的网站添加的标签。Shopify 提供了哪些解决方案Shopify会自动缩小SCSS.liquid，从而减小CSS文件大小以加快下载速度。我们还提供空白字符控制标签（仅提供英文版）来帮助模板开发人员消除呈现的HTML中的臃肿内容。Shopify支持轻松优化页面标题、元描述、有利于SEO的URL和可靠的内部链接结构，从而提高自然搜索排名。速度对发现的影响8/24网站速度终极指南第三方集成问题第三方解决方案可能会因为

9、在标签内加载来自第三方的同步脚本、样式表或字体而减慢您的网站速度。直接添加到中的阻碍解析的脚本（仅提供英文版）通常会对性能产生直接影响。甚至已卸载的集成（例如应用）也可能留下导致网站停滞的代码片段，从而使您在结果中的可发现性降低。GoogleOptimize等A/B测试工具可能因为使用防闪烁代码片段而导致页面在转换时变为空白，该代码片段会隐藏初始页面，直到实验容器就绪为止。事实上，即使您根本未运行实验，GoogleOptimize也可能减慢您的网站速度。页面大小问题页面具有各种形状和大小。随着某些页面日益庞大，它们在不同的地理位置或不同的设备上的加载速度也可能不同，这会对国际拓展工作产生负面影

10、响。您可以在Lighthouse审核建议中看到超大或未使用文件的清单。体积庞大的页面加载速度较慢，并且可能不会立即呈现首屏（页面中最有价值的位置）的内容。速度对发现的影响9/24网站速度终极指南如何提升性能和可发现性保持网站精简灵活使用缩小（仅提供英文版）技术来缩减所需代码。删除网站中低质量的HTML、CSS和JavaScript代码，在不影响功能的情况下，减少发送给用户的数据量（仅提供英文版）。对第三方集成进行取证审核查看现有集成（例如应用）并量化它们为业务增加的价值。一些应用提供产品推荐和社交图片信息流，这会不必要地请求大量图片。将价值与可能的性能降低进行比较，然后删除不必要或损害价值的集

11、成。即使在卸载应用后，您还需要在网站上搜索剩余代码的痕迹并手动将其删除，以确保应用在卸载后不会影响性能。为给应用清理工作提供方向，请创建速度基准（仅提供英文版）来确认您的工作是否真正提高了性能。Shopify 提供了哪些解决方案如果您在Shopify上开展销售并想安装应用来改进网站的功能，Shopify应用商店会在搜索结果页面顶部显示对速度影响最低的应用。我们还在不断改进从已卸载的第三方应用中删除剩余代码的机制，让您不必深入研究。速度对发现的影响10/24网站速度终极指南不妨仔细考虑如何在性能和功能之间进行权衡。Shopify 提供了一些供品牌检测性能损害的工具，并且计划继续改进它们，以便为品

12、牌未来的应用选择 提供支持。JavierMorenoShopify数据科学经理优先加载首屏内容延迟加载（仅提供英文版）不会强制用户下载您网站上的所有图片，而是一开始仅向购物者显示网站顶部的图片。只有当用户开始向下滚动后，页面才会获取该页面部分的图片。使用lazysizes（仅提供英文版）、lazyload（仅提供英文版）和yall.js（仅提供英文版）等JavaScript库延迟加载您的网站。如果您的大多数访客使用Chrome，您可以通过将loading=“lazy”（仅提供英文版）属性添加到标签中来延迟加载选定图片，但请注意，您的图片不会在其他浏览器中延迟加载。权衡速度和页面大小在对网站性能

13、进行基准评估时记录页面大小和加载时间。使用这些输入数据来指导优化工作。例如，假设页面平均大小为15MB，加载时间为2秒。如果您希望将加载时间缩短0.7秒，并且您的基础设施能够向用户提供平均每秒7.5MB的数据，那么您每页的页面大小需要不超过9.75MB才能达到1.3秒的加载时间目标。11/24网站速度终极指南速度对发现的影响案例研究：Emazing GroupEmazingGroup（仅提供英文版）是三个领先生活方式品牌的母公司，该公司的内部技术团队与外部代理合作伙伴（仅提供英文版）合作来提高网站性能。具体来说，EmazingGroup改进了延迟加载时间以确保可即时加载页面顶部内容。除了为获得

14、更好的Lighthouse分数奠定了基础，EmazingGroup报告还显示：网站加载时间从去年的4.5秒缩短到现在的不到3秒转化率从上一年的2.45%上升至4.08%，其中移动端转化率从2.45%上升至4.13%我们最大的收获是控制每个页面上不同元素的加载优先级。我们优先加载所有首屏内容，给访客一种网站速度非常快的错觉。Bran LimEmazingGroup的首席执行官兼创始人12/24网站速度终极指南案例研究：EmazingGroup速度对浏览的影响当您知道只有10%的购物者（仅提供英文版）访问您的网站时会将商品添加到购物车时，丰富浏览体验就显得很有必要。但促使购物者下单的工具、信息和推

15、销内容可能会显著降低网站速度（仅提供英文版）：产品页面加载时间增加一秒，跳出率就会从9%上升到38%（仅提供英文版）57%的购物者（仅提供英文版）会离开加载缓慢的网站并从竞争对手那里下单糟糕的浏览体验可使大品牌遭受高达100,000美元/小时（仅提供英文版）的销售额损失近四分之一的客户旅程都是从产品详细信息页面（PDP）仅提供英文版开始的，该页面通常图片和文字都很丰富（仅提供英文版）。PDP通常包含具有以下功能的代码或第三方应用：使用3D产品建模或沉浸式增强现实(AR)仅提供英文版技术让产品系列栩栩如生嵌入社交媒体信息流以突出显示用户生成内容，从而提高参与度和真实性（仅提供英文版）展示客户评论

16、以增强购买信心（仅提供英文版）通过限时促销、库存计数器或倒计时方法营造紧迫感（仅提供英文版）来促使客户下单零售系统研究公司(RetailSystemsResearch)2019年的一项研究（仅提供英文版）显示，当问及使网上购物最愉快的两项在线功能时，产品评分或评论以及比较类似产品的功能位居榜首。创建丰富且快速的PDP通常需要在性能和功能（仅提供英文版）之间进行艰难的权衡。优化PDP的最大内容绘制（仅提供英文版），或者让购物者觉得PDP有用，这对于改善浏览体验至关重要。速度对浏览的影响13/24网站速度终极指南与浏览相关的性能问题快速PDP和登陆页面的结构旨在平衡加载速度和功能丰富的浏览体验。定

17、期开展用户体验实验的高增长品牌必须最大限度地减少第三方脚本和应用对速度的负面影响，同时以最佳方式构建产品页面。配置问题标签中加载的第三方同步脚本、样式表或外部字体可能会对浏览体验产生负面影响。直接添加到中的脚本通常会对性能产生直接影响。第三方脚本、域名和资源（例如GoogleAnalytics、TagManager或Facebook）并不总是能立即被浏览器发现。它们可能会导致TCP（传输控制协议）和TLS（传输层安全性协议）延迟并争夺带宽。这尤其会降低移动端浏览体验，而移动端浏览体验在移动购物不断增长的时代至关重要：在2020年黑色星期五/网络星期一期间，67%的销售额来自移动设备，而来自台式

18、机的销售额只有33%。不受支持的外部网络字体（仅提供英文版）并不总能立即呈现，这可能导致加载延迟。架构问题在网站或页面呈现之前，依赖运行PHP或服务器环境的应用层以及必须引用的SQL数据库来计算数据并返回结果移动端设计或架构有缺陷（由内存有限（仅提供英文版）的服务器提供的数据过多），如果发出过多HTTP请求（仅提供英文版），它们可能无法完全或快速呈现，尤其是在使用老旧设备连接到蜂窝网络时更是如此基础设施集中，在分发存储桶和最终用户之间形成距离不可靠和不可预测的第三方集成会增加客户旅程中的摩擦，进而提高跳出率速度对浏览的影响14/24网站速度终极指南如何提升性能和浏览体验通过预连接节省数百毫秒时

19、间预连接到关键第三方域名（仅提供英文版），帮助浏览器更快下载。Google工程师建议使用rel=preload（仅提供英文版）作为提示资源，这样可在浏览器发现关键资源之前提前获取它们。域名系统(DNS)预取规则将指示浏览器查找并缓存外部域名的DNS信息，并可能将加载时间缩短数百毫秒。确保快速加载使用网络字体的产品页面通过切换为可立即加载的外部字体（仅提供英文版），确保高转化率产品页面上精心撰写的产品描述能够快速呈现。在font-face声明中添加font-display:swap属性，或者，如果您使用GoogleFonts，则添加&display=swapURL参数（例如）。对第三方集成进行审

20、核查看现有的第三方集成（例如应用），并尝试从浏览体验中消除尽可能多的“jankiness”。jankiness是指Google试图通过核心网页指标中的累积布局偏移来捕获的内容。考虑任何集成可能带来的性能降低，并删除无法创造价值的集成。速度对浏览的影响15/24网站速度终极指南案例研究：Rebecca MinkoffRebeccaMinkoff（仅提供英文版）是一个高级时装品牌，并涉足智能镜子、自助结账和手袋射频识别芯片等零售技术。该公司在其产品页面上采用了3D建模和AR技术，通过比以往更新、更有效的方式将购物者与其产品目录连接起来。Shopify会延迟加载3D模型，以尽量降低图片对性能的影响。

21、自从采用3D和AR以来，RebeccaMinkoff发现：购物者与商品进行3D交互后，他们将商品添加到购物车的可能性增加了44%客户与商品进行3D交互后，他们下单的可能性增加了27%访客与商品进行AR交互后，他们下单的可能性增加了65%Shopify 提供了哪些解决方案其他现成功能：在PDP上，3D产品建模和AR功能可让购物者看到您的产品在他们家中的外观。但即使是功能丰富的网站，由Shopify提供支持的品牌加载速度也比其他SaaS平台快2.97倍（仅提供英文版）。案例研究：RebeccaMinkoff16/24网站速度终极指南3D 媒体文件可带来交互性更强的购物体验。客户可以从各个角度审视我

22、们的产品，包括在增强现实中查看产品的选项，这有助于他们更好地了解产品质量、尺寸和其他重要细节。Uri MinkoffRebeccaMinkoff的联合创始人兼首席执行官17/24网站速度终极指南案例研究：RebeccaMinkoff速度对结账和转化的影响网站速度较慢会对转化率产生负面影响。业界广泛引用“页面加载时间”这项统计数据来衡量该影响。这一时间每延迟1秒，会导致转化率下降7%（仅提供英文版），其真实的影响被低估了，因为疫情将电子商务相当于推进了10年。速度提高1秒可能意味着高达27%的转化率提升（仅提供英文版）。即使是最小幅度的改进（毫秒级别）也可以产生数百万美元的额外销售额（仅提供英文

23、版）。研究表明，移动网站速度仅提高0.1秒即可将转化率提高8%，将消费金额提高10%。消费者调查显示客户的期望很高（仅提供英文版）：79%对网站不满意的客户不太可能再次返回64%的智能手机用户期望网站加载时间不超过4秒47%的在线购物者期望网页加载时间不超过2秒速度对结账和转化的影响18/24网站速度终极指南与转化相关的性能问题业务发展超出基础设施承载能力的情况并不少见。同样，品牌往往缺乏随着业务发展优化基础设施和营销资产所需的技术专业知识。基础设施问题在节假日促销和限时抢购等高流量时期或快速增长时期，带宽不足的自托管电子商务网站很容易崩溃。Shopify 提供了哪些解决方案作为业界领先的限时

24、抢购平台，Shopify的目标是在承受压力的同时保持优质性能，以便支持顶级品牌日常开展破纪录的限时抢购活动（仅提供英文版），为品牌带来数千万美元销售额、数十万订单和数百万独立访客。开展大体量的活动时，Shopify的基础设施采用根据多年限时抢购活动举办经验开发的规模和流量控制机制，旨在满足流量需求（仅提供英文版）。低成本的DNS托管通常“免费”且无需支付注册商费用，但可能缺乏国际扩展所需的高可用性和低延迟。在一个地理区域托管的单一内容分发网络（CDN）仅提供英文版可能会导致其他区域或市场的访客无法访问您的网站。不灵活的结账流程无法受益于缓存加载，因此一个简单的页面可能需要长达20秒的时间来加载

25、、执行以及呈现数百个JavaScript和API请求，从而导致结账速度缓慢。Shopify 提供了哪些解决方案Shopify将更好的浏览体验与快捷结账相结合，让客户能够快速浏览并安全地结账。ShopPay的结账速度比其他电子商务结账方式快四倍，可将转化率提高18%。速度对结账和转化的影响19/24网站速度终极指南如何提升性能和转化率使用值得信赖的基础设施来提高速度在可随您业务自动扩展且数据中心遍布全球的CDN上构建业务。确保您选择的CDN在您计划的未来目标市场中拥有服务器。Shopify 提供了哪些解决方案我们的全球CDN可随您的业务一起扩展，通过确保始终从距离用户最近的服务器传送您的品牌内容

26、来提供最佳性能。资产大小和格式问题传统观点认为高分辨率图片更好，在适当的背景下确实如此。网站或应用上存在的问题是在实际只需使用较小图片时使用大图片。格式也非常重要。格式错误的图片（PNG与JPEG）可能会给网站带来负担。图片应占页面大小的50-75%（仅提供英文版）。一般来说（仅提供英文版），照片应保存为JPEG格式，图形（和屏幕截图）应保存为PNG。速度对结账和转化的影响20/24网站速度终极指南Shopify 提供了哪些解决方案Shopify通过在品牌模板中嵌入srcset属性来根据用户设备自动优化图片大小和传送方式。优化营销资产压缩图片（仅提供英文版）以缩短加载时间和提高网站速度得分，并

27、考虑在图片HTML标签上使用srcset（仅提供英文版）属性。这可以识别用户的设备，并根据用户的浏览器在同一图片的不同版本之间切换。确定来自高DPI设备或视网膜显示器的流量的百分比，以确定是否需要高分辨率图片。如果您选择使用WebP格式来缩小图片，并顺畅地回退到相同大小的JPEG，请注意，这也会降低图片质量。您可以通过多种方法优化网站，从而为高质量图片和媒体文件创造空间，这被认为是电子商务网站的一个关键部分。使用视频（仅提供英文版）替换GIF动画，并对嵌入的视频使用恰当的HTML5语义结构。速度对结账和转化的影响21/24网站速度终极指南案例研究：RhoneRhone（仅提供英文版）是一个高性

28、能运动服装品牌，他们仔细倾听客户的意见以改进产品开发。为了加快发展速度，Rhone的商店配备了ShopifyStorefrontRenderer（仅提供英文版），这是Shopify开发的服务器端应用，旨在满足流量需求并为客户提供更快速的页面响应。结果，他们发现网站性能和转化率逐月显著提高。除了服务器响应时间缩短37.9%和跳出率降低3%之外，Rhone报告还显示：收入增加15%转化率提升17%平均页面加载时间缩短12%如果我们收到负面反馈，我们会不遗余力地解决问题。客户就是我们的命脉。如果我们不能提供超越优质产品的价值，我们便没有资格获得客户的信任。Nate CheckettsRhone的联合

29、创始人兼首席执行官22/24网站速度终极指南案例研究：Rhone总结提高网站性能需要进行艰难的权衡。为了提高速度而做出的设计牺牲可能会给用户带来不好的体验，反之亦然。您必须在可以做的事情与应该做的事情之间取得平衡。以数据为指导：将网站性能与财务绩效联系起来。测试加载时间发生 1 秒变化对收入的影响。通往快速网站的道路是漫长的。您可以采取的可行措施包括每年进行审核和每月跟踪性能。Shopify品牌可以随时访问自己的商店速度报告，了解网站速度得分、得分随时间的变化情况以及与其他Shopify商店的对比情况。Shopify速度评分只是本指南中分享的诸多工具之一。值得注意的是，Shopify分数可能看起来低于Google分数，因为它基于三种页面类型的Lighthouse分数：主页、产品系列页面和产品页面。根据这些类型页面的页面查看次数的比例，产品系列页面和产品页面在最终得分中的权重高于主页。此外，我们只显示移动设备分数（该分数往往低于台式机分数），目的是鼓励商家在构建内容时多考虑使用移动设备的购物者。总结23/24网站速度终极指南