core-web-vitals-tuner

通过代码示例和优先级清单，指导优化 LCP（<2.5s）、INP（<200ms）与 CLS（<0.1），涵盖图片、预加载、关键 CSS、防抖、Web Worker、代码分割、占位与 aspect-ratio 等修复，并给出 Lighthouse 与 web-vitals 验证及输出检查清单。

未知作者

热度 0.00

最近更新 2026-10-18 21:30:03

分类：开发依赖：代码执行应用场景：代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add seoskills.sh/core-web-vitals-tuner

Metadata

name: core-web-vitals-tuner
description: Systematically improves Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) with prioritized fixes and verification. Use for "Core Web Vitals", "performance", "LCP", "INP", or "CLS".

Core Web Vitals Tuner

Improve LCP, INP, and CLS systematically.

LCP Optimization (<2.5s)

Prioritized Fixes:

Optimize images (Biggest impact)

<!-- 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

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

Inline critical CSS

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

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

INP Optimization (<200ms)

Fixes:

Debounce expensive interactions

import { debounce } from "lodash";

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

Use Web Workers for heavy tasks

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

Code splitting

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

CLS Optimization (<0.1)

Fixes:

Reserve space for images/ads

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

Use CSS aspect-ratio

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

Avoid injecting content above existing

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

Verification

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

# Web Vitals in production
import { getCLS, getFID, getLCP } from 'web-vitals';

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