⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Web性能优化指南：LCP、INP、CLS核心指标与实战优化技巧

perf-web-optimization by tech-leads-club/agent-skills

67 周安装量

1,900 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/tech-leads-club/agent-skills --skill perf-web-optimization

前端优化 Web应用性能优化

🇨🇳中文介绍

Web 性能优化

系统性方法：测量 → 识别 → 优先级排序 → 实施 → 验证。

目标指标

指标	良好	需要改进	较差
LCP	< 2.5s	2.5-4s	> 4s
INP	< 200ms	200-500ms	> 500ms
CLS	< 0.1	0.1-0.25	> 0.25
TTFB	< 800ms	800ms-1.8s	> 1.8s

快速见效的优化

1. 图片（通常对 LCP 影响最大）

<!-- 首屏/LCP 图片：eager + 高优先级 -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />

<!-- 首屏下方：懒加载 -->
<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

2. 字体（常见的 LCP/CLS 问题来源）

<!-- 预连接到字体源 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- 非阻塞字体加载 -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  media="print"
  onload="this.media='all'"
/>

3. 第三方脚本（常见的 INP 杀手）

<!-- 延迟到用户交互时加载 -->
<script>
  function loadThirdParty() {
    // 加载分析工具、聊天插件等
  }
  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
  setTimeout(loadThirdParty, 5000)
</script>

将关键 CSS 内联在 <head> 中，其余部分延迟加载：

<style>
  /* 关键样式 */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# 安装前检查包大小
npx bundlephobia <package-name>

常见需要替换的臃肿包：

moment (67KB) → date-fns (12KB) 或 dayjs (2KB)
lodash (72KB) → 按需导入或使用原生方法

// React lazy
const Chart = lazy(() => import('./Chart'))

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })

// Vite/Rollup 手动分块
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom']
      }
    }
  }
}

# 静态资源（文件名中包含不可变哈希）
Cache-Control: public, max-age=31536000, immutable

# HTML（重新验证）
Cache-Control: no-cache

# API 响应
Cache-Control: private, max-age=0, must-revalidate

要进行审计、阅读报告和设置预算，请使用 perf-lighthouse 技能。

现代格式 (WebP/AVIF)
响应式 srcset
width/height 属性
首屏下方图片使用 loading="lazy"
LCP 图片使用 fetchpriority="high"

打包后 gzip 压缩 < 200KB
按路由进行代码分割
第三方脚本延迟加载
没有未使用的依赖项

关键 CSS 内联
非关键 CSS 延迟加载
没有未使用的 CSS

使用 font-display: swap
预连接到字体源
如果可能，使用子集字体

有关深入的优化模式，请参阅：

references/core-web-vitals.md - 修复 LCP、CLS、INP 问题
references/bundle-optimization.md - 减少 JS 包大小
references/image-optimization.md - 图片格式、响应式图片、sharp 脚本

🇺🇸English

Web Performance Optimization

Systematic approach: Measure → Identify → Prioritize → Implement → Verify.

Target Metrics

Metric	Good	Needs Work	Poor
LCP	< 2.5s	2.5-4s	> 4s
INP	< 200ms	200-500ms	> 500ms
CLS	< 0.1	0.1-0.25	> 0.25
TTFB	< 800ms	800ms-1.8s	> 1.8s

Quick Wins

1. Images (usually biggest impact on LCP)

<!-- Hero/LCP image: eager + high priority -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />

<!-- Below fold: lazy load -->
<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />

Always set width and height to prevent CLS.

2. Fonts (common LCP/CLS culprit)

<!-- Preconnect to font origin -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Non-blocking font load -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  media="print"
  onload="this.media='all'"
/>

3. Third-party Scripts (common INP killer)

<!-- Defer to user interaction -->
<script>
  function loadThirdParty() {
    // Load analytics, chat widgets, etc.
  }
  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
  setTimeout(loadThirdParty, 5000)
</script>

4. Critical CSS

Inline critical CSS in <head>, defer the rest:

<style>
  /* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

Bundle Analysis

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# Check package size before installing
npx bundlephobia <package-name>

Common heavy packages to replace:

moment (67KB) → date-fns (12KB) or dayjs (2KB)
lodash (72KB) → cherry-pick imports or native methods

Code Splitting Patterns

// React lazy
const Chart = lazy(() => import('./Chart'))

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })

// Vite/Rollup manual chunks
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom']
      }
    }
  }
}

Caching Headers

# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable

# HTML (revalidate)
Cache-Control: no-cache

# API responses
Cache-Control: private, max-age=0, must-revalidate

Measurement

For running audits, reading reports, and setting budgets, use the perf-lighthouse skill.

Checklist

Images

Modern formats (WebP/AVIF)
Responsive srcset
width/height attributes
loading="lazy" below fold
fetchpriority="high" on LCP image

JavaScript

Bundle < 200KB gzipped
Code splitting by route
Third-party scripts deferred
No unused dependencies

CSS

Critical CSS inlined
Non-critical CSS deferred
No unused CSS

Fonts

font-display: swap
Preconnect to font origin
Subset if possible

Detailed Examples

For in-depth optimization patterns, see:

references/core-web-vitals.md - Fixing LCP, CLS, INP issues
references/bundle-optimization.md - Reducing JS bundle size
references/image-optimization.md - Image formats, responsive images, sharp scripts

Weekly Installs

Repository

tech-leads-club…t-skills

GitHub Stars

1.9K

First Seen

Feb 5, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode66

gemini-cli64

codex64

github-copilot64

amp62

kimi-cli62

GSAP React 动画库使用指南：useGSAP Hook 与最佳实践

3,500 周安装

Web性能优化指南：LCP、INP、CLS核心指标与实战优化技巧

🇨🇳中文介绍

Web 性能优化

目标指标

快速见效的优化

1. 图片（通常对 LCP 影响最大）

相关 Skills

2. 字体（常见的 LCP/CLS 问题来源）

3. 第三方脚本（常见的 INP 杀手）

4. 关键 CSS

打包分析

代码分割模式

缓存头设置

测量

检查清单

图片

JavaScript

CSS

字体

详细示例

🇺🇸English

Web Performance Optimization

Target Metrics

Quick Wins

1. Images (usually biggest impact on LCP)

2. Fonts (common LCP/CLS culprit)

3. Third-party Scripts (common INP killer)

4. Critical CSS

Bundle Analysis

Code Splitting Patterns

Caching Headers

Measurement

Checklist

Images

JavaScript

CSS

Fonts

Detailed Examples

最新 Skills