performance-profiling
Performance profiling principles. Measurement, analysis, and optimization techniques.
Works with
--- name: performance-profiling description: Performance profiling principles. Measurement, analysis, and optimization techniques. license: MIT --- # Performance Profiling > Measure, analyze, optimize - in that order. ## 🔧 Runtime Scripts **Execute these for automated profiling:** | Script | Purpose | Usage | |--------|---------|-------| | `scripts/lighthouse_audit.py` | Lighthouse performance audit | `python scripts/lighthouse_audit.py https://example.com` | --- ## 1. Core Web Vitals ### Targets | Metric | Good | Poor | Measures | |--------|------|------|----------| | **LCP** | < 2.5s | > 4.0s | Loading | | **INP** | < 200ms | > 500ms | Interactivity | | **CLS** | < 0.1 | > 0.25 | Stability | ### When to Measure | Stage | Tool | |-------|------| | Development | Local Lighthouse | | CI/CD | Lighthouse CI | | Production | RUM (Real User Monitoring) | --- ## 2. Profiling Workflow ### The 4-Step Process ``` 1. BASELINE → Measure current state 2. IDENTIFY → Find the bottleneck 3. FIX → Make targeted change 4. VALIDATE → Confirm improvement ``` ### Profiling Tool Selection | Problem | Tool | |---------|------| | Page load | Lighthouse | | Bundle size | Bundle analyzer | | Runtime | DevTools Performance | | Memory | DevTools Memory | | Network | DevTools Network | --- ## 3. Bundle Analysis ### What to Look For | Issue | Indicator | |-------|-----------| | Large dependencies | Top of bundle | | Duplicate code | Multiple chunks | | Unused code | Low coverage | | Missing splits | Single large chunk | ### Optimization Actions | Finding | Action | |---------|--------| | Big library | Import specific modules | | Duplicate deps | Dedupe, update versions | | Route in main | Code split | | Unused exports | Tree shake | --- ## 4. Runtime Profiling ### Performance Tab Analysis | Pattern | Meaning | |---------|---------| | Long tasks (>50ms) | UI blocking | | Many small tasks | Possible batching opportunity | | Layout/paint | Rendering bottleneck | | Script | JavaScript execution | ### Memory Tab Analysis | Pattern | Meaning | |---------|---------| | Growing heap | Possible leak | | Large retained | Check references | | Detached DOM | Not cleaned up | --- ## 5. Common Bottlenecks ### By Symptom | Symptom | Likely Cause | |---------|--------------| | Slow initial load | Large JS, render blocking | | Slow interactions | Heavy event handlers | | Jank during scroll | Layout thrashing | | Growing memory | Leaks, retained refs | --- ## 6. Quick Win Priorities | Priority | Action | Impact | |----------|--------|--------| | 1 | Enable compression | High | | 2 | Lazy load images | High | | 3 | Code split routes | High | | 4 | Cache static assets | Medium | | 5 | Optimize images | Medium | --- ## 7. Anti-Patterns | ❌ Don't | ✅ Do | |----------|-------| | Guess at problems | Profile first | | Micro-optimize | Fix biggest issue | | Optimize early | Optimize when needed | | Ignore real users | Use RUM data | --- > **Remember:** The fastest code is code that doesn't run. Remove before optimizing.
More Performance skills
seo-audit
coreyhaines31/marketingskills
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.
competitor-profiling
coreyhaines31/marketingskills
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitors. For sales-specific battle cards, see sales-enablement.
vercel-optimize
vercel-labs/agent-skills
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.
