当前位置: 首页 > news >正文

RUM 最佳实践-视觉稳定性的探索与实践

写在前面的话

在当今数字时代,网页的视觉稳定性对于提供良好的用户体验至关重要。其中一个衡量视觉稳定性的关键指标就是累积布局偏移(Cumulative Layout Shift,简称 CLS)。CLS 作为 Web Vitals 指标之一,它衡量的是网页内容在加载过程中发生的意外布局偏移的频率和程度,从而确保用户在浏览网页时的舒适度和满意度。在本介绍中,我们将深入探讨 CLS 的概念、评价标准、数据收集与展示,以及如何针对 CLS 进行优化,从而提升用户的网页体验。

介绍

Cumulative Layout Shift (CLS) 是一项稳定的 Core Web Vitals 指标。这是以用户为中心的一项重要指标,用于衡量视觉稳定性,因为它有助于量化用户遇到意外布局偏移的频率。较低的 CLS 有助于确保网页具有令人愉悦的体验。

布局偏移可能会在很多方面干扰用户体验,包括在文本突然移动导致用户在阅读时丢失位置,以及让用户点击错误的链接或按钮。在某些情况下,这可能会造成严重损害。

评价标准

为了提供良好的用户体验,网站的 CLS 得分必须不超过 0.1。为确保大多数用户都能达到此目标,我们建议衡量网页加载的第 75 个百分位(按移动设备和桌面设备细分)。

  • Good,≤0.1
  • poor,>0.25

探索

数据收集

在观测云使用 js 的 performanceObserver 衡量 CLS ,即如下代码:

new PerformanceObserver((entryList) => {for (const entry of entryList.getEntries()) {console.log('Layout shift:', entry);}
}).observe({type: 'layout-shift', buffered: true});

数据展示

时序图展示

时序图作为一种强大的数据可视化工具,它能够形象地展示出不同应用程序在时间维度上的累积布局偏移(CLS)变化趋势。通过这种图形化的表示,我们可以清晰地观察到 CLS 指标随时间推移的波动情况,以及各个应用在不同时间段的稳定性表现。这种动态的视角使我们能够更好地理解应用在用户体验方面的潜在问题,并针对性地制定优化策略。例如,如果时序图显示出某个应用在特定事件发生后 CLS 值显著上升,我们可以迅速定位到问题所在,采取措施如调整页面元素位置、优化图片加载策略或改进内容动态加载机制,以减少意外的布局偏移,从而提升整体的视觉稳定性并改善用户体验。

可以根据不同的页面组来查看不同页面之间的 CLS 的指标情况,来对进行优化:

排行榜展示

通过排行榜能够展示不同屏幕尺寸的 CLS 的情况,根据应用的指标表现来有针对的优化 CLS :

通过排行榜能够展示不同页面组 CLS 的情况,根据页面组的指标表现来有针对的优化 CLS :

影响元素的展示

针对 CLS 的性能情况,可以通过时序图展示哪个元素影响了 CLS 的性能,来对 CLS 进行有针对的优化:

针对 CLS 的性能情况,可以通过排行榜展示哪个元素影响了 CLS 的性能,来对 CLS 进行有针对的优化:

CLS 优化

导致 CLS 不佳的最常见原因包括:

  • 没有尺寸的图片。
  • 广告、嵌入和没有尺寸的 iframe。
  • 动态注入的内容,如广告、嵌入式内容。

根据收集到的 appid、页面组、CLS 影响元素,配合上面的内容,可以有针对性的对这几个维度优化提高 CLS。

示例:

以某应用某路径下较高的 CLS 为例子,通过查看该设备的真实情况,可以做相对应的优化:

通过结合具体的影响元素,也可以更有针对性的对特定屏幕尺寸下的特定元素做优化,来提高视觉稳定性。

比如,向 <img> 标记添加了 width 和 height 属性,以确保在浏览器开始提取图片之前在网页上分配足够的空间。这会最大限度地减少自动重排和重新布局,在增加属性的同时也可以根据屏幕设备比有针对性的自适应。

对于宽高或屏幕设备比等不是非常精细的情况,可以通过设置 min-height ,min-width 来降低布局偏移,在一定程度上能够提高用户体验。

结语

总结来说,CLS 的优化是提升网页用户体验的关键环节,通过有针对性地对影响 CLS 的元素进行优化,我们可以有效地提高网页的视觉稳定性,为用户提供更加愉悦的浏览体验。在未来的网页设计和开发中,我们应该重视 CLS 的优化,确保网页在各种设备和屏幕尺寸下都能表现出良好的视觉稳定性。这将有助于提升网站的用户满意度,增加用户的忠诚度,从而为网站的发展带来更多的机会和挑战。

相关文章:

RUM 最佳实践-视觉稳定性的探索与实践

写在前面的话 在当今数字时代&#xff0c;网页的视觉稳定性对于提供良好的用户体验至关重要。其中一个衡量视觉稳定性的关键指标就是累积布局偏移&#xff08;Cumulative Layout Shift&#xff0c;简称 CLS&#xff09;。CLS 作为 Web Vitals 指标之一&#xff0c;它衡量的是网…...

PostgreSQL的学习心得和知识总结(一百三十八)|深入理解PostgreSQL数据库之Protocol message构造和解析逻辑

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…...

爬虫开发教程

一、爬虫概述 爬虫&#xff08;也称为网络爬虫或蜘蛛&#xff09;是一种自动化程序&#xff0c;能够模拟人类在互联网上浏览和抓取数据的行为。它通过发送HTTP请求&#xff0c;获取网页的HTML代码&#xff0c;然后解析这些代码以提取有用的数据。爬虫在数据分析、价格监测、竞…...

【Python】高级进阶(专版提升3)

Python 1 程序结构1.1 模块 Module1.1.1 定义1.1.2 作用1.1.3 导入1.1.3.1 import1.1.3.2 from import 1.1.4 模块变量1.1.5 加载过程1.1.6 分类 1.2 包package1.2.1 定义1.2.2 作用1.2.3 导入1.1.3.1 import1.1.3.2 from import 2 异常处理Error2.1 异常2.2 处理 3 迭代3.1 可…...

LeetCode 1378、1277、2944

1378 二级排序&#xff0c;compare函数必须是static的 class Solution { public:struct node {int val;int priority;};static bool compare(const node &n1, const node &n2) {if (n1.priority n2.priority) {return n1.val < n2.val;}return n1.priority < n…...

【缓存常见问题】

在使用缓存时特别是在高并发场景下会遇到很多问题&#xff0c;常用的问题有缓存穿透、缓存击穿、缓存雪崩以及缓存一致性问题。 1、缓存穿透 首先&#xff0c;什么是缓存穿透呢&#xff1f; 缓存穿透是指请求一个不存在的数据&#xff0c;缓存层和数据库层都没有这个数据&…...

Python爬取猫眼电影票房 + 数据可视化

目录 主角查看与分析 爬取可视化分析猫眼电影上座率前10分析猫眼电影票房场均人次前10分析猫眼电影票票房占比分析 主角查看与分析 爬取 对猫眼电影票房进行爬取&#xff0c;首先我们打开猫眼 接着我们想要进行数据抓包&#xff0c;就要看网站的具体内容&#xff0c;通过按F12…...

Spring Boot深度解析:是什么、为何使用及其优势所在

在Java企业级应用开发的漫长历史中&#xff0c;Spring框架以其卓越的依赖注入和面向切面编程的能力&#xff0c;赢得了广大开发者的青睐。然而&#xff0c;随着技术的不断进步和项目的日益复杂&#xff0c;传统的Spring应用开发流程逐渐显得繁琐和低效。为了解决这一问题&#…...

面向对象——类与对象

文章目录 类与对象构造函数、析构函数get/set方法函数&#xff1a;类内声明、类外定义static 类与对象 #include<iostream> #include<string> using namespace std; /* 类与对象 */ class Person{public:string name;// 固有属性&#xff0c;成员变量 int age;pu…...

Golang的[]interface{}为什么不能接收[]int?

在 Go 中&#xff0c;[]interface{} 和 []int 是两种不同的类型&#xff0c;虽然它们的底层数据结构都是切片&#xff0c;但是它们的元素类型不同。[]interface{} 是一个空接口切片&#xff0c;可以容纳任意类型的元素&#xff0c;而 []int 是一个整数切片&#xff0c;只能容纳…...

重启服务器或重启docker,导致emqx的Dashboard的密码重置为public

最近在项目中突然发现重启服务器,或者重启docker 修改好的emqx的Dashboard的密码重置为public 技术博客 http://idea.coderyj.com/ 1.解决办法就是固定 emqx的节点 # 拉取镜像 docker pull emqx/emqx# 创建目录&#xff0c;进行目录挂载 mkdir -p /docker/emqx/{etc,lib,data,…...

就业班 第三阶段(ansible) 2401--4.16 day2 ansible2 剧本+角色

六、Ansible playbook 简介 playbook 是 ansible 用于配置&#xff0c;部署&#xff0c;和管理被控节点的剧本。   通过 playbook 的详细描述&#xff0c;执行其中的一系列 tasks &#xff0c;可以让远端主机达到预期的状态。playbook 就像 Ansible 控制器给被控节点列出的的…...

常用的过滤网站扫描网站攻击的路径是那些,比如:/etc/passwd等

网站攻击中经常被尝试的路径主要包括利用漏洞获取敏感文件、执行系统命令或者注入恶意代码的尝试。以下是一些常见的被攻击者尝试访问的路径和文件&#xff0c;这些通常在网络入侵检测系统&#xff08;IDS&#xff09;和网络防火墙的过滤规则中被特别关注&#xff1a; 系统文件…...

考研数学|《1800》《660》《880》如何选择和搭配?(附资料分享)

直接说结论&#xff1a;基础不好先做1800、强化之前660&#xff0c;强化可选880/1000题。 首先&#xff0c;传统习题册存在的一个问题是题量较大&#xff0c;但难度波动较大。《汤家凤1800》和《张宇1000》题量庞大&#xff0c;但有些题目难度不够平衡&#xff0c;有些过于简单…...

论文笔记:Are Human-generated Demonstrations Necessary for In-context Learning?

iclr 2024 reviewer 评分 6668 1 intro 大型语言模型&#xff08;LLMs&#xff09;已显示出在上下文中学习的能力 给定几个带注释的示例作为演示&#xff0c;LLMs 能够为新的测试输入生成输出然而&#xff0c;现行的上下文学习&#xff08;ICL&#xff09;范式仍存在以下明显…...

C语言 | Leetcode C语言题解之第28题找出字符串中第一个匹配项的下标

题目&#xff1a; 题解&#xff1a; int strStr(char* haystack, char* needle) {int n strlen(haystack), m strlen(needle);if (m 0) {return 0;}int pi[m];pi[0] 0;for (int i 1, j 0; i < m; i) {while (j > 0 && needle[i] ! needle[j]) {j pi[j - …...

「Python大数据」数据采集-某东产品数据评论获取

前言 本文主要介绍通过python实现数据采集、脚本开发、办公自动化。数据内容范围:星级评分是1-3分、获取数据页面是前50页。 友情提示 法律分析:下列三种情况,爬虫有可能违法,严重的甚至构成犯罪: 爬虫程序规避网站经营者设置的反爬虫措施或者破解服务器防抓取措施,非法…...

ORACLE错误提示概述

OceanBase分布式数据库-海量数据 笔笔算数 保存起来方便自己查看错误代码。 ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出最大进程数 () ORA-00021: 会话附属于其它某些进程…...

2024年4月13日美团春招实习试题【第一题:好子矩阵】-题目+题解+在线评测【模拟】

2024年4月13日美团春招实习试题【第一题:好子矩阵】-题目题解在线评测【模拟】 题目描述&#xff1a;输入描述输出描述样例 解题思路一&#xff1a;模拟解题思路二&#xff1a;思路二解题思路三&#xff1a;直接判断 题目描述&#xff1a; 塔子哥定义一个矩阵是”好矩阵”&…...

ssm057学生公寓管理中心系统的设计与实现+jsp

学生公寓管理中心系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生公寓管理中心系统就是在这样的大环境下诞生&#xff0c;其可以帮助管…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...