网页核心指标

DCL L

DCL

指的是 (DOMContentLoaded) dom 树解析完毕，与任何外部加载的资源无关

L

load 外部资源加载完毕的时间点

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>DCL (DOMContentLoaded)</h1>
  <img src="https://images.pexels.com/photos/2286895/pexels-photo-2286895.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width: 500px;" />
</body>
</html>

FP FCP

FP (first paint)

浏览器首次绘制任何内容到屏幕上的时间点（白屏时间，可能看不见）

FCP (first contentful paint)

浏览器首次绘制任何有意义内容到屏幕上的时间点（用户能看到的第一个内容）

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FP vs FCP</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html {
      background: black;
    }
    
    body {
      font-family: Arial;
      padding: 20px;
      color: white;
    }
    
    .box {
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
      background: white;
    }
    
    .fp-box {
      border-left: 4px solid #FF9800;
    }
    
    .fcp-box {
      border-left: 4px solid #4CAF50;
    }
  </style>
</head>
<body>
  <!-- FP: 只有背景色，没有内容 -->
  <div class="box fp-box">
    <h2 style="color: #FF9800;">FP (First Paint) - 只有背景</h2>
    <p>这个区域会在 FP 时出现（可能只是背景色）</p>
  </div>

  <!-- FCP: 有实际内容 -->
  <div class="box fcp-box">
    <h2 style="color: #4CAF50;">FCP (First Contentful Paint) - 有内容</h2>
    <p>这个区域有文本和内容，会在 FCP 时出现</p>
    <img src="http://img.daimg.com/uploads/allimg/250629/1-25062Z00406.jpg" style="width: 200px; margin-top: 10px;" />
  </div>


  <script>
    // 打开 DevTools Performance 标签刷新页面查看
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          console.log(entry.name, entry.startTime);
        }
      });
      observer.observe({ entryTypes: ['paint'] });
    }
  </script>
</body>
</html>

LCP

最大内容绘制时间点 (largest contentful paint)
页面主要内容加载完成的时间点
<= 2.5s 优秀 | <= 4.0s 需要改进 | > 4.0s 差

TTFB

首字节时间 (time to first byte)
浏览器发送请求到接收到响应的第一个字节的时间
一般在 SSR 场景下比较重要
<= 200ms 优秀 | <= 600ms 需要改进 | > 600ms 差

网页核心指标 ​

DCL L ​

DCL ​

L ​

FP FCP ​

FP (first paint) ​

FCP (first contentful paint) ​

LCP ​

TTFB ​

网页核心指标

DCL L

DCL

L

FP FCP

FP (first paint)

FCP (first contentful paint)

LCP

TTFB