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

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 提出的一套核心网页性能指标&#xff0c;旨在帮助开发者理解和优化网站的用户体验。这些指标分为核心 Web Vitals 和附加 Web Vitals&#xff0c;涵盖了加载性能、交互性和视觉稳定性三个方面。以下是详细的介绍和如何使用 Web Vitals 来优化你的网站。 …...

c#中的约束、TimeSpan、defult、operator

c#中的约束 在C#中&#xff0c;约束&#xff08;Constraints&#xff09;用于限制泛型类型参数的类型&#xff0c;以确保泛型类型或方法在编译时能够满足特定的要求。约束允许开发者指定泛型类型参数必须满足的条件&#xff0c;比如实现特定的接口或继承自特定的类。以下是一些…...

挖矿木马攻破了服务器

最近被国外的挖矿木马攻破了服务器 根据非法登录&#xff0c;用 #last指令查看登录ip 首先删掉登录主机 #kill -9 pts/0 第二步 #top 看看什么占用cpu高 第三步杀死狂刷CPU的服务 过一分钟后&#xff0c;服务又开始狂刷cpu。 第四步根据pid查到服务地址 #systemctl status…...

从容应对技术面试:策略、技巧与成功案例

欢迎来到我的博客,很高兴能够在这里和您见面!欢迎订阅相关专栏: 工💗重💗hao💗:野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典:收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来:详细讲解AIGC的概念、核心技术、应用领域等内容。 ⭐…...

Spring Boot 整合 RestTemplate:详解与实战

Spring Boot 整合 RestTemplate&#xff1a;详解与实战指南 一、引言二、依赖添加Maven 示例&#xff1a;Gradle 示例&#xff1a; 三、创建 RestTemplate 实例四、使用 RestTemplate 发起请求五、处理响应六、高级用法1. 自定义 RestTemplate 实例2. 文件上传、下载以及常见的…...

【利用模板模式和责任链模式实现数据校验】

利用模板模式和责任链模式实现数据校验 一、业务背景二、模板模式和责任链模式代码实现1、数据校验抽象处理器ValidateHandler2、数据校验责任链工具类ValidateChainUtil3、网元调整数据校验抽象类AbstractNodeCheckHandler4、依次定义3个责任链handler&#xff0c;通过Order注…...

学习笔记第十九天

1.标准I/O的基本概念 标准输入&#xff08;stdin&#xff09;&#xff1a;默认是指键盘输入。 标准输出&#xff08;stdout&#xff09;&#xff1a;默认是指显示器输出。 标准错误&#xff08;stderr&#xff09;&#xff1a;用于输出错误信息&#xff0c;也是指向显示器&…...

设计模式 - 单例模式

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、单例模…...

fastapi之WebSockets

文章目录 WebSockets基本概念FastAPI 中的 WebSocket 支持WebSocket 应用示例示例 1: 简单的 WebSocket 连接解释 示例 2: 广播消息的 WebSocket 实现解释 客户端代码示例 完整示例项目结构服务器端代码 (main.py)解释 简单的前端客户端 (static/index.html)解释 测试 相关代码…...

Kotlin 和 Java区别

Kotlin 和 Java 是两种主要用于 Android 开发的编程语言&#xff0c;它们之间有一些关键的区别&#xff1a; 1. 语法简洁性&#xff1a; Kotlin&#xff1a;具有更简洁的语法&#xff0c;减少了冗余代码。例如&#xff0c;Kotlin 支持类型推断&#xff0c;避免了大量的样板…...

windows 达梦到ORACLE dblink

达梦通过DBLINK访问Oracle数据库有两种: 方式一&#xff1a;通过Oracle oci接口; 方式二&#xff1a;一种是通过ODBC数据源的方式。 本案例选择使用Oralce OCI的方式去访问Oracle数据库。 配置Oracle OCI客户端 下载地址&#xff1a;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端口做网络访问控制&#xff0c;如设置iptables…...

算法训练.

一.扩散 题解&#xff1a; 计算点之间的距离&#xff0c;然后对图进行处理即可&#xff0c;这个数据规模较小&#xff0c;因此我使用了floyd,还有最小生成树和二份答案加并查集的写法&#xff1b; 代码&#xff1a; #include <iostream> #include <cstring> #in…...

08、MySQL-事务

目录 1、事务简介 2、事务操作 2.1 方式一 2.2 方式二 3、事务四大特性 4、并发事务问题 5、事务隔离级别 1、事务简介 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c…...

2024 年的 Node.js 生态系统

数据来源于 Node.js Toolbox&#xff0c;网站展示了 Node.js 生态系统中积极维护且流行的库。...

LVS(Linux Virtual Server)

简介 LVS&#xff08;Linux Virtual Server&#xff09;是一个高性能的开源负载均衡解决方案&#xff0c;它通过在Linux内核中实现IPVS&#xff08;IP Virtual Server&#xff09;模块来提供负载均衡功能。LVS能够将外部请求根据特定的算法分发到后端的多个服务器上&#xff0c…...

回顾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 …...

【数据结构】队列,你必须知道的内部原理!!!

&#x1f31e;&#x1f31e;&#x1f31e;生活本就沉闷&#xff0c;但跑起来就会有风 ~~~ 前言&#xff1a; &#x1f31f;&#x1f31f;Hello家人们&#xff0c;这期讲解数据结构队列的基础知识&#xff0c;希望你能帮到屏幕前的你。 &#x1f4da;️上期博客在这里&#xff1…...

Ubuntu24.04编译FFmpeg6.1(支持x264、x265、fdk-acc)

FFmpeg是一个开源的多媒体处理工具集&#xff0c;可以用于处理音频、视频和图片等多种媒体格式。由于其强大的功能和灵活性&#xff0c;FFmpeg被广泛应用在多媒体处理领域&#xff0c;包括音视频编解码、流媒体服务器、视频转码等。FFmpeg7.0 版本移除了 6.0 之前已弃用的 API&…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...