聊聊前端性能指标那些事儿

一、前端性能指标有哪些?

根据 chrome Lighthouse 最新规则,前端性能指标考量主要有 FCP(First Contenful Paint)、SI(Speed Index)、LCP(Largest Contentful Paint)、TBT(Total Blocking Time)、CLS(Cumulative Layout Shift) ,占比分别如下。

聊聊前端性能指标那些事儿_第1张图片

二、什么是 FCP ?

FCP: First Contentful Paint 首次内容绘制是指测量页面从开始加载到页面内容(文本、图片、背景图、svg 元素或非白色 canvas 元素)的任何部分在屏幕上完成渲染的时间,是测量加载速度感知的重要指标之一。

示例:

聊聊前端性能指标那些事儿_第2张图片

从上图可以观察到,页面加载开始到页面渲染完成的时间轴中,FCP 发生在第二帧,首批文本和图片在屏幕上已经渲染完成。

虽然页面一部分内容已完成渲染,但这并非页面所有内容全部完成渲染;这就是首次内容绘制(FCP)与最大内容绘制(LCP)最重要的区别。

FCP 性能值:首次内容绘制完成渲染时间应控制在 1.8s 以内。

我们可以从以下方向点优化 FCP :

•消除阻塞渲染的资源:

你可能感兴趣的:(开发语言)