得鹿梦鱼 得鹿梦鱼

指标

First Contentful Paint

FCP 用于衡量浏览器在用户导航到您的网页后渲染第一部分 DOM 内容所需的时间。网页上的图片、非白色 <canvas> 元素和 SVG 会被视为 DOM 内容;不包括 iFrame 中的任何内容

如何确定您的 FCP 得分

FCP 评分是根据 HTTP 归档中的数据,对您网页的 FCP 时间与真实网站的 FCP 时间进行比较得出的。例如,第 99 百分位的网站大约需要 1.2 秒才能呈现 FCP。如果您的网站的 FCP 为 1.2 秒,则 FCP 得分为 99

如何提高 FCP 得分

对于 FCP,有一个问题尤为重要,那就是字体加载时间,具体内容参考

速度指数speed index

以秒为单位显示速度指数

用于衡量网页加载期间内容可视化显示的速度,

如何确定您的速度指数得分

速度指数得分是根据 HTTP 归档中的数据,对您网页的速度指数与真实网站的速度指数进行比较得出的

如何提高速度指数得分

  1. 字体加载实践
  2. 最大限度地减少主线程工作

total blocking time总屏蔽时间

TBT 用于衡量网页被阻止响应用户输入(例如鼠标点击、屏幕点按或键盘按键)的总时间。计算方法是将 First Contentful Paint 和 Time to Interactive 之间的所有长任务的阻塞部分相加。任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间就是阻塞部分。例如,如果 Lighthouse 检测到一个时长为 70 毫秒的任务,则阻塞部分将为 20 毫秒(70 毫秒 - 50 毫秒)

如何提高 TBT 得分

  1. 不必要的 JavaScript 加载、解析或执行
  2. JavaScript 语句效率低下

最大内容渲染时间

衡量的是视口中最大内容元素何时渲染到屏幕上。这大致表示网页的主要内容何时可供用户查看

LCP