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%

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎样在 PostgreSQL 中优化对复合索引的选择性?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会!📚领书:PostgreSQL 入门到精通.pdf 文章目录 怎样在 PostgreSQL 中优化对复合索引的选择性一、理解复合索引的概念二、选择性的重要性三、优化复合索…

神经网络识别数字图像案例

学习资料:从零设计并训练一个神经网络,你就能真正理解它了_哔哩哔哩_bilibili 这个视频讲得相当清楚。本文是学习笔记,不是原创,图都是从视频上截图的。 1. 神经网络 2. 案例说明 具体来说,设计一个三层的神经网络。…

采用自动微分进行模型的训练

自动微分训练模型 简单代码实现: import torch import torch.nn as nn import torch.optim as optim# 定义一个简单的线性回归模型 class LinearRegression(nn.Module):def __init__(self):super(LinearRegression, self).__init__()self.linear nn.Linear(1, 1) …

链接追踪系列-07.logstash安装json_lines插件

进入docker中的logstash 容器内: jelexbogon ~ % docker exec -it 7ee8960c99a31e607f346b2802419b8b819cc860863bc283cb7483bc03ba1420 /bin/sh $ pwd /usr/share/logstash $ ls bin CONTRIBUTORS Gemfile jdk logstash-core modules tools x-pack …

如何预防最新的baxia变种勒索病毒感染您的计算机?

引言 在当今数字化时代,网络安全威胁层出不穷,其中勒索病毒已成为企业和个人面临的重大挑战之一。近期,.baxia勒索病毒以其高隐蔽性和破坏性引起了广泛关注。本文将详细介绍.baxia勒索病毒的特点、传播方式,并给出相应的应对策略…

2024-07-15 Unity插件 Odin Inspector3 —— Button Attributes

文章目录 1 说明2 Button 特性2.1 Button2.2 ButtonGroup2.3 EnumPaging2.4 EnumToggleButtons2.5 InlineButton2.6 ResponsiveButtonGroup 1 说明 ​ 本章介绍 Odin Inspector 插件中有关 Button 特性的使用方法。 2 Button 特性 2.1 Button 依据方法,在 Inspec…

YOLOv8训练自己的数据集(超详细)

一、准备深度学习环境 本人的笔记本电脑系统是:Windows10 YOLO系列最新版本的YOLOv8已经发布了,详细介绍可以参考我前面写的博客,目前ultralytics已经发布了部分代码以及说明,可以在github上下载YOLOv8代码,代码文件夹…

力扣经典题目之->移除值为val元素的讲解,的实现与讲解

一:题目 博主本文将用指向来形象的表示下标位的移动。 二:思路 1:两个整形,一个start,一个end,在一开始都 0,即这里都指向第一个元素。 2:在查到val之前,查一个&…

昇思25天学习打卡营第12天|MindSpore 助力下的 GPT2:数据集加载处理及模型全攻略

环境配置 %%capture captured_output 此乃 Jupyter Notebook 中的一个魔法命令,其作用在于捕获后续单元格中的输出,并将之存储于变量 captured_output 当中,而非直接于输出区域予以显示。如此一来,便可隐匿某些可能存在的输出信息…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(九)-无人机服务区分离

引言 本文是3GPP TR 22.829 V17.1.0技术报告,专注于无人机(UAV)在3GPP系统中的增强支持。文章提出了多个无人机应用场景,分析了相应的能力要求,并建议了新的服务级别要求和关键性能指标(KPIs)。…

小程序里面使用vant ui中的vant-field组件,如何使得输入框自动获取焦点

//.wxml <van-fieldmodel:value"{{ userName }}"placeholder"请输入学号"focus"{{focusUserName}}"/>// .js this.setData({focusUserName: true});vant-field

钡铼ARMxy控制器在智能网关中的应用

随着IoT物联网技术的飞速发展&#xff0c;智能网关作为连接感知层与网络层的枢纽&#xff0c;可以实现感知网络和通信网络以及不同类型感知网络之间的协议转换。钡铼技术的ARMxy系列控制器凭借其高性能、低功耗和高度灵活性的特点&#xff0c;在智能网关中发挥了关键作用&#…

RPC与服务的注册发现

文章目录 1. 什么是远程过程调用(RPC)?2. RPC的流程3. RPC实践4. RPC与REST的区别4.1 RPC与REST的相似之处4.2 RPC与REST的架构原则4.3 RPC与REST的主要区别 5. RPC与服务发现5.1 以zookeeper为服务注册中心5.2 以etcd为服务注册中心 6. 小结参考 1. 什么是远程过程调用(RPC)?…

大语言模型诞生过程剖析

过程图如下 &#x1f4da; 第一步&#xff1a;海量文本的无监督学习 得到基座大模型&#x1f389; &#x1f50d; 原料&#xff1a;首先&#xff0c;我们需要海量的文本数据&#xff0c;这些数据可以来自互联网上的各种语料库&#xff0c;包括书籍、新闻、科学论文、社交媒体帖…

<数据集>光伏板缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2400张 标注数量(xml文件个数)&#xff1a;2400 标注数量(txt文件个数)&#xff1a;2400 标注类别数&#xff1a;4 标注类别名称&#xff1a;[Crack,Grid,Spot] 序号类别名称图片数框数1Crack8688922Grid8248843S…

全栈智能家居系统设计方案:STM32+Linux+多协议(MQTT、Zigbee、Z-Wave)通信+云平台集成

1. 项目概述 随着物联网技术的快速发展,智能家居系统正在成为现代生活中不可或缺的一部分。本文介绍了一个基于STM32微控制器和Linux系统的智能家居解决方案,涵盖了硬件设计、软件架构、通信协议以及云平台集成等方面。 该系统具有以下特点: 采用STM32作为终端设备的控制核心…

springboot3——项目部署

springboot的项目开发完了&#xff0c;怎么样把他放到服务器上或者生产环境上让他运行起来跑起来。就要牵扯到项目部署&#xff0c;打包的方式了。 springboot支持jar和war: 打jar包&#xff1a;默认方式&#xff0c;项目开发完打个jar包&#xff0c;通过命令把jar包起起来就…

汇川ST 实现分拣

//初始化 IF init FALSE THEN// 初始化init : 1 ;//45 Y数组 BOOL[8] [OFF发料Y OFF分拣Y OFF送料Y OFF取料Y OFF摆取Y OFF摆放Y OFF升降Y OFF夹料Y] [OFF发料Y OFF分拣Y OFF送料Y OFF取料Y OFF摆取Y OFF摆放Y OFF升降Y OFF夹料Y] 不保持 私有 Y0(*Y数组[0] BOOL OFF 发料…

MySQL 中的几种锁

MySQL 中的锁 #按锁粒度如何划分? 按锁粒度划分的话&#xff0c;MySQL 的锁有&#xff1a; 表锁&#xff1a;开销小&#xff0c;加锁快&#xff1b;锁定力度大&#xff0c;发生锁冲突概率高&#xff0c;并发度最低;不会出现死锁。行锁&#xff1a;开销大&#xff0c;加锁慢…

unity宏编译版本

在写c程序的时候我们通常可以用不同的宏定义来控制不同版本的编译内容&#xff0c;最近有个需求就是根据需要编译一个完全体验版本&#xff0c;就想到了用vs的那套方法。经过研究发现unity也有类似的控制方法。 注意这里设置完后要点击右下的应用&#xff0c;我起先就没有设置…