前端页面加载性能指标之LCP

简介: 本文介绍了 Largest Contentful Paint (LCP),一种衡量网页加载性能的指标,专注于视口内最大图片或文本块的完全渲染时间,旨在提升用户对主要内容加载速度的感知。文章还探讨了LCP的测量方法和优化策略,如图像优化、懒加载等,以帮助改善网页性能。

之前已经介绍过 FCP,可以点击查阅前端页面加载性能指标之 FCP。本文介绍与之相对应的 LCP。通过上文得知,FCP 衡量的是页面首次渲染出有意义的内容的时间点,这通常包括文本、图像、非白色画布或 SVG 的渲染,可以让用户感知到网页正在加载。那么 LCP 又是什么?


什么是 LCP

Largest Contentful Paint(LCP)衡量的是页面从开始加载到视口内最大的图片或文本块完全渲染的时间。LCP 关注的是用户感知的主要内容加载速度,这通常包括页面上最显眼的元素,如大图像或文本块。


LCP 测量哪些元素

LCP 测量的通常是用户视图范围内的元素,包括   image、 svg、 video,通过 url 设置的 backgroud,以及包含文本节点或内联子元素的块级元素。

因为 LCP 是跟视图大小有关,所以 LCP 元素也不是一成不变。


以下情况的元素则不纳入 LCP 计算范围

  • 不可见元素:如果元素的透明度设置为 opacity: 0
  • 全视口元素:覆盖整个视口的元素可能被视为背景而非主要内容。
  • 低熵图片:低熵图片通常指的是图像中灰度分布较为集中,灰度值较为单一或变化较小的图片。

不管什么元素,通过 css 设置了 margin,padding,border 这些属性,计算尺寸时都不会参与计算


LCP 多少及格

根据谷歌的定义,一个良好的 LCP 得分是在 2.5 秒以内,这表示要求 75%的用户能够在这个时间内看到页面的主要内容 。如果 LCP 时间超过 4 秒,则被认为是“差”的用户体验。


如何测量 LCP

下面推荐几种方式来测量 LCP 元素

  • Chrome 的 Performance(推荐)
  • Chrome 的 LightHouse
  • PageSpeed Insights
  • 使用 PerformanceObserver API

Performance(推荐)

Chrome 的 Performance 面板可以帮助我们分析页面的性能数据,包括 DCL、FP、FCP、LCP 等指标。鼠标点击响应的指标,可以查看关联的元素。下图就可以看到 LCP 元素。Performance 面板可以帮助我们更直观的分析页面性能数据,通常我也是用来分析页面加载性能,包括请求时序队列,JS 执行性能等。



Lighthouse

LightHouse 是谷歌浏览器提供的一个性能测试工具,可以诊断手机和桌面设备的网页性能。

接下来我们来测试一下该网站的性能数据,可以得出下面的性能概览。



通过分析结果可以看出首页的性能数据,包括 LCP、FCP、FID、CLS 等指标,下面是一些优化建议。虽然从数据看出,我的网站性能总体还是不错的,不过这仅仅是一个参考,具体的优化还需要根据实际情况来。




PageSpeed Insights

PageSpeed Insights  是谷歌提供的在线网站性能分析工具,可以帮助你分析页面性能。它会给你一个关于页面性能的综合报告,包括 LCP。这个工具跟部署的服务器区域有关,所以可能会有不同的结果。类似于 Lighthouse,PageSpeed Insights 也会给出一些优化建议。这里就不做展示了。


使用 PerformanceObserver api

PerformanceObserver 可以通过脚本的方式来获取 LCP 元素。可以作为前端性能指标收集的一种方式。

let lastLcp;
const po = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  for (const entry of entries) {
    if (entry.startTime !== lastLcp) {
      console.log("========下面是检测到的LCP元素========");
      console.log(entry.element);
      lastLcp = entry.startTime;
    }
  }
});
po.observe({ type: "largest-contentful-paint", buffered: true });


如何改进 LCP

  • 图像优化:压缩图片、选择合适的图像格式,如 WebP,以减少文件大小。
  • 懒加载:延迟加载页面上非关键内容,直到用户滚动到它们。
  • 提前加载:对影响LCP的关键请求可以提前发起请求。
  • 使用 cdn:通过内容分发网络加速静态资源的加载。
  • 减少服务器响应时间:优化服务器性能,利用接口,资源缓存减少数据传输。
  • 移除或延迟非必要的第三方脚本:减少对主要内容加载的阻塞 。


本文为原创,未经授权,禁止任何媒体或个人自媒体转载


原文地址:[前端页面加载性能指标之LCP](https://www.kelen.cc/posts/lcp)


目录
相关文章
|
8月前
|
缓存 前端开发 JavaScript
前端性能优化:如何提升页面加载速度与用户体验?
在当今互联网时代,用户对网页加载速度的要求越来越高。本文将介绍前端性能优化的重要性,并提供一些实用的技巧和策略,帮助开发者提升页面加载速度,从而提升用户体验。
|
8月前
|
缓存 前端开发 JavaScript
前端开发中的性能优化技巧——从页面加载速度到用户体验
在当今互联网时代,用户对于网站的访问速度和体验要求越来越高,而前端开发中的性能优化技巧则成为了不可或缺的一部分。本文将从页面加载速度、代码压缩与合并、图片优化、缓存策略以及浏览器渲染优化等几个方面,为大家详细介绍如何提升网站的性能和用户体验。
115 1
|
前端开发 JavaScript UED
前端性能的性能指标之首次内容绘制(FCP)
首次内容绘制(First Content Paint)是前端性能的一个重要指标,因为它是用户体验的一部分,并且对于网页的响应速度和可接受性有很大的影响。
403 0
|
5月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`<link>`和`@import`两种引入方式。`<link>`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`<link>`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
139 2
|
5月前
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
49 0
|
6月前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
45 1
|
7月前
|
监控 前端开发 JavaScript
常见的前端监控性能指标
常见的前端监控性能指标
152 0
|
8月前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
261 1
|
8月前
|
缓存 前端开发 JavaScript
优化前端性能:减少页面加载时间的六大技巧
本文将探讨如何通过改善前端性能来减少页面加载时间,从而提升用户体验。我们将介绍六种实用的技巧,包括减少HTTP请求、压缩资源文件、使用CDN加速、延迟加载、缓存策略和代码优化,帮助开发人员有效地提升网页性能。
|
8月前
|
前端开发 JavaScript 算法
如何优化前端页面加载速度
在现代网站中,前端页面加载速度是至关重要的。本文将介绍一些优化前端页面加载速度的技巧和最佳实践,以确保您的网站可以更快地加载。
139 1

热门文章

最新文章