网站速度如何影响网站？解决策略是什么？

我来简单概述一下在扩展业务的过程中可能遇到的一些网站性能损害因素及其解决措施。

1.速度对发现的影响

在参与分析的网站中，82%（仅提供英文版）的网站受到严重影响性能的问题的困扰，44% 的网站存 在严重问题。修复这些问题刻不容缓。Google 宣布将于 2021 年 5 月开始根据速度等核心网页指标 (Core Web Vitals) 进行网站评分（仅提供英文版），以对网站进行排名和推荐。 性能不佳将对自然搜索排名产生负面影响。

系统将以核心网页指标来计算，满分为 100 分，并衡量多种性能指标（仅提供英文版）来确定真实访 客对您网站速度的感受。您还可以使用 Google Lighthouse（仅提供英文版）：Google Lighthouse 不使用来自真实用户的数据，而是在模拟实验室设置中衡量您的网站，以了解您的网站性能并跟踪您 的提速进度。

根据零售系统研究公司 (Retail Systems Research) 的年度报告单（仅提供英文版），排名接近互联网 零售商 500 强的品牌已将移动端页面加载时间从 9.25 秒缩短到 7 秒，但与购物者期望的 3 秒仍有很 大差距。系统将以毫秒为单位衡量（仅提供英文版）您的网站，相对微小的速度疏忽可能会严重影响 您的排名。

与可发现性相关的性能问题

您添加到网站的代码和第三方应用会加重页面负担、延长加载时间，并且很快将导致网站受到搜 索引擎优化 (SEO) 惩罚。即使是拥有相对成熟开发团队的品牌，也会在尝试改善客户体验时无意 间降低网站性能。

代码膨胀问题

品牌在提高网站速度时通常会优先考虑图片（质量和数量），而事实上，在为高质量图片和媒 体文件创造空间的同时，还有影响更大的优化方法。JavaScript 问题是其中一大影响因素， 在 Lighthouse 评分中，其执行情况占 40%（仅提供英文版）。随着功能的增加，页面上的 JavaScript 数量也会增加。JavaScript 需要更多时间来下载、解析和执行。JavaScript 累积 得越多，网站速度就越慢。 性能不佳的网站也可能使用阻碍解析的 JavaScript（使用

第三方集成问题

第三方解决方案可能会因为在标签内加载来自第三方的同步脚本、样式表或字 体而减慢您的网站速度。直接添加到中的阻碍解析的脚本（仅提供英文版）通 常会对性能产生直接影响。 甚至已卸载的集成（例如应用）也可能留下导致网站停滞的代码片段，从而使您在结果中 的可发现性降低。  Google Optimize 等 A/B 测试工具可能因为使用防闪烁代码片段而导致页面在转换时 变为空白，该代码片段会隐藏初始页面，直到实验容器就绪为止。事实上，即使您根本未 运行实验，Google Optimize 也可能减慢您的网站速度。

页面大小问题

 页面具有各种形状和大小。随着某些页面日益庞大，它们在不同的地理位置或不同的设 备上的加载速度也可能不同，这会对国际拓展工作产生负面影响。您可以在 Lighthouse 审核建议中看到超大或未使用文件的清单。 体积庞大的页面加载速度较慢，并且可能不会立即呈现首屏（页面中最有价值的位置） 的内容。

如何提升性能和可发现性

保持网站精简灵活

使用缩小（仅提供英文版）技术来缩减所需代码。删除网站中低质量的 HTML、CSS 和 JavaScript 代码，在不影响功能的情况下，减少发送给用户的数据量（仅提供英文版）。

对第三方集成进行取证审核

查看现有集成（例如应用）并量化它们为业务增加的价值。一些应用提供产品推荐和社交 图片信息流，这会不必要地请求大量图片。将价值与可能的性能降低进行比较，然后删除 不必要或损害价值的集成。 即使在卸载应用后，您还需要在网站上搜索剩余代码的痕迹并手动将其删除，以确保应 用在卸载后不会影响性能。 为给应用清理工作提供方向，请创建速度基准（仅提供英文版）来确认您的工作是否真正 提高了性能。

优先加载首屏内容

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

权衡速度和页面大小

在对网站性能进行基准评估时记录页面大小和加载时间。使用这些输入数据来指导优化工作。 例如，假设页面平均大小为 15 MB，加载时间为 2 秒。如果您希望将加载时间缩短 0.7 秒，并且 您的基础设施能够向用户提供平均每秒 7.5 MB 的数据，那么您每页的页面大小需要不超过 9.75 MB 才能达到 1.3 秒的加载时间目标。

2.速度对浏览的影响

当您知道只有 10% 的购物者（仅提供英文版）访问您的网站时会将商品添加到购物车时， 丰富浏览体验就显得很有必要。但促使购物者下单的工具、信息和推销内容可能会显著 降低网站速度（仅提供英文版）。

近四分之一的客户旅程都是从产品详细信息页面（PDP）[仅提供英文版] 开始的，该页面通常 图片和文字都很丰富（仅提供英文版）。PDP 通常包含具有以下功能的代码或第三方应用。

零售系统研究公司 (Retail Systems Research) 2019 年的一项研究（仅提供英文版）显示，当问 及使网上购物最愉快的两项在线功能时，产品评分或评论以及比较类似产品的功能位居榜首。 创建丰富且快速的 PDP 通常需要在性能和功能（仅提供英文版）之间进行艰难的权衡。优化 PDP 的最大内容绘制（仅提供英文版），或者让购物者觉得 PDP 有用，这对于改善浏览体验 至关重要。

与浏览相关的性能问题

快速 PDP 和登陆页面的结构旨在平衡加载速度和功能丰富的浏览体验。定期开展用户体验 实验的高增长品牌必须最大限度地减少第三方脚本和应用对速度的负面影响，同时以最佳方 式构建产品页面。

配置问题

标签中加载的第三方同步脚本、样式表或外部字体可能会对浏览体验产生负面 影响。直接添加到中的脚本通常会对性能产生直接影响。  第三方脚本、域名和资源（例如 Google Analytics、Tag Manager 或 Facebook）并不总 是能立即被浏览器发现。它们可能会导致 TCP（传输控制协议）和 TLS（传输层安全性 协议）延迟并争夺带宽。这尤其会降低移动端浏览体验，而移动端浏览体验在移动购物 不断增长的时代至关重要：在 2020 年黑色星期五/网络星期一期间，67% 的销售额来自 移动设备，而来自台式机的销售额只有 33%。 不受支持的外部网络字体（仅提供英文版）并不总能立即呈现，这可能导致加载延迟。

架构问题

在网站或页面呈现之前，依赖运行 PHP 或服务器环境的应用层以及必须引用的 SQL 数据库来计算数据并返回结果 ; 移动端设计或架构有缺陷（由内存有限（仅提供英文版）的服务器提供的数据过多）， 如果发出过多 HTTP 请求（仅提供英文版），它们可能无法完全或快速呈现， 尤其是在使用老旧设备连接到蜂窝网络时更是如此 ; 基础设施集中，在分发存储桶和最终用户之间形成距离 ; 不可靠和不可预测的第三方集成会增加客户旅程中的摩擦，进而提高跳出率。

如何提升性能和浏览体验

通过预连接节省数百毫秒时间

预连接到关键第三方域名（仅提供英文版），帮助浏览器更快下载。Google 工程师建议使用 rel=preload（仅提供英文版）作为提示资源，这样可在浏览器发现关键资源之前提前获取它们。 域名系统 (DNS) 预取规则将指示浏览器查找并缓存外部域名的 DNS 信息，并可能将加载时间缩短 数百毫秒。

对第三方集成进行审核

查看现有的第三方集成（例如应用），并尝试从浏览体验中消除尽可能多的“jankiness”。 jankiness 是指 Google 试图通过核心网页指标中的累积布局偏移来捕获的内容。考虑任何集成可 能带来的性能降低，并删除无法创造价值的集成

3.速度对结账和转化的影响

网站速度较慢会对转化率产生负面影响。业界广泛引用“页面加载时间”这项统计数据 来衡量该影响。这一时间每延迟 1 秒，会导致转化率下降 7%（仅提供英文版），其真实 的影响被低估了，因为疫情将电子商务相当于推进了 10 年。速度提高 1 秒可能意味着高 达 27% 的转化率提升（仅提供英文版）。即使是最小幅度的改进（毫秒级别）也可以产 生数百万美元的额外销售额（仅提供英文版）。 研究表明，移动网站速度仅提高 0.1 秒即可将转化率提高 8%， 将消费金额提高 10%。

与转化相关的性能问题

业务发展超出基础设施承载能力的情况并不少见。同样，品牌往往缺乏随着业务发展优化基础 设施和营销资产所需的技术专业知识。

基础设施问题

 在节假日促销和限时抢购等高流量时期或快速增长时期，带宽不足的自托管电子商务网站 很容易崩溃。低成本的 DNS 托管通常“免费”且无需支付注册商费用，但可能缺乏国际扩展所需的高 可用性和低延迟。  在一个地理区域托管的单一内容分发网络（CDN）[仅提供英文版] 可能会导致其他区域 或市场的访客无法访问您的网站。  不灵活的结账流程无法受益于缓存加载，因此一个简单的页面可能需要长达 20 秒的时 间来加载、执行以及呈现数百个 JavaScript 和 API 请求，从而导致结账速度缓慢。

资产大小和格式问题

传统观点认为高分辨率图片更好，在适当的背景下确实如此。网站或应用上存在的问题是在实际只需使用 较小图片时使用大图片。 格式也非常重要。格式错误的图片（PNG 与 JPEG）可能会给网站带来负担。图片应占页面大小的 50-75%（仅提供英文版）。一般来说（仅提供英文版），照片应保存为 JPEG 格式，图形（和屏幕截图） 应保存为 PNG。

如何提升性能和转化率

使用值得信赖的基础设施来提高速度

在可随您业务自动扩展且数据中心遍布全球的 CDN 上构建业务。确保您选择的 CDN 在您计划的未来目标市场中拥有服务器。

优化营销资产

压缩图片（仅提供英文版）以缩短加载时间和提高网站速度得分，并考虑在图片 HTML 标 签上使用 srcset（仅提供英文版）属性。这可以识别用户的设备，并根据用户的浏览器在 同一图片的不同版本之间切换。确定来自高 DPI 设备或视网膜显示器的流量的百分比， 以确定是否需要高分辨率图片。如果您选择使用 WebP 格式来缩小图片，并顺畅地回退到 相同大小的 JPEG，请注意，这也会降低图片质量。您可以通过多种方法优化网站，从而为 高质量图片和媒体文件创造空间，这被认为是电子商务网站的一个关键部分。