2026年核心网页指标：INP、LCP、CLS优化与真实用户监控

Google 于 2024 年 3 月用 INP 取代了 FID。INP 衡量的是页面访问期间最差的交互延迟——而不仅仅是第一次交互。

2026年核心网页指标

使用 web-vitals 库进行测量

import { onLCP, onINP, onCLS } from 'web-vitals'

function sendToAnalytics({ name, value, id, rating, navigationType }) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      metric: name,
      value: Math.round(name === 'CLS' ? value * 1000 : value),
      id, rating, navigationType,
      url: window.location.href,
    }),
    keepalive: true
  })
}

onLCP(sendToAnalytics, { reportAllChanges: true })
onINP(sendToAnalytics, { reportAllChanges: true })
onCLS(sendToAnalytics, { reportAllChanges: true })

优化 LCP

<!-- 预加载 LCP 元素 -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- LCP 图片：永远不要懒加载，始终包含尺寸 -->
<img
  src="/hero.webp"
  width="1200" height="600"
  alt="Hero"
  fetchpriority="high"
>
<!-- fetchpriority="high" 告诉浏览器尽快加载此资源 -->
<!-- width/height 防止加载时布局偏移 -->

优化 INP：拆分长任务

INP 问题源于交互期间同步代码阻塞主线程。

// 糟糕：点击时执行 500ms 同步工作
button.addEventListener('click', () => {
  const result = expensiveComputation(largeData)  // 阻塞绘制
  updateUI(result)
})

// 良好：在块之间让出控制权
button.addEventListener('click', async () => {
  button.disabled = true  // 立即提供视觉反馈

  const results = []
  for (let i = 0; i < largeData.length; i += 100) {
    results.push(...processChunk(largeData.slice(i, i + 100)))
    // 让出控制权，允许浏览器绘制并处理其他输入
    await scheduler.yield()
    // 降级方案：await new Promise(resolve => setTimeout(resolve, 0))
  }

  updateUI(results)
  button.disabled = false
})

// 繁重计算 → Web Worker
const worker = new Worker('/workers/compute.js')
button.addEventListener('click', () => {
  worker.postMessage({ data: largeData })
  worker.onmessage = ({ data: result }) => updateUI(result)
})

防止 CLS

/* 为图片/视频预留空间 */
.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  /* 浏览器在图片加载前就知道高度 */
}

/* 为广告预留空间 */
.ad-slot {
  min-height: 250px;
  width: 300px;
}

/* 使用骨架屏代替加载后显示内容 */
.skeleton-text {
  height: 1em;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

真实用户监控：P75 百分位

// Google 测量 P75（第75百分位），而非平均值
function calculateP75(values) {
  const sorted = [...values].sort((a, b) => a - b)
  return sorted[Math.floor(sorted.length * 0.75)]
}

function analyzeVitals(data) {
  const byPage = {}
  for (const entry of data) {
    if (!byPage[entry.url]) byPage[entry.url] = []
    byPage[entry.url].push(entry.lcp_value)
  }
  return Object.entries(byPage).map(([url, values]) => ({
    url, p75_lcp: calculateP75(values), count: values.length
  }))
}

核心网页指标既是排名因素，也是用户体验信号。投资于它们将在 SEO 和转化率方面带来回报。

→ 使用 Unix 时间戳 工具分析您的页面计时数据。