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 对象的位置移动到下一行的开头,以便下一次读取数据时从下…

MySQL的约束键多表查询

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

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

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

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 扩展:迭代方法…

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

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

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

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

Windows 虚拟机服务器项目部署

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

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

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

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

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

【C语言】 —— 预处理详解(下)

【C语言】 —— 预处理详解(下) 前言七、# 和 \##7.1 # 运算符7.2 ## 运算符 八、命名约定九、# u n d e f undef undef十、命令行定义十一、条件编译11.1、单分支的条件编译11.2、多分支的条件编译11.3、判断是否被定义11.4、嵌套指令 十二、头文件的包…

Day1每日编程题日记:数字统计、两个数组的交集、点击消除

前言:该篇用于记录自看。曾回看昨天的做题代码,竟然会觉得陌生,这竟然是我写的,细细读了一下,原来我当时是这么想的。因此我觉得记代码没有实际用处,重点是领悟了思想,这样子代码就在心中&#…

HashMap----源码解读

源码分析&#xff1a; public class HashMap<K,V> extends AbstractMap<K,V>implements Map<K,V>, Cloneable, Serializable 在类的开头声明了几个常量&#xff0c;以下是较为重要的&#xff1a; /*** 定义初始容量大小为16*/ static final int DEFAULT_I…

探索【Python面向对象】编程:新时代的高级编程范式详解

目录 1. 面向对象编程概念&#xff08;OOP&#xff09; 1.1 什么是类和对象&#xff1f; 1.2 类的定义 1.3 类和对象的关系 1.4 小李的理解 2. 抽象 2.1 抽象的概念 2.2 抽象类和方法 2.3 小李的理解 3. 类和实例 3.1 类的定义和实例化 3.2 类的属性和方法 3.3 小…

如何使用Python在企业微信中发送测试结果?操作看这里!

在日常的自动化测试工作中&#xff0c;一般会需要把测试结果同步到工作群里&#xff0c;方便信息同步。那么我们今天就使用企业微信和Pythonrequests库来演示一下具体如何操作吧&#xff01; 01 准备 开始之前&#xff0c;我们应该确保已经安装了python环境&#xff0c;并且要…

DNS知识点

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 ​ 目录 一、DNS概念 二 hosts 文件 三 DNS优缺点 三 客户端域名解析顺序(优先级)…

8.9分王者“水刊”!1区IEEE-Trans,国人主编坐镇!发文量2倍增长,扩刊趋势明显!

关注GZH【欧亚科睿学术】&#xff0c;第一时间了解最新期刊动态&#xff01; 本期&#xff0c;小编给大家推荐的是一本IEEE旗下王者“水刊”。该期刊目前处于扩刊状态&#xff0c;接收跨学科领域&#xff0c;领域认可度高&#xff0c;还可选择非OA模式无需版面费&#xff0c;是…

PPTP、L2TP、IPSec、IPS 有什么区别?

随着互联网的发展&#xff0c;保护网络通信的安全越来越重要。PPTP、L2TP、IPSec、IPS是常见的网络安全协议和技术&#xff0c;在保护网络通信安全方面发挥着不同的作用和特点。下面介绍PPTP、L2TP、IPSec、IPS之间的区别。 点对点隧道协议&#xff08;PPTP&#xff09;是一种用…

HTTP协议分析/burp/goby/xray

一、HTTP简介 HTTP(超文本传输协议)是今天所有web应用程序使用的通信协议。最初&#xff0c;HTTP只是一个为获取基于文本的静态资源而开发的简单协议&#xff0c;后来人们以名种形式扩展和利用它.使其能够支持如今常见的复杂分布式应用程序。HTTP使用一种用于消息的模型:客户端…

javaweb中的请求与响应--基于postman工具的应用(附带postman的详细安装步骤)

一、前言 后端的第一天感觉难度就上来了&#xff0c;可能是基础太过薄弱了吧。目前看视频已经有点跟不上了&#xff0c;果然15天想要拿下还是太勉强了点。30天还差不多。不知道读者们有没有好好的去学这方面的知识&#xff0c;没有什么是学不会的&#xff0c;关键是坚持。 Po…

几个小创新模型,KAN组合网络(LSTM、GRU、Transformer)回归预测,python预测全家桶再更新!...

截止到本期&#xff0c;一共发了9篇关于机器学习预测全家桶Python代码的文章。参考往期文章如下&#xff1a; 1.终于来了&#xff01;python机器学习预测全家桶 2.机器学习预测全家桶-Python&#xff0c;一次性搞定多/单特征输入&#xff0c;多/单步预测&#xff01;最强模板&a…