2026 年性能优化的新标准

Core Web Vitals 的指标在 2026 年有了新的门槛，以下是当前最佳实践。

LCP（最大内容绘制）

2026 年最佳做法：

<!-- 关键资源预加载 -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

<!-- 使用 fetchpriority 提示优先级 -->
<img src="hero.webp" fetchpriority="high" alt="">

INP（交互到下次绘制）

INP 取代了 FID，衡量的是页面交互的响应速度：

// 使用 requestIdleCallback 延迟非关键任务
requestIdleCallback(() => {
  loadAnalytics();
  initChatWidget();
}, { timeout: 2000 });

// 避免长任务
function processData(data) {
  const chunkSize = 50;
  for (let i = 0; i < data.length; i += chunkSize) {
    setTimeout(() => {
      processChunk(data.slice(i, i + chunkSize));
    }, 0);
  }
}

图片优化

<!-- AVIF 格式 + 响应式 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" loading="lazy" decoding="async" alt="">
</picture>

性能预算

每个项目都应该设性能预算：

2026 年性能优化不再是"加分项"，而是用户体验的基础要求。