perf-web-optimization

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing la…

不碰外部（只输出文字）无严重或高危命中tech-leads-club/agent-skills

它会碰到什么

扫了多少4 个文本文件，14 KB

它会碰到什么不碰外部（只输出文字）

命中总数0 处

命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

Web Performance Optimization

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

Target Metrics

| ------ | ------- | ---------- | ------- |

| 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](references/core-web-vitals.md) - Fixing LCP, CLS, INP issues
[references/bundle-optimization.md](references/bundle-optimization.md) - Reducing JS bundle size
[references/image-optimization.md](references/image-optimization.md) - Image formats, responsive images, sharp scripts

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库tech-leads-club/agent-skills

星标★ 6,348

本站分层T1

该仓技能数92

原文件路径packages/skills-catalog/skills/(performance)/perf-web-optimization/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 92 个技能