Skill

frontend-performance

Frontend performance optimization — Core Web Vitals, bundle analysis, React rendering, image optimization, caching strategies

From claude-toolkit

Install

Run in your terminal

npx claudepluginhub johwer/marketplace --plugin claude-toolkit

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.5k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.5k

agent-eval

Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.

ecc

140.3k

Stats

Stars0

Forks0

Last CommitMar 21, 2026

Actions

View Source View Plugin View on GitHub View README

Core Web Vitals Targets

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	< 2.5s	2.5s – 4.0s	> 4.0s
INP (Interaction to Next Paint)	< 200ms	200ms – 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 – 0.25	> 0.25

Performance Checklist

Critical (fix immediately)

CSS

Minify all CSS files
Non-blocking CSS — critical CSS inlined in <head>, rest loaded async
Remove unused CSS (PurgeCSS / Tailwind's built-in purge)
Avoid inline style attributes for reusable styles

JavaScript

Minify all JS (Vite handles this in production builds)
Non-blocking scripts — use async or defer on all <script> tags
No render-blocking JS in <head>
Eliminate async waterfalls — don't await sequentially when requests are independent

Images

Use modern formats (WebP/AVIF) with fallbacks
Compress images (Squoosh, Sharp)
Set explicit width and height to prevent CLS
Lazy load offscreen images (loading="lazy")
Serve exact-size images (don't resize in CSS)

Network

High Priority

Bundle Optimization

Code splitting — route-based (React.lazy + Suspense)
Tree-shaking enabled (Vite default with ESM)
Direct imports, not barrel files (import { Button } from './Button', not from './index')
Dynamic imports for heavy libraries (import('chart-library'))
Analyze bundle: npx vite-bundle-visualizer
Monitor dependency sizes: check with Bundlephobia before adding

React Rendering

Avoid unnecessary re-renders — React.memo for pure components
useMemo for expensive computations
useCallback for callbacks passed as props
Virtualize long lists (react-window or @tanstack/virtual)
Don't create objects/arrays inline in JSX props
Key prop — use stable IDs, never array index (unless static list)

Fonts

Use WOFF2 format
font-display: swap to prevent invisible text
Preconnect to font origins: <link rel="preconnect" href="...">
Total web fonts < 300KB
Subset fonts to used characters only

Medium Priority

Caching

Service Worker for offline caching (if applicable)
Use CDN for static assets
Preload critical resources: <link rel="preload">
Prefetch likely next navigations: <link rel="prefetch">
Cookie size < 4096 bytes per domain

RTK Query Specific

Use keepUnusedDataFor to control cache lifetime
Avoid over-fetching — request only needed fields via query params
Use selectFromResult to minimize re-renders
Tag-based invalidation — don't refetch everything on one mutation

React Performance Antipatterns

// BAD: Creates new object every render → child re-renders
<Child style={{ color: 'red' }} />

// GOOD: Stable reference
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />

// BAD: Async waterfall — sequential requests
const user = await fetchUser(id);
const posts = await fetchPosts(id);  // waits for user!

// GOOD: Parallel requests
const [user, posts] = await Promise.all([
  fetchUser(id),
  fetchPosts(id)
]);

// BAD: Barrel file imports pull in everything
import { Button } from '@/ui';

// GOOD: Direct import — tree-shakeable
import { Button } from '@/ui/Button';

Tools

Tool	Purpose	Command
Lighthouse	Full performance audit	Chrome DevTools → Lighthouse tab
vite-bundle-visualizer	Bundle composition	`npx vite-bundle-visualizer`
Bundlephobia	Dependency size check	bundlephobia.com
WebPageTest	Real-world load testing	webpagetest.org
React DevTools Profiler	Component render analysis	React DevTools → Profiler tab

Recommended External Skills

# Vercel React Best Practices — 45 rules, 21k+ stars
npx skills add vercel-labs/agent-skills

# Addy Osmani Web Quality — Lighthouse audits, Core Web Vitals, 1.2k stars
npx skills add addyosmani/web-quality-skills

# Image optimization + Web performance skills
npx skills add secondsky/claude-skills