提升 Core Web Vitals 评分的实用前端技巧

要让您的 Core Web Vitals 评分达到 Google 的阈值标准，并不需要对基础架构进行全面改造。大多数性能提升来自于任何开发者都能实现的智能前端优化。以下将介绍如何在不触及后端的情况下，针对 LCP、INP 和 CLS 进行最具影响力的改进。

优化 LCP 性能：让主要内容加载如闪电般快速

您的最大内容绘制（Largest Contentful Paint）通常涉及主要图片或首屏文本块。关键是让这些资源从一开始就可被发现并获得优先处理。

智能图片处理改善 LCP

<!-- 优化前：浏览器预加载扫描器无法发现 -->
<div class="hero" style="background-image: url('hero.jpg')"></div>

<!-- 优化后：可被发现且获得优先处理 -->
<img src="hero.webp" 
     fetchpriority="high"
     width="1200" 
     height="600"
     alt="Hero image">

对于通过 JavaScript 加载的关键图片，添加预加载提示：

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

资源优先级技术

现代浏览器支持 fetchpriority 来提升关键资源的优先级：

// 降低非关键图片的优先级
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
  img.fetchPriority = 'low';
});

从 LCP 图片中移除任何 loading="lazy" 属性——它们会不必要地延迟加载。同时，确保您的 LCP 资源从初始 HTML 响应中加载，而不是在 JavaScript 执行后。

拆分长任务以改善 INP 性能

INP 衡量的是您的页面对所有用户交互的响应速度，而不仅仅是第一次交互。长时间的 JavaScript 任务是导致 INP 评分不佳的主要原因。

任务调度模式

// 优化前：阻塞主线程
function processData(items) {
  items.forEach(item => {
    // 重度处理
    complexCalculation(item);
    updateUI(item);
  });
}

// 优化后：让出控制权给浏览器
async function processData(items) {
  for (const item of items) {
    complexCalculation(item);
    updateUI(item);
    
    // 将控制权让回给浏览器
    await scheduler.yield();
  }
}

对于不支持 scheduler.yield() 的浏览器，使用这个回退方案：

function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

优化事件处理器

批量处理 DOM 操作，避免布局抖动：

// 低效：强制多次重排
elements.forEach(el => {
  el.style.left = el.offsetLeft + 10 + 'px';
});

// 高效：先读取全部，再写入全部
const positions = elements.map(el => el.offsetLeft);
elements.forEach((el, i) => {
  el.style.left = positions[i] + 10 + 'px';
});

防止布局偏移：预留空间并避免重排

CLS 修复通常需要最少的代码，但需要最多的约束。每个动态元素都需要预留空间。

图片和媒体尺寸

<!-- 始终指定尺寸 -->
<img src="product.jpg" width="400" height="300" alt="Product">

<!-- 对于响应式图片，使用 aspect-ratio -->
<style>
.responsive-image {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>

动态内容模式

对于在初始渲染后加载的内容：

/* 为动态内容预留最小空间 */
.ad-container {
  min-height: 250px;
}

.comments-section {
  min-height: 400px;
}

/* 骨架屏防止偏移 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

动画最佳实践

永远不要对触发布局的属性进行动画处理：

/* 会导致布局偏移 */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { margin-left: -100%; }
  to { margin-left: 0; }
}

/* 不会产生布局偏移 */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

快速优化检查清单

LCP 优化：

• 为主要图片添加 fetchpriority="high"
• 从首屏内容中移除懒加载
• 预加载关键字体和图片
• 内联关键 CSS

INP 性能：

• 使用 scheduler.yield() 拆分超过 50ms 的任务
• 对输入处理器进行防抖处理
• 将重度计算移至 Web Workers
• 使用 CSS 变换而非 JavaScript 动画

CLS 修复：

• 为所有图片和视频设置明确尺寸
• 使用 min-height 为动态内容预留空间
• 对动画使用 CSS 变换
• 使用 font-display: optional 预加载网页字体

总结

改善 Core Web Vitals 不需要架构变更或昂贵的基础设施。专注于让您的主要内容可被发现并获得优先处理，拆分 JavaScript 任务以保持主线程响应，并为每一块动态内容预留空间。仅这些前端优化就能让您的评分从红色变为绿色——更重要的是，为您的用户提供快速、稳定的体验。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.