perf-web-optimization
A toolkit for identifying and resolving front-end web performance bottlenecks.
Install
mkdir -p .claude/skills/perf-web-optimization && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/6360" && unzip -o skill.zip -d .claude/skills/perf-web-optimization && rm skill.zipInstalls to .claude/skills/perf-web-optimization
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).Key capabilities
- →Optimize image loading with fetchpriority and lazy loading
- →Configure caching headers for static assets and API responses
- →Implement code splitting patterns for React and Next.js
- →Analyze bundle size using Webpack or Vite tools
- →Inline critical CSS and defer non-critical styles
How it works
The skill follows a measurement-based approach to identify performance bottlenecks and implements specific code-level optimizations like asset prioritization, script deferral, and bundle analysis.
Inputs & outputs
When to use perf-web-optimization
- →Optimize image loading strategy
- →Reduce bundle size for faster TTI
- →Fix layout shifts in frontend
About this skill
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) ordayjs(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/heightattributes -
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
When not to use it
- →Running Lighthouse audits
- →Astro-specific optimization
Limitations
- →Requires manual implementation of suggested code patterns
- →Does not automate Lighthouse audits
How it compares
Unlike manual optimization, this skill provides a structured checklist and specific CLI commands for bundle analysis and asset configuration.
Compared to similar skills
perf-web-optimization side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| perf-web-optimization (this skill) | 1 | 5mo | Review | Intermediate |
| moai-domain-frontend | 1 | 3mo | No flags | Advanced |
| astro | 0 | 3mo | Review | Intermediate |
| frontend-developer | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by tech-leads-club
View all by tech-leads-club →You might also like
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
astro
Anhvu1107
ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
optimize
aladicf
Diagnose and fix UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
roier-seo
davila7
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).