Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向

让顾客满意是零售业成功的秘诀。事实证明,提供快速、一致的在线体验可以显著提高零售商关心的每项指标——从转化率和收入到留存率和品牌认知度。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

本文大纲:

  • 页面速度影响在线零售业务数据

  • 如何将您的网站速度与竞争对手进行比较

  • 性能优化入门:分析是什么拖慢了你的页面速度,从图片和第三方到样式表和自定义字体,以及你可以采取哪些措施

页面速度影响在线零售业务数据

对于大多数在线零售商而言,页面速度对利润有着可衡量的影响。即使是很小的改进也可以显著提高转化率等指标。比如

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如何分析网站性能和业务转化数据关系

但是您的网站呢?要了解页面速度改进对您自己的网站的影响,您需要查看您自己的真实用户监控 (RUM) 数据。关联图 是向企业中的每个人传达绩效的好方法。您可以使用 RUM 创建这些可视化效果,让即使是最不懂技术的利益相关者也可以轻松看到绩效与用户参与度和业务指标(例如跳出率和转化率)之间的关联。

关联图表为您提供所有用户流量的直方图视图,这些流量根据性能指标(例如开始渲染、最大内容绘制和下次绘制前的互动次数)细分为不同的群组。该图表包含一个叠加层,向您显示与每个群组相关的用户参与度指标或业务指标(例如跳出率或转化率)。这样您就可以一目了然地了解性能、用户参与度和业务之间的关系。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在此关联图中可以看到,在最大内容绘制 (LCP) 时间为 1.1 秒时,转化率峰值略高于 6%。随着 LCP 变慢,转化率迅速下降,并在 2 秒时降至 3% 以下。通过上述可以看出,优化网站性能降低 LCP 时间可以带来总体更高的转化次数以及更多的收入。

您的网站与竞争对手相比如何?

借助 SpeedCurve Synthetic等综合性能监控,您可以像在自己的网站上一样在任何其他网站上运行页面速度测试。这意味着您可以获得所有相同、丰富、出色的数据、屏幕截图和幻灯片以供比较。

您的竞争性基准测试仪表板还可以让您深入研究并关注页面构建等内容。那个页面的渲染速度是您的两倍……他们做了什么不同的事情?他们有更多的 JavaScript 吗?更少?您是否发出了 400 个请求,而他们只发出了 80 个?这里就是找出答案的地方。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Page Speed Benchmarks 是一个面向公众的仪表板,可向您显示美国、欧盟、英国和日本领先零售商的当前绩效快照。

性能优化入门

要提供出色、快速的在线体验,首先要问自己两个问题:

  • 什么原因导致我的页面对于用户来说显得比较慢?

  • 我能做什么呢?

好消息是,导致购物者页面速度变慢的大多数问题都发生在您的页面上,这意味着您可以控制它们。以下是零售网站上最常见的性能问题的概述,以及如何跟踪和修复这些问题。

什么原因导致你的网页速度变慢?绝大多数性能问题都是由四个原因引起的:

  • 第三方,例如追踪器和分析器

  • 样式表

  • 自定义字体

  • 页面大小,特别是图像大小

第三方脚本

如今,典型的零售网页可以包含多达 75 个第三方脚本,例如跟踪器和分析信标。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第三方通过增加转化率(通过定位信标)和以前所未有的方式帮助您了解用户(通过分析标签)增加了大量价值,因此它们不会很快消失。但它们可以显著影响您的页面呈现方式(甚至是否呈现!)。

你可以做什么:监控第三方的表现

首先采取积极主动的方式了解第三方可能造成的任何潜在性能损害。

您无法修复未测量的内容。这就是我们在 SpeedCurve 中创建 专用第三方仪表板的原因 ,这样您就可以一目了然地了解第三方的表现,跟踪单个脚本并 为其设置性能预算。

在您了解第三方脚本的性能后,您可以使用历史数据与供应商制定 SLA。

案例研究: 玛莎百货通过关注第三方内容彻底改变了业绩

图像和页面大小

虽然页面大小并不总是与较慢的用户体验相关,但通常情况下确实如此。未经优化的大型图像往往是罪魁祸首。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

除了优化图像(以确保您不会向用户提供 1MB 的资源!)之外,您还应确保最重要的图像(例如主要产品图像)尽早呈现。

您可以做什么:为与图片相关的指标创建性能预算

性能预算和警报是应对性能下降的好方法。性能预算始于您的团队(每个人:营销人员、设计师和开发人员)就用户体验和网站速度的原则达成一致。首先,您需要确定要跟踪哪些指标,然后根据过去的表现设置阈值。

对于图像,需要考虑以下一些指标:

  • 最大内容绘制 – 这是视口中最大视觉元素(图像或视频)的大小。LCP 是 Google 的 核心网络指标之一,它是 Google 搜索排名算法的一组指标,因此跟踪它是个好主意。

  • 图片大小 – 页面上所有图片的总大小。这是一种一目了然地查看页面中是否添加了未优化的大型图片的好方法。

  • 图像请求——页面上的图像总数。

案例研究: Zillow 如何在预算有限的情况下变得更大、更快、更具吸引力

样式表

样式表是现代网页的一大福音。它们解决了从浏览器兼容性到设计维护和更新等大量设计问题。如果没有样式表,我们就不会拥有响应式设计等伟大的东西。

https://blog-img.speedcurve.com/img/488/f8cb762-blocking-resources.png?auto=format,compress&fit=max&w=2000

然而,执行不当的样式表可能会造成一系列性能问题。这些问题包括 CSS 下载和解析时间过长,以及样式表放置不当导致页面其余部分无法呈现。

你可以做什么:了解哪些样式表可能会阻止你的页面渲染

再次强调,你无法修复你没有测量的东西。你的综合监测工具可以告诉你:

  • 我的页面中有多少个样式表,其中有多少个阻止页面呈现?

  • 这个数字是上升了还是下降了?

  • CSS 请求有多大?

  • 样式表对我的每个第三方的表现如何?

自定义字体

自定义字体让设计师能够前所未有地控制设计中使用的字体。这种控制欲望是自定义字体流行度飙升的原因。但这种流行度的背后是性能的代价。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

有些字体需要大量的 CSS 代码,而其他字体则需要大量 JavaScript 或外部托管 - 所有这些都会大大减慢页面渲染速度。

你可以做什么:跟踪字体的大小和渲染速度

除了跟踪字体大小和请求数量之外,您还可以使用 SpeedCurve 来测量第一个 H1 元素何时完成渲染。(在 SpeedCurve 中,我们将此指标称为 Hero H1。它是我们捕获的三个 Hero 渲染时间之一 。)如果您的网站使用自定义字体,则这些字体很可能会应用于 H1 副本,这使得此指标成为衡量自定义字体渲染速度的有效方法。

与我们为您跟踪的所有其他指标一样,您可以 为任何与字体相关的指标创建性能预算,并在它们超出阈值时收到警报。

案例研究: NerdWallet 使用 H1 Render 指标帮助将字体加载速度提高了 30%

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/44045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scanner工具类

扫描控制台输入 1.nextLine nextLine() 方法会扫描输入流中的字符,直到遇到行末尾的换行符 \n,然后将该行的内容作为字符串返回,同时,nextLine() 会将 Scanner 对象的位置移动到下一行的开头,以便下一次读取数据时从下…

代码随想录day09 151.翻转字符串里的单词 、卡码网:55.右旋转字符串

代码随想录day09 151.翻转字符串里的单词 、卡码网:55.右旋转字符串 151. 反转字符串中的单词 这题我直接想到的是istringstream 和 stack 但不知道这样使用是不是违反了规定 class Solution { public:string reverseWords(string s) {istringstream iss(s);stri…

MySQL的约束键多表查询

约束 概念 概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。目的:保证数据中数据的正确、有效性和完整性。 外键约束 概念 ​ 外键用来让两张表的数据之间建立连接,从而保证数据的一致性和完整性。 注意&#x…

Qt常用基础控件总结—输入部件(QComboBox类和QLineEdit)

输入部件 下拉列表控件QComboBox 类 QComboBox 类是 QWidget 类的直接子类,该类实现了一个下拉列表(组合框)。 QComboBox 类中的属性函数 1)count:const int 访问函数:int count() const; 获取组合框中的项目数量,默认情况下,对于空组合框或未设置当前项目的组合框,…

网络安全法视角下的等保测评法律责任与风险控制

《网络安全法》是中国为了保障网络安全、维护网络空间主权和国家安全、社会公共利益,保护公民、法人和其他组织的合法权益而制定的一部重要法律。该法于2017年6月1日正式实施,其中对网络安全等级保护制度(简称“等保”)做出了明确…

windows USB 设备驱动开发-USB复合设备的注册

USB 多功能设备的驱动程序(称为复合驱动程序)可以向基础 USB 驱动程序堆栈注册和注销复合设备。 Microsoft 提供的驱动程序(Usbccgp.sys)是由 Windows 加载的默认复合驱动程序。 本文中的过程适用于替换Usbccgp.sys的基于 WDM的自…

c语言的简易教法—— 函数递归

文章目录 一、什么是递归?1.1递归的思想1.2递归的限制条件 二、递归案例2.1 案例1:求n的阶层2.1.1分析2.1.2 递归函数(Fact)的代码实现2.1.3 测试:main函数实现2.1.4 运行结果和画图推演2.1.5 扩展:迭代方法…

【66个开源+44个闭源Agent项目】

开源AI Agent 1.AgentGPT 基于浏览器的 AutoGPT 实现,可通过无代码平台访问。https://agentgpt.reworkd.ai/zh 2.AI Legion 一个让智能体协同工作的平台,其类似于 AutoGPT 和 Baby AGI,但用 TypeScript 编写。https://github.com/eumemi…

如何使用BERT进行下游任务 - Transformer教程

BERT,即Bidirectional Encoder Representations from Transformers,是谷歌于2018年发布的预训练语言模型。BERT的出现标志着自然语言处理领域的一个重要里程碑,因为它大幅提高了多种语言任务的性能。本文将详细介绍如何使用BERT进行下游任务&…

华为如何做成数字化转型?

目录 企业数字化转型是什么? 华为如何定义数字化转型? 为什么做数字化转型? 怎么做数字化转型? 华为IPD的最佳实践之“金蝶云” 企业数字化转型是什么? 先看一下案例,华为经历了多次战略转型&#xf…

前端工程化:Webpack配置全攻略

前端工程化:Webpack配置全攻略 前端小伙伴们,今天我们来聊聊那个让人又爱又恨的 Webpack。没错,就是那个配置起来让你想砸键盘,但又离不开它的构建工具。别担心,跟着我来,保证让你从 Webpack 小白变成配置…

人脸识别与检测(保姆级教程--附带源码)

人脸识别与检测(保姆级教程–附带源码) 项目背景 因项目需要招聘了一些日结工人,因此需要对工地现场的工人进行考勤管理,但工地只有海康摄像头没有专业考勤设备,因此需要基于视频流开发人脸识别与检测功能&#xff1…

Windows 虚拟机服务器项目部署

目录 一、部署JDK下载JDK安装JDK1.双击 jdk.exe 安装程序2.点击【下一步】3.默认安装位置,点击【下一步】4.等待提取安装程序5.默认安装位置,点击【下一步】6.等待安装7.安装成功,点击【关闭】 二、部署TomcatTomcat主要特点包括:…

奇怪的错误记录

https://github.com/meta-llama/llama3/issues/80 读模型没问题,推理时出现: RuntimeError: “triu_tril_cuda_template” not implemented for ‘BFloat16’ ———————————————— 事发原因 我尝试了解transformers的AutoProcessor时&a…

感应触摸芯片集成为MCU,深度应用触控按键技术的VR眼镜

VR(Virtual Reality)即虚拟现实,简称VR,其具体内涵是综合利用计算机图形系统和各种现实及控制等接口设备,在计算机上生成的、可交互的三维环境中提供沉浸感觉的技术。它的工作原理是将左右眼图像交互显示在屏幕上的方式…

技术速递|宣布为 .NET 升级助手提供第三方 API 和包映射支持

作者:Marco Goertz 排版:Alan Wang .NET 升级助手是一个 Visual Studio 扩展和命令行工具,可帮助您将应用从之前的 .NET 和 .NET Framework 升级到最新版本的 .NET。正如我们在之前的文章中所描述的那样,它为升级 Microsoft 库和框…

技术总结(1)——方向与成长思考

不知不觉已经发了30篇技术博客,本来最开始想的是回顾自己的技术生涯,怎样做到失败的生涯,但是后面发现,开始逐步写技术博客,慢慢的开始沉浸里面这种回顾技术的感觉。做技术的人通常不喜欢研究市场,而做市场…

模型剪枝知识点整理

模型剪枝知识点整理 剪枝是深度学习模型优化的两种常见技术,用于减少模型复杂度和提升推理速度,适用于资源受限的环境。 剪枝(Pruning) 剪枝是一种通过移除模型中不重要或冗余的参数来减少模型大小和计算量的方法。剪枝通常分为…

编程是学什么:探索编程世界的四大核心领域

编程是学什么:探索编程世界的四大核心领域 在数字化时代的浪潮中,编程已成为一项重要的技能。但很多人对于编程的学习内容仍然感到困惑,那么,编程究竟是学什么呢?本文将从四个方面、五个方面、六个方面和七个方面&…

探索TASKCTL和 DataStage 的ETL任务调度协同

在复杂多变的企业环境中,高效、准确的数据处理是支撑业务决策与运营的核心。本文将深入探讨任务调度平台TASKCTL与ETL工具DataStage的深度融合,通过详尽的代码示例、结合细节以及实际案例的具体描述,展示这两个工具如何携手打造企业数据处理生…