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