重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
core-web-vitals-tuner by patricio0312rev/skills
npx skills add https://github.com/patricio0312rev/skills --skill core-web-vitals-tuner系统性地优化 LCP、INP 和 CLS。
优先修复项:
优化图片(影响最大)
<!-- 优化前 --><img src="hero.jpg" />
<!-- 优化后 -->
<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"
/>
2. 预加载 LCP 资源
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
3. 内联关键 CSS
<style>
/* 首屏样式 */
.hero {
display: flex;
height: 100vh;
}
</style>
4. 使用 CDN
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
* 通过 CloudFront/Cloudflare 提供图片
* 启用 HTTP/2 或 HTTP/3
修复项:
对高开销交互进行防抖处理
import { debounce } from "lodash";
const handleSearch = debounce((query) => {
fetchResults(query);
}, 300);
2. 对繁重任务使用 Web Workers
const worker = new Worker("processor.js");
worker.postMessage(largeData);
worker.onmessage = (e) => console.log(e.data);
3. 代码分割
const HeavyComponent = lazy(() => import("./HeavyComponent"));
修复项:
为图片/广告预留空间
<img src="banner.jpg" width="1200" height="600" />使用 CSS aspect-ratio 属性
.video-container { aspect-ratio: 16 / 9; }
避免在现有内容上方注入内容
.notification { position: fixed; top: 0; }
# Lighthouse CI
npm run lighthouse -- --url=https://example.com
# 生产环境 Web Vitals
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
每周安装量
61
代码仓库
GitHub 星标数
22
首次出现
2026年1月24日
安全审计
安装于
codex52
gemini-cli51
claude-code51
opencode51
cursor47
antigravity45
Improve LCP, INP, and CLS systematically.
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"
/>
2. Preload LCP resource
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
3. Inline critical CSS
<style>
/* Above-the-fold styles */
.hero {
display: flex;
height: 100vh;
}
</style>
4. Use CDN
* Serve images from CloudFront/Cloudflare
* Enable HTTP/2 or HTTP/3
Fixes:
Debounce expensive interactions
import { debounce } from "lodash";
const handleSearch = debounce((query) => {
fetchResults(query);
}, 300);
2. Use Web Workers for heavy tasks
const worker = new Worker("processor.js");
worker.postMessage(largeData);
worker.onmessage = (e) => console.log(e.data);
3. Code splitting
const HeavyComponent = lazy(() => import("./HeavyComponent"));
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; }
# 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);
Weekly Installs
61
Repository
GitHub Stars
22
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex52
gemini-cli51
claude-code51
opencode51
cursor47
antigravity45
Schema标记专家指南:结构化数据实现与SEO优化,提升富媒体搜索结果
33,400 周安装