道招

了解网页性能指标(getTTFB,getFCP,getLCP,getFID,getCLS)的含义,通过实战理解各指标影响因素

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

了解网页性能指标(getTTFB,getFCP,getLCP,getFID,getCLS)的含义,通过实战理解各指标影响因素

Google公司的Web Vitals旨在为质量信号提供统一的指导,方便一个网站量化用户体验的性能指标,其中常用的指标有TTFB,FCP,LCP,FID,CLS。

npm包

import {getTTFB, getFCP, getLCP, getFID, getCLS} from 'web-vitals';

getTTFB(console.log);
getFCP(console.log);
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

如果我们想以CDN的形式使用web-vitals

<body>

<script type="module">
  import {getTTFB, getFCP, getLCP, getFID, getCLS} from 'https://unpkg.com/web-vitals@2.1.4/dist/web-vitals.js?module';

  getTTFB(console.log);
  getFCP(console.log);
  getLCP(console.log);
  getFID(console.log);
  getCLS(console.log);
</script>
</body>

接下来的内容里面我们用express+ejs模板来模拟测试这几个指标变化。

指标详解

TTFB(Time to First Byte )首字节时间

TTFB衡量您的服务器对访问者浏览器请求的响应能力。换句话说,它是用户到达网页和服务器识别它之间所花费的时间,俗称“白屏时间”。 浏览器从服务器接收首字节数据所需的时间越长,意味着加载页面所需的时间就越长,并且因为TTFB是最初的交互,很长的首字节时间意味着页面的其余部分甚至无法开始加载,所以这是一个很基础,也很致命的指标。

评级
  • 200毫秒以下 好
  • 200毫秒和500毫秒之间 需要改进
  • 超过600毫秒 差

FCP(First Contentful Paint)首次内容绘制

网站的首次内容绘制是浏览器在您的页面上呈现第一个DOM元素的时间。这包括图像、画布元素(非白色)或文本。通俗地说,FCP是指用户可以看到页面的某些部分发生变化。这个元素可能不是从服务器呈现或加载的第一个元素,但它是用户可以看到的第一个元素,因此它对您网站的UX至关重要。

网站在iframe中包含的任何内容都不会被FCP考虑在内,非内容绘画(例如背景颜色的变化)也不考虑在内。前面提到的背景颜色的变化那是FP(First Paint)的考虑范围

FCP其实是一个相对比较主观的指标,我们可以“造假”(比如预先做一个Loading元素)。拥有快速的首次内容绘制很重要,因为它会使用户感觉到您的网站正在快速加载(不管是不是真的),即使您的站点的首次交互延迟(用户可以与站点互动的时间)可能比竞争对手长得多,但由于您的FCP更快,能让用户尽快看到有东西展示,因此在用户看来它可能更快。

也就是说,FCP并不是要欺骗您的用户。较低的FCP时间通常是页面速度的良好指标,优化它的方法也会影响其他页面速度指标(例如最大内容绘制)。

评级
  • 1.8秒以下 好
  • 1.8秒到3秒之间 需要改进
  • 超过3秒 差
LCP(Largest Contentful Paint)最大内容绘制

在大多数网页上,有一个元素因其大小和突出程度而与众不同。例如,考虑这个着陆页,其中巨无霸Banner部分在视口中占主导地位: file

那个巨无霸Banner部分代表这个特定页面的最大内容绘制(LCP)。也就是说,LCP是网站渲染包含最多内容的元素所花费的时间

我们需要了解LCP分数可能(并且希望会)与您网站的整体加载时间不同。您可能有一个页面需要 3 秒才能完全加载,但它的LCP可能只有 2 秒。这是因为大多数现代网站还在文本和媒体文件之上加载脚本。

评级
  • 1.8秒以下 好
  • 1.8秒到3秒之间 需要改进
  • 超过3秒 差
FID(First Input Delay)首次输入延迟

FID是对访问者与您的网站交互和浏览器响应之间发生的时间的度量,以毫秒为单位。输入或交互可以指范围广泛的动作。例如,它可能包括单击链接、按下按钮或选择复选框。但是,当用户滚动或放大页面时,FID不适用,因为这些不需要在他们的浏览器和您的网站之间进行新的响应。即使您的站点具有可靠的FCP和LCP,首次输入延迟也可能足够长以导致跳出率提高。他们可能会觉得您的网站反应迟钝且速度缓慢。

评级
  • 100毫秒以下 好
  • 100到300毫秒之间 需要改进
  • 超过300毫秒 差
CLS(Cumulative Layout Shift)累计布局偏移

累积布局偏移(CLS) 是页面布局在加载时发生多少偏移的术语,这个最好用图片来展示这个指标的含义。 file

网站越复杂,就越有可能获得高CLS分数。对于标志性的Google主页等简单布局,没有CLS,因为它们包含的元素很少:

file

这并不是说所有复杂的网站都有很高的CLS分数。以亚马逊为例。没有人会说这家电子商务巨头使用简单的网页设计。然而,在浏览其目录时几乎看不到布局变化。

file

各指标测试方法

先看效果 file

大家可以用控制变量法,分别测试。

// index.js
const express = require('express');
const ejs = require('ejs');

const app = express();
app.engine('html', ejs.__express);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
app.use('/static', express.static(__dirname + '/static'));
// 控制图片渲染延时,可测试LCP
app.use('/img', (...res) => {
  let random = 1000;
  setTimeout(() => {
    return express.static(__dirname + '/img')(...res);
  }, random);
});
// 控制整体页面渲染延时 可测试TTFB和FCP
app.use('/', (req, res) => {
  let random = Math.floor(Math.random() * 2000);
  setTimeout(() => {
    res.render('testPerform', {
      random: random,
    });
  }, random);
})

app.listen(9090, () => {
  console.log('listening ~ ', 9090);
})

模板文件 views/testPerform.html

<!DOCTYPE html>
<html>
<head>
    <title>性能指标测试</title>
    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>

<div>
    延时时间(ms):<%= random%>
</div>
<script>
    function heavyTask(max) {
        for(var i = 0;i < max; i++) {
            if (i === max - 1 ) {
                console.log('over', i);
            }
        }
    }

    heavyTask(1000000000); // 可测试FID
</script>
<img src="/img/banner.png" alt="banner" />
<script type="module">
  import {getTTFB, getFCP, getLCP, getFID, getCLS} from '/static/web-vitals.js';

  getTTFB(console.log);
  getFCP(console.log);
  getLCP(console.log);
  getFID(console.log);
  getCLS(console.log);
</script>
</body>
</html>

为了减少web-vitals的CDN地址https://unpkg.com/web-vitals@2.1.4/dist/web-vitals.js?module的网络影响,可以将下载到本地,将其放在如下路径/static/web-vitals.js

本文对指标的含义解释方面参考自下列文章

更新时间:
上一篇:下一篇:

相关文章

关注道招网公众帐号
联系博主