web-performance
Web performance optimization patterns, Core Web Vitals, lazy loading, code splitting, caching strategies, and monitoring
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill web-performance --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.
# Web Performance Systematic approach to measuring, analyzing, and optimizing web application performance. ## Core Web Vitals | Metric | Target | What It Measures | |--------|--------|------------------| | **LCP** (Largest Contentful Paint) | < 2.5s | Loading performance | | **FID** (First Input Delay) | < 100ms | Interactivity | | **CLS** (Cumulative Layout Shift) | < 0.1 | Visual stability | | **INP** (Interaction to Next Paint) | < 200ms | Responsiveness | ## Optimization Strategies ### 1. JavaScript Optimization ```tsx // Dynamic imports — code splitting const Chart = dynamic(() => import('./Chart'), { loading: () => <ChartSkeleton />, ssr: false, // If chart needs browser APIs }); // Bundle analysis // next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withBundleAnalyzer({}); ``` ### 2. Image Optimization ```tsx // Next.js Image component import Image from 'next/image'; <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority // Above-the-fold images placeholder="blur" blurDataURL="data:image/webp;base64,..." /> // Responsive images with srcSet <picture> <source media="(min-widt
- Core Web Vitals
- Optimization Strategies
- 1. JavaScript Optimization
- 2. Image Optimization
- 3. Caching Strategy
- Common Mistakes
What does the web-performance skill do?
Web performance optimization patterns, Core Web Vitals, lazy loading, code splitting, caching strategies, and monitoring
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill web-performance --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 cosmicstack-labs/mercury-agent-skills, a repository with 364 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.