Web 性能优化：2026 年核心网页指标指南

核心网页指标直接影响 Google 搜索排名。2026 年，Google 使用三个指标衡量用户体验：LCP、INP 和 CLS。以下是优化每个指标的方法。

三大核心网页指标

LCP（最大内容绘制）

衡量：最大可见元素加载的速度 良好：< 2.5s | **需要改进**：2.5s–4s | **较差**：> 4s

LCP 元素通常是：

• 首屏大图
• 大标题
• 背景图片

INP（交互到下一次绘制）

衡量：对用户交互的响应速度（2024 年取代 FID） 良好：< 200ms | **需要改进**：200ms–500ms | **较差**：> 500ms

CLS（累积布局偏移）

衡量：视觉稳定性——内容意外移动的程度 良好：< 0.1 | **需要改进**：0.1–0.25 | **较差**：> 0.25

诊断问题

// 在应用中测量核心网页指标
import { getLCP, getINP, getCLS } from 'web-vitals';

getLCP(metric => {
  console.log('LCP:', metric.value, metric.rating);
  // 发送到分析系统
  analytics.track('web_vital', { name: 'LCP', value: metric.value, rating: metric.rating });
});

getINP(metric => {
  console.log('INP:', metric.value, metric.rating);
});

getCLS(metric => {
  console.log('CLS:', metric.value, metric.rating);
});

优化 LCP

1. 优化 LCP 图片

<!-- ❌ 无优先级提示——浏览器不知道这是重要的 -->
<img src="/hero.jpg" alt="Hero" />

<!-- ✅ fetchpriority="high" 告诉浏览器优先加载 -->
<img 
  src="/hero.jpg" 
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
/>

2. 使用现代图片格式

<!-- ✅ 提供 WebP/AVIF 并带降级 -->
<picture>
  <source type="image/avif" srcset="/hero.avif" />
  <source type="image/webp" srcset="/hero.webp" />
  <img src="/hero.jpg" alt="Hero" fetchpriority="high" />
</picture>

# 使用 sharp（Node.js）转换图片
const sharp = require('sharp');

await sharp('hero.jpg')
  .resize(1200)
  .webp({ quality: 80 })
  .toFile('hero.webp');

await sharp('hero.jpg')
  .resize(1200)
  .avif({ quality: 65 })
  .toFile('hero.avif');

3. 消除渲染阻塞资源

<!-- ❌ 渲染阻塞 CSS -->
<link rel="stylesheet" href="/styles.css" />

<!-- ✅ 预加载关键 CSS -->
<link rel="preload" href="/critical.css" as="style" onload="this.rel='stylesheet'" />

<!-- ✅ 内联关键 CSS -->
<style>
  /* 仅首屏样式 */
  body { margin: 0; font-family: sans-serif; }
  .hero { min-height: 100vh; }
</style>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'" />

<!-- ❌ 渲染阻塞 JS -->
<script src="/app.js"></script>

<!-- ✅ 延迟非关键 JS -->
<script src="/app.js" defer></script>
<script src="/analytics.js" async></script>

4. 预连接到关键源

<!-- 告诉浏览器提前开始 DNS + TCP + TLS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://api.example.com" />

5. 使用 CDN

无 CDN（用户在东京，服务器在纽约）：
  DNS 解析：~150ms
  TCP 握手：~180ms  
  TLS：~180ms
  TTFB：~400ms
  总计：~910ms 才能看到任何内容！

使用 CDN（东京边缘节点）：
  DNS：~5ms
  TCP：~10ms
  TLS：~10ms
  TTFB：~50ms
  总计：~75ms ← 快 12 倍

优化 INP

INP 衡量从用户交互到视觉反馈的时间。INP 差 = 界面卡顿、无响应。

1. 拆分长任务

// ❌ 长任务——阻塞主线程
function processAllItems(items) {
  // 运行 2 秒，阻塞所有输入
  items.forEach(item => heavyProcess(item));
}

// ✅ 在块之间让出浏览器
async function processAllItemsAsync(items) {
  const CHUNK_SIZE = 50;
  
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => heavyProcess(item));
    
    // 让出浏览器——允许处理输入事件
    await new Promise(resolve => setTimeout(resolve, 0));
    // 或在支持的浏览器中使用 scheduler.yield()：
    // await scheduler.yield();
  }
}

2. 使用 Web Worker 进行繁重计算

// 将繁重工作移出主线程
const worker = new Worker(new URL('./heavy-worker.js', import.meta.url));

button.addEventListener('click', () => {
  // 主线程保持响应
  worker.postMessage({ data: largeDataset });
  worker.onmessage = ({ data }) => {
    updateUI(data.result); // Worker 完成后更新 UI
  };
});

3. 防抖昂贵的事件处理函数

// ❌ 每次按键都执行
input.addEventListener('input', () => {
  expensiveSearch(input.value); // 冻结 UI
});

// ✅ 防抖——用户停止输入后等待 300ms
import { debounce } from 'lodash-es';

const handleSearch = debounce((value) => {
  expensiveSearch(value);
}, 300);

input.addEventListener('input', () => handleSearch(input.value));

4. React 并发特性

import { useTransition, startTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(e) {
    const value = e.target.value;
    setQuery(value); // 紧急——立即更新输入
    
    startTransition(() => {
      // 非紧急——可以被更紧急的更新中断
      setResults(heavyFilterOperation(value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending ? <Spinner /> : <ResultsList results={results} />}
    </div>
  );
}

优化 CLS

CLS 由页面加载后元素移动引起——无尺寸的图片、动态注入的内容、字体切换。

1. 始终指定图片尺寸

<!-- ❌ 无尺寸——浏览器不预留空间 -->
<img src="/photo.jpg" alt="Photo" />

<!-- ✅ 显式尺寸 -->
<img src="/photo.jpg" alt="Photo" width="800" height="600" />

<!-- ✅ 或在 CSS 中使用 aspect-ratio -->
<img src="/photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;" />

2. 为动态内容预留空间

/* 在广告/嵌入加载前预留空间 */
.ad-slot {
  min-height: 250px;
  background: #f5f5f5;
}

/* 为异步内容预留空间 */
.user-avatar-skeleton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  animation: pulse 1.5s ease-in-out infinite;
}

3. 字体显示优化

/* ❌ FOUT（未样式文本闪烁）导致布局偏移 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2');
  /* font-display 默认为 'auto' */
}

/* ✅ 使用 font-display: optional 或 swap 配合 size-adjust */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2');
  font-display: swap;
}

/* ✅ 最佳：使用 size-adjust 匹配系统字体度量 */
@font-face {
  font-family: 'MyFont Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

代码拆分

// ✅ React 懒加载——按路由拆分
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() => import('./pages/Analytics'));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

性能监控

// 报告到分析系统
import { getLCP, getINP, getCLS, getFID, getFCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, rating, id }) {
  // Google Analytics 4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_rating: rating,
  });
}

getLCP(sendToAnalytics);
getINP(sendToAnalytics);
getCLS(sendToAnalytics);
getFCP(sendToAnalytics);
getTTFB(sendToAnalytics);

快速制胜清单

• 在服务器上启用 gzip/brotli 压缩
• 为 LCP 图片添加 fetchpriority="high"
• 为所有图片设置显式的 width 和 height
• 使用 WebP/AVIF 图片格式
• 懒加载首屏以下图片：loading="lazy"
• 为非关键脚本添加 defer
• 预连接到关键第三方源
• 实现基于路由的代码拆分
• 为网页字体设置 font-display: swap
• 为静态资源使用 CDN

→ 使用 Benchmark Builder 基准测试你的页面性能指标。