阅读 1060

web性能优化之FCP

什么是FCP

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标,"内容"指的是文本、图像(包括背景图像)、<svg>元素或非白色的<canvas>元素。

首次内容绘制 (FCP) 是测量用户感知的加载速度的一个以用户为中心的重要指标,因为该项指标会在用户首次在屏幕上看到任何内容时,在页面加载时间轴中标记出相应的点,迅捷的 FCP 有助于让用户确信某些事情正在进行。

虽然部分内容已完成渲染,但并非所有内容都已经完成渲染。这是首次内容绘制 (FCP) 与*Largest Contentful Paint 最大内容绘制 (LCP)* (旨在测量页面的主要内容何时完成加载)之间的重要区别。

FCP的指标:

0-1.8 好 1.8-3.0 一般 3以上不好 单位s

在JavaScript中测量FCP

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});复制代码

但是实际的指标与api会存在很多场景上的差异,这些差异提高了我们对指标计算的复杂度,而chrom团队也不建议我们记住这些细微的差异,推荐我们使用web-vitals库测量FCP。

改进FCP

  • 消除阻塞渲染的资源

  • 缩小 CSS

  • 移除未使用的 CSS

  • 预连接到所需的来源

  • 减少服务器响应时间 (TTFB)

  • 避免多个页面重定向

  • 预加载关键请求

  • 避免巨大的网络负载

  • 使用高效的缓存策略服务静态资产

  • 避免 DOM 过大

  • 最小化关键请求深度

  • 确保文本在网页字体加载期间保持可见

  • 保持较低的请求数和较小的传输大小

fcp之消除阻塞渲染

  • script标签和link标签在一般情况下都会阻塞渲染。

  • 判断什么是关键资源

    • Chrome DevTools 的coverage选项卡可以识别到css和js 加载了多少代码,使用了多少这些加载的代码。我们尽量传输首次绘制我们所需的css样式和js代码。


作者:不如吃茶去
链接:https://juejin.cn/post/7025935054014513166

文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐