performance-optimization
Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals
Profile →npx skills add rohitg00/awesome-claude-code-toolkit --skill performance-optimization --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Performance Optimization ## Bundle Analysis and Code Splitting ```typescript // Dynamic import for route-level code splitting const Dashboard = lazy(() => import("./pages/Dashboard")); const Settings = lazy(() => import("./pages/Settings")); function App() { return ( <Suspense fallback={<PageSkeleton />}> <Routes> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/settings" element={<Settings />} /> </Routes> </Suspense> ); } ``` ```javascript // vite.config.ts - manual chunk splitting export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: ["react", "react-dom"], charts: ["recharts", "d3"], editor: ["@monaco-editor/react"], }, }, }, }, }); ``` ```bash # Analyze bundle composition npx vite-bundle-visualizer npx source-map-explorer dist/assets/*.js ``` ## Image Optimization ```tsx import Image from "next/image"; function ProductImage({ src, alt }: { src: string; alt: string }) { return ( <Image src={src} alt={alt} width={800} height={600} sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" placeholder="blur" blurDataURL={generateBlurHash(src)} loading="lazy" /> ); } ``` ```html <!-- Native lazy loading with aspect ratio
- Bundle Analysis and Code Splitting
- Image Optimization
- Caching Headers
- Virtual Lists for Large Data
- Core Web Vitals Monitoring
- Anti-Patterns
- Checklist
Analyze bundle composition npx vite-bundle-visualizer npx source-map-explorer dist/assets/*.js
What does the performance-optimization skill do?
Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals
How do I install it?
Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill performance-optimization --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/awesome-claude-code-toolkit, a repository with 2,438 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.