core-web-vitals-tuner

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Core Web Vitals Tuner

Core Web Vitals 调优工具

Improve LCP, INP, and CLS systematically.

系统性优化LCP、INP和CLS指标。

LCP Optimization (<2.5s)

LCP 优化（目标：<2.5秒）

Prioritized Fixes:

Optimize images (Biggest impact)

html

<!-- Before -->
<img src="hero.jpg" />

<!-- After -->
<img
  src="hero.jpg"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  loading="eager"
  fetchpriority="high"
/>

Preload LCP resource

html

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

Inline critical CSS

html

<style>
  /* Above-the-fold styles */
  .hero {
    display: flex;
    height: 100vh;
  }
</style>

Use CDN
- Serve images from CloudFront/Cloudflare
- Enable HTTP/2 or HTTP/3

优先级修复方案：

优化图片（影响最大）

html

<!-- Before -->
<img src="hero.jpg" />

<!-- After -->
<img
  src="hero.jpg"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  loading="eager"
  fetchpriority="high"
/>

预加载LCP资源

html

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

内联关键CSS

html

<style>
  /* Above-the-fold styles */
  .hero {
    display: flex;
    height: 100vh;
  }
</style>

使用CDN
- 从CloudFront/Cloudflare等CDN分发图片
- 启用HTTP/2或HTTP/3

INP Optimization (<200ms)

INP 优化（目标：<200毫秒）

Fixes:

Debounce expensive interactions

typescript

import { debounce } from "lodash";

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

Use Web Workers for heavy tasks

typescript

const worker = new Worker("processor.js");
worker.postMessage(largeData);
worker.onmessage = (e) => console.log(e.data);

Code splitting

typescript

const HeavyComponent = lazy(() => import("./HeavyComponent"));

修复方案：

防抖处理高开销交互

typescript

import { debounce } from "lodash";

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

使用Web Workers处理重负载任务

typescript

const worker = new Worker("processor.js");
worker.postMessage(largeData);
worker.onmessage = (e) => console.log(e.data);

代码分割

typescript

const HeavyComponent = lazy(() => import("./HeavyComponent"));

CLS Optimization (<0.1)

CLS 优化（目标：<0.1）

Fixes:

Reserve space for images/ads

html

<img src="banner.jpg" width="1200" height="600" />

Use CSS aspect-ratio

css

.video-container {
  aspect-ratio: 16 / 9;
}

Avoid injecting content above existing

css

.notification {
  position: fixed;
  top: 0;
}

修复方案：

为图片/广告预留空间

html

<img src="banner.jpg" width="1200" height="600" />

使用CSS aspect-ratio属性

css

.video-container {
  aspect-ratio: 16 / 9;
}

避免在现有内容上方注入新内容

css

.notification {
  position: fixed;
  top: 0;
}

Verification

验证方法

bash

undefined

bash

undefined

Lighthouse CI

npm run lighthouse -- --url=https://example.com

Web Vitals in production

生产环境中的Web Vitals监控

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log); getFID(console.log); getLCP(console.log);

undefined

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log); getFID(console.log); getLCP(console.log);

undefined

core-web-vitals-tuner

Original

Translation

Core Web Vitals Tuner

Core Web Vitals 调优工具

LCP Optimization (<2.5s)

LCP 优化（目标：<2.5秒）

INP Optimization (<200ms)

INP 优化（目标：<200毫秒）

CLS Optimization (<0.1)

CLS 优化（目标：<0.1）

Verification

验证方法

Lighthouse CI

Lighthouse CI

Web Vitals in production

生产环境中的Web Vitals监控

Output Checklist

输出检查清单