Web Vitals:提升用户体验的关键指标
Web Vitals 是 Google 提出的一套核心网页性能指标,旨在帮助开发者理解和优化网站的用户体验。这些指标分为核心 Web Vitals 和附加 Web Vitals,涵盖了加载性能、交互性和视觉稳定性三个方面。以下是详细的介绍和如何使用 Web Vitals 来优化你的网站。
核心 Web Vitals
-
核心 Web Vitals 包括三个关键指标:最大内容绘制(Largest Contentful Paint,简称 LCP)、首次输入延迟(First Input Delay,简称 FID)和累积布局偏移(Cumulative Layout Shift,简称 CLS)。
-
LCP(最大内容绘制):衡量页面主要内容元素渲染完成的时间。目标值应小于 2.5 秒。
-
FID(首次输入延迟):衡量用户第一次与页面交互(例如点击按钮)到浏览器开始处理该交互的时间。目标值应小于 100 毫秒。
-
CLS(累积布局偏移):衡量页面在加载过程中意外布局变化的程度。目标值应小于 0.1。
附加 Web Vitals
除了核心 Web Vitals,还有几个附加指标,包括首次内容绘制(First Contentful Paint,简称 FCP)和时间至首字节(Time to First Byte,简称 TTFB)。
-
FCP(首次内容绘制):衡量页面上的第一个文本或图像内容渲染完成的时间。目标值应小于 1.8 秒。
-
TTFB(时间至首字节):衡量从请求开始到接收到第一个字节的响应时间。目标值应小于 100 毫秒。
如何测量 Web Vitals
Web Vitals 可以通过实验室数据(Lab Data)和现场数据(Field Data)两种方式进行测量。
-
实验室数据:使用 Chrome DevTools 或 Lighthouse 等工具在受控环境中模拟真实用户的行为。
-
现场数据:通过实际用户在真实世界中的使用情况收集数据,通常需要在网站上实施 Web Vitals API。
如何优化 Web Vitals
下面是一些优化 Web Vitals 的通用策略:
优化 LCP:
- 压缩和优化关键资源,如图片和字体。
- 使用懒加载(Lazy Loading)技术,仅在需要时加载非关键资源。
- 避免在关键路径上使用大型 CSS 和 JavaScript 文件。
优化 FID:
- 减少主线程工作,避免长时间的 JavaScript 执行。
- 使用预加载(Preloading)和预取(Prefetching)技术。
- 使用服务工作者(Service Worker)缓存静态资源。
优化 CLS:
- 确保所有元素都有固定的尺寸,避免动态调整大小。
- 使用尺寸属性(如 width 和 height)来预留空间给图片和广告。
- 避免在页面加载过程中插入新的元素。
实施 Web Vitals
为了在你的网站上实施 Web Vitals 测量,你可以使用 Web Vitals 库。
// index.js
import { reportWebVitals } from 'web-vitals';reportWebVitals(console.log);
你也可以将数据上报到服务器或使用 Google Analytics 等工具进行分析。
使用 Lighthouse
Lighthouse 是一个开源的自动化工具,用于改进 Web 页面的质量。它可以生成一份报告,其中包含 Web Vitals 的分数以及优化建议。
// 安装 Lighthouse CLI
npm install -g lighthouse// 运行 Lighthouse
lighthouse https://example.com --chrome-flags="--headless"
进阶优化技巧
优化 LCP
使用预加载(Preloading):对于关键资源,如主样式表和关键 JavaScript 文件,使用 <link rel="preload"> 标签进行预加载,确保它们在页面加载初期就能被浏览器获取。
<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/main.js" as="script">
优化图片和媒体:压缩图片文件,使用现代图片格式(如 WebP),并为不同设备和网络条件提供多种分辨率的图片。
优化 FID
减少 JavaScript 执行时间:避免在关键路径上执行大型 JavaScript 文件,可以将它们放在文档末尾加载,或者使用异步加载方式。
<script src="/non-critical.js" defer></script>
使用 Web Workers:将一些复杂的计算任务放到 Web Workers 中执行,避免阻塞主线程。
优化 CLS
固定尺寸的媒体元素:确保所有的图片、视频和其他媒体元素都有明确的宽度和高度属性,避免在加载过程中引起布局重排。
<img src="/image.jpg" alt="An image" width="600" height="400">
使用 Resize Observer:动态调整元素大小时,使用 Resize Observer API 来代替定时器或 resize 事件,减少不必要的布局重排。
const observer = new ResizeObserver(entries => {entries.forEach(entry => {// 更新元素样式});
});
observer.observe(document.querySelector('#dynamic-element'));
监控和持续优化
实施 Web Vitals API:在你的网站上实施 Web Vitals API,收集真实用户的性能数据,以便持续监控和优化。
import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';onLCP((lcp) => {// 发送 LCP 数据到服务器
});
onFID((fid) => {// 发送 FID 数据到服务器
});
onCLS((cls) => {// 发送 CLS 数据到服务器
});
使用 Google Search Console:Google Search Console 提供了 Core Web Vitals 报告,帮助你了解网站的性能表现,并提供具体的改进建议。
定期进行 Lighthouse 审计:将 Lighthouse 审计纳入你的开发流程,定期检查和优化 Web Vitals。
结合 SEO 和 UX
优化 Web Vitals 不仅可以提升用户体验,还能提高搜索引擎排名。Google 已经宣布,Web Vitals 成为了其排名算法的一部分,这意味着页面性能直接影响到网站的可见度和流量。因此,优化 Web Vitals 不仅是一项技术挑战,也是提升网站整体价值的战略决策。
结论
Web Vitals 提供了一套全面的性能指标,帮助开发者和网站所有者理解并优化用户体验。通过关注 LCP、FID 和 CLS 等关键指标,结合预加载、图片优化、Web Workers 和布局稳定性等技术手段,你可以显著提升网站的加载速度、交互性和稳定性。实施 Web Vitals API 和使用工具如 Lighthouse 和 Google Search Console 进行持续监控,将确保你的网站始终保持最佳状态,为用户提供卓越的体验。
相关文章:
Web Vitals:提升用户体验的关键指标
Web Vitals 是 Google 提出的一套核心网页性能指标,旨在帮助开发者理解和优化网站的用户体验。这些指标分为核心 Web Vitals 和附加 Web Vitals,涵盖了加载性能、交互性和视觉稳定性三个方面。以下是详细的介绍和如何使用 Web Vitals 来优化你的网站。 …...
c#中的约束、TimeSpan、defult、operator
c#中的约束 在C#中,约束(Constraints)用于限制泛型类型参数的类型,以确保泛型类型或方法在编译时能够满足特定的要求。约束允许开发者指定泛型类型参数必须满足的条件,比如实现特定的接口或继承自特定的类。以下是一些…...
挖矿木马攻破了服务器
最近被国外的挖矿木马攻破了服务器 根据非法登录,用 #last指令查看登录ip 首先删掉登录主机 #kill -9 pts/0 第二步 #top 看看什么占用cpu高 第三步杀死狂刷CPU的服务 过一分钟后,服务又开始狂刷cpu。 第四步根据pid查到服务地址 #systemctl status…...
从容应对技术面试:策略、技巧与成功案例
欢迎来到我的博客,很高兴能够在这里和您见面!欢迎订阅相关专栏: 工💗重💗hao💗:野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典:收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来:详细讲解AIGC的概念、核心技术、应用领域等内容。 ⭐…...
Spring Boot 整合 RestTemplate:详解与实战
Spring Boot 整合 RestTemplate:详解与实战指南 一、引言二、依赖添加Maven 示例:Gradle 示例: 三、创建 RestTemplate 实例四、使用 RestTemplate 发起请求五、处理响应六、高级用法1. 自定义 RestTemplate 实例2. 文件上传、下载以及常见的…...
【利用模板模式和责任链模式实现数据校验】
利用模板模式和责任链模式实现数据校验 一、业务背景二、模板模式和责任链模式代码实现1、数据校验抽象处理器ValidateHandler2、数据校验责任链工具类ValidateChainUtil3、网元调整数据校验抽象类AbstractNodeCheckHandler4、依次定义3个责任链handler,通过Order注…...
学习笔记第十九天
1.标准I/O的基本概念 标准输入(stdin):默认是指键盘输入。 标准输出(stdout):默认是指显示器输出。 标准错误(stderr):用于输出错误信息,也是指向显示器&…...
设计模式 - 单例模式
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、单例模…...
fastapi之WebSockets
文章目录 WebSockets基本概念FastAPI 中的 WebSocket 支持WebSocket 应用示例示例 1: 简单的 WebSocket 连接解释 示例 2: 广播消息的 WebSocket 实现解释 客户端代码示例 完整示例项目结构服务器端代码 (main.py)解释 简单的前端客户端 (static/index.html)解释 测试 相关代码…...
Kotlin 和 Java区别
Kotlin 和 Java 是两种主要用于 Android 开发的编程语言,它们之间有一些关键的区别: 1. 语法简洁性: Kotlin:具有更简洁的语法,减少了冗余代码。例如,Kotlin 支持类型推断,避免了大量的样板…...
windows 达梦到ORACLE dblink
达梦通过DBLINK访问Oracle数据库有两种: 方式一:通过Oracle oci接口; 方式二:一种是通过ODBC数据源的方式。 本案例选择使用Oralce OCI的方式去访问Oracle数据库。 配置Oracle OCI客户端 下载地址:https://www.oracle.com/database/techno…...
大数据应用组件
1、数据存储1.1、hive->hdfs、mapredus1.2、ClickHouse1.3、Elasticsearch1.4、PostgreSQL1.5、HBase 2、数据抽取2.1、Kettle2.2、DataX2.3、Canal2.4、Flink CDC2.5、Sqoop2.6、Filebeat&Logstash(日志) 3、任务编排3.1、Apache DolphinScheduler 4、数据处理4.1、spa…...
Docker Remote API未授权访问漏洞
9.Docker Remote API未授权访问漏洞 步骤一:使用以下Fofa语句对Docker产品进行搜索. port"2375" 步骤二:直接使用浏览器访问以下路径 /version#查看版本信息 /info#查看容器信息 漏洞修复 1.端口访问控制 对2375端口做网络访问控制,如设置iptables…...
算法训练.
一.扩散 题解: 计算点之间的距离,然后对图进行处理即可,这个数据规模较小,因此我使用了floyd,还有最小生成树和二份答案加并查集的写法; 代码: #include <iostream> #include <cstring> #in…...
08、MySQL-事务
目录 1、事务简介 2、事务操作 2.1 方式一 2.2 方式二 3、事务四大特性 4、并发事务问题 5、事务隔离级别 1、事务简介 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,…...
2024 年的 Node.js 生态系统
数据来源于 Node.js Toolbox,网站展示了 Node.js 生态系统中积极维护且流行的库。...
LVS(Linux Virtual Server)
简介 LVS(Linux Virtual Server)是一个高性能的开源负载均衡解决方案,它通过在Linux内核中实现IPVS(IP Virtual Server)模块来提供负载均衡功能。LVS能够将外部请求根据特定的算法分发到后端的多个服务器上,…...
回顾Python
一、python基础 1、环境python2、python3 [rootpython ~]# yum list installed | grep python #检查是否有python包 [rootpython ~]# yum list installed | grep epel #检查是否有epel包 [rootpython ~]# yum -y install epel-release [rootpython ~]# yum -y install …...
【数据结构】队列,你必须知道的内部原理!!!
🌞🌞🌞生活本就沉闷,但跑起来就会有风 ~~~ 前言: 🌟🌟Hello家人们,这期讲解数据结构队列的基础知识,希望你能帮到屏幕前的你。 📚️上期博客在这里࿱…...
Ubuntu24.04编译FFmpeg6.1(支持x264、x265、fdk-acc)
FFmpeg是一个开源的多媒体处理工具集,可以用于处理音频、视频和图片等多种媒体格式。由于其强大的功能和灵活性,FFmpeg被广泛应用在多媒体处理领域,包括音视频编解码、流媒体服务器、视频转码等。FFmpeg7.0 版本移除了 6.0 之前已弃用的 API&…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码:HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...
车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...
fast-reid部署
配置设置: 官方库链接: https://github.com/JDAI-CV/fast-reid# git clone https://github.com/JDAI-CV/fast-reid.git 安装依赖: pip install -r docs/requirements.txt 编译:切换到fastreid/evaluation/rank_cylib目录下&a…...
