Skip to main content

性能指标

指标

页面渲染各个阶段的标识符,可以通过计算的到

Locale Dropdown

阶段(简写)描述阶段(全称)
TFTT首字节Time To First Byte
FP首次绘制(第一个节点)First Paint
FCP首次由内容的绘制(骨架)First Contentful Paint
FMP首次有意义的绘制（包含所有元素/数据）First Meaningful
TTI达到可交互时间，推荐的响应时间是100ms以内否则有延迟Time To Interactive
Long Tasks达到50ms的任务
SSR&CSR服务端渲染和客户端渲染Server-Side_Rendering/Client Side Rendering
Isomorphic同构化

Locale Dropdown

通过chrome面板上Performance可以收集到上面的信息

FP、 FCP、 FMP、 TTI

Locale Dropdown

LongTask

Locale Dropdown

SPA

通常使用React/Vue编写的代码打包后如下：

FP

Locale Dropdown

FCP/flatMap

Locale Dropdown

可以采用SSR服务端渲染，在服务器将HTML组织完成，不会牺牲TTFP时间。

新一代WEB标准

LCP 、FID、 TBT、 CLS

Locale Dropdown

Locale Dropdown

阶段（简写）描述阶段（全称）
LCP最大内容绘制，用于记录是窗内最大的元素绘制时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录LCP(Largest Contentful Paint)
FID首次输入延迟，记录在FCP和TTI之间用户首次与页面交互时响应的延迟FID(First Input Time)
TBT阻塞总时间，记录了FCP到TTI之间所有场任务的阻塞时间总和TBT(Total Blocking Time)
CLS累计位移偏移，记录了页面上非预期的位移波动。使用按钮添加了某个元素，导致页面上其他未知的元素发生了偏移造成了页面抖动CLS(Cusmulative Layout Shift)

概念

Locale Dropdown

Locale Dropdown

这些指标包括加载体验、交互性和页面内容的视觉稳定性，分别是LCP FID CLS

LCP

LPC 全称 Largest Contentful Paint,用于衡量标准报告视口内可见的最大内容元素的渲染时间。为了提供良好的用户体验，网站应努力在开始加载页面的前 2.5 秒内进行 最大内容渲染

相比 FCP,这个指标就非常有价值了，因为这个值是根据页面加载渲染不断变化的，如果页面有一个 lodaing 动画，然后才渲染出具体内容，那么这个指标计算出来的就是具体内容的加载时间,而非 lodaing 动画的加载时间

LCP考虑哪些元素

LCP 目前并不会计算所有元素，因为这样会使这个指标变得非常复杂，它现在只关注下面的元素：

  • img元素
  • img元素内的svg元素
  • video元素
  • 通过url()函数加载背景图片的元素
  • 包含文本节点或其他内敛文本元素子级的块级元素

FID

FID First Input Delay:即记录用户和页面进行首次交互操作所花费的时间.FID 指标影响用户对页面交互性和响应性的第一印象。为了提供良好的用户体验，站点应努力使首次输入延迟小于 100 毫秒。

FID 发生在 FCP 和 TTI 之间，因为这个阶段虽然页面已经显示出部分内容，但尚不具备完全的可交互性。这个阶段用户和页面交互，往往会有较大延迟。

例如:浏览器接收到用户输入操作时,主线程正在忙于执行一个耗时比较长的任务，只有当这个任务执行完成后，浏览器才能响应用户的输入操作。它必须等待的时间就此页面上该用户的 FID 值。

这个时候我们可以使用 Web Worker开启一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。将非 UI 操作移至单独的工作线程可以减少主线程的阻塞时间，从而改善 FID

CLS

CLS 会测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和。布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。为了提供良好的用户体验，网站应努力使 CLS 分数小于 0.1

优化

不要使用无尺寸元素

图像和视频等元素上始终需要包括 width 和 height 尺寸属性，现代浏览器会根据图像的 width 和 height 属性设置图像的默认长宽比，知道纵横比后，浏览器就可以为元素计算和保留足够的空间。

或者，使用 aspect-ratio 也可以提前指定宽高比：

img {
    aspect-ratio: attr(width) / attr(height);
}

使用响应式图片

可以使用 srcset 定义图像，使浏览器可以在图像之间进行选择，以及每个图像的大小。

<img 
    width="1000" 
    height="1000"
    src="puppy-1000.jpg"
    srcset="puppy-1000.jpg 1000w,
            puppy-2000.jpg 2000w,
            puppy-3000.jpg 3000w"
    alt="ConardLi"
/>
  • 永远不要在现有内容之上插入内容，除非是响应用户交互。这确保了预期的布局变化
  • 很多页面广告都是动态插入的，所以一定要提前为广告位预留一定空间。

总结

在网站优化时，应该着重看以下几个指标。

Locale Dropdown