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

news/2024/9/17 17:41:56/ 标签: 前端, 零售, Web性能, FCP

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

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

本文大纲:

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

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

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

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

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

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

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

但是您的网站呢?要了解页面速度改进对您自己的网站的影响,您需要查看您自己的真实用户监控 (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.ppmy.cn/news/1474660.html

相关文章

超级好用的java http请求工具

kong-http 基于okhttp封装的轻量级http客户端 使用方式 Maven <dependency><groupId>io.github.kongweiguang</groupId><artifactId>kong-http</artifactId><version>0.1</version> </dependency>Gradle implementation …

独特功能的视频号矩阵系统源码,支持多短视频平台自动发布和定时发布

在短视频行业竞争日趋激烈的今天&#xff0c;一个高效的视频发布系统对于内容创作者和营销团队来说至关重要。视频号矩阵系统源码以其独特的功能&#xff0c;为多平台自动发布和定时发布提供了强大的技术支持。 多平台自动化发布&#xff1a;无缝内容分发 视频号矩阵系统源码…

掌握MOJO命令行:参数解析的艺术

在软件开发中&#xff0c;命令行接口&#xff08;CLI&#xff09;是一种与程序交互的强大方式&#xff0c;它允许用户通过终端输入指令和参数来控制程序的行为。对于MOJO语言&#xff0c;即使它是一个假想的编程语言&#xff0c;我们也可以设想它具备解析命令行参数的能力。本文…

Oracle执行一条SQL的内部过程

一、SQL语句根据其功能主要可以分为以下几大类&#xff1a; 1. 数据查询语言&#xff08;DQL, Data Query Language&#xff09; 功能&#xff1a;用于从数据库中检索数据&#xff0c;常用于查询表中的记录。基本结构&#xff1a;主要由SELECT子句、FROM子句、WHERE子句等组成…

使用Docker、Docker-compose部署单机版达梦数据库(DM8)

安装前准备 Linux Centos7安装&#xff1a;https://blog.csdn.net/andyLyysh/article/details/127248551?spm1001.2014.3001.5502 Docker、Docker-compose安装&#xff1a;https://blog.csdn.net/andyLyysh/article/details/126738190?spm1001.2014.3001.5502 下载DM8镜像 …

Bilibili Android一二面凉经(2024)

BiliBili Android一二面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《BiliBili Android一二面凉经(2024)》。 面试职位: 高级Android开发工程师&…

Openresty+lua 定时函数 ngx.timer.every

ngx.timer.every 是 OpenResty 中的一个函数&#xff0c;用于创建定时器&#xff0c;以便定期执行某个函数或代码块。它的用法如下&#xff1a; local delay 5 -- 定时器间隔时间&#xff0c;单位为秒ngx.timer.every(delay, function(premature)-- 这里是定时执行的代码块i…

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码)

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码) 1 目标效果视频 CamManager 2 增加一个class IMG_BUFFER 用来管理采集的图片 // <summary> /// IMG_BUFFER 用来管理内存图片的抓取队列 /// </summary> public class IMG_BUFF…

【代码随想录算法训练营第六十二天|卡码网53.寻宝(prim算法和kruskal算法)】

文章目录 53.寻宝prim算法kruskal算法 53.寻宝 prim算法 prim算法三部曲&#xff1a; 1.选择当前最短入树结点&#xff1b;2.更新入树结点&#xff1b;3.更新结点距离最小生成树的距离。 可以把所有已经使用过的结点看作一个整体&#xff0c;然后把他们相接的结点的结点顶点边…

百日筑基第十八天-一头扎进消息队列1

百日筑基第十八天-一头扎进消息队列1 先对业界消息队列有个宏观的认识 消息队列的现状 当前开源社区用的较多的消息队列主要有 RabbitMQ、RocketMQ、Kafka 和Pulsar 四款。 国内大厂也一直在自研消息队列&#xff0c;比如阿里的 RocketMQ、腾讯的 CMQ 和 TubeMQ、京东的 JM…

玄机——第五章 linux实战-CMS01 wp

文章目录 一、前言二、概览简介 三、参考文章四、步骤&#xff08;解析&#xff09;准备步骤#1.0步骤#1.1通过本地 PC SSH到服务器并且分析黑客的 IP 为多少,将黑客 IP 作为 FLAG 提交; 步骤#1.2通过本地 PC SSH到服务器并且分析黑客修改的管理员密码(明文)为多少,将黑客修改的…

Perl 语言开发(八):子程序和模块

目录 1. 引言 2. 子程序的基本概念与用法 2.1 子程序的定义和调用 2.2 传递参数 2.3 返回值 2.4 上下文和返回值 3. 模块的基本概念与用法 3.1 模块的定义 3.2 使用模块 3.3 导出符号 3.4 模块的文件结构和命名 4. 实际应用中的子程序与模块 4.1 子程序参数验证与…

省市县下拉框的逻辑以及多表联查的实例

2024.7.12 一. 省市县的逻辑开发。1、准备&#xff1a;1.1. 要求&#xff1a;1.2 数据库表&#xff1a; 2. 逻辑&#xff1a;3. 方法3.1 创建实体类3.2 数据访问层3.3 实现递归方法3.4 控制器实现3.5 前端处理 二、多表联查&#xff08;给我干红温了&#xff09;1. 出现了问题2…

代理详解之静态代理、动态代理、SpringAOP实现

1、代理介绍 代理是指一个对象A通过持有另一个对象B&#xff0c;可以具有B同样的行为的模式。为了对外开放协议&#xff0c;B往往实现了一个接口&#xff0c;A也会去实现接口。但是B是“真正”实现类&#xff0c;A则比较“虚”&#xff0c;他借用了B的方法去实现接口的方法。A…

服务网格新篇章:Eureka与分布式服务网格的协同共舞

服务网格新篇章&#xff1a;Eureka与分布式服务网格的协同共舞 引言 在微服务架构的浪潮中&#xff0c;服务网格&#xff08;Service Mesh&#xff09;技术以其微服务间通信的精细化控制而备受瞩目。Eureka作为Netflix开源的服务发现框架&#xff0c;虽然本身不直接提供服务网…

前端面试题47(在动态控制路由时,如何防止未授权用户访问受保护的页面?)

在Vue中&#xff0c;防止未授权用户访问受保护页面通常涉及到使用路由守卫&#xff08;Route Guards&#xff09;。路由守卫允许你在路由发生改变前或后执行一些逻辑&#xff0c;比如检查用户是否已登录或者有访问某个页面的权限。下面是一些常见的路由守卫类型及其使用方式&am…

C++相关概念和易错语法(19)(继承规则、继承下的构造和析构、函数隐藏)

1.继承规则 继承的本质是复用&#xff0c;是结构上的继承而不是内容上的继承&#xff0c;近似于在子类中声明了父类的成员变量。 &#xff08;1&#xff09;写法&#xff1a;class student : public person 派生类&#xff08;子类&#xff09;&#xff0c;继承方式&…

数据库doris中的tablet底层解析

在Doris中,tablet(数据片)是数据存储和管理的最小单元。理解tablet的底层原理有助于更好地理解Doris的高可用性、负载均衡和查询优化等特性。 Tablet 的概念 Tablet:Tablet是Doris中用于存储数据的最小物理单元。每个tablet通常对应于一个数据分区和一个分桶组合的子集。…

网工内推 | 网络运维、云计算工程师,NP以上认证,平均薪资10K

01 网络运维 &#x1f537;岗位职责 1、至少3年以上的网络运维相关工作经验; 2、熟悉VLAN、STP、OSPF、RIP、BGP等网络技术; 3、熟悉IPsec、SSL等VPN技术; 4、熟悉主流网络安全厂商的各种产品; 5、精通TCP/IP协议&#xff0c;熟悉主流网络产品设备的调试、配置方法: 6、有…

人工智能笔记分享

文章目录 人工智能图灵测试分类分类与聚类的区别&#xff08;重点&#xff09;分类 (Classification)聚类 (Clustering) 特征提取 分类器&#xff08;重点&#xff09;特征提取为什么要进行特征提取&#xff1f;&#xff08;重点&#xff09;分类器 训练集、测试集大小&#x…