Frontend Performance Audit & Optimization Roadmap
Audit React/Vue/Angular apps for performance bottlenecks and create optimization roadmaps
What You Can Do
You can systematically identify performance bottlenecks in your frontend application across React, Vue, and Angular frameworks. This skill analyzes your codebase for common anti-patterns, runtime behavior, and bundle metrics to pinpoint the slowest components and queries. You'll receive a data-driven optimization roadmap prioritized by impact and implementation effort, complete with specific code examples and effort estimates your team can execute immediately.
Features
Detects performance anti-patterns specific to React, Vue, and Angular applications including unnecessary re-renders, inefficient watchers, and unoptimized change detection.
Ranks issues by estimated performance gain, implementation complexity, and risk level so you address the highest-impact improvements first.
Identifies large dependencies, duplicate packages, and code-splitting opportunities to reduce initial load times.
Evaluates Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift factors with specific improvement recommendations.
Creates a structured implementation plan with milestones, effort estimates in story points, and success metrics for each phase.
Provides before-and-after code snippets showing exactly how to implement each optimization in your framework.
Estimates realistic performance improvements (milliseconds saved, bundle reduction percentage) for each recommendation.
Example Output
Performance Audit Summary
Application: E-commerce Dashboard (React) | Total Issues: 24 | Critical: 3 | High: 8 | Medium: 13
Top 3 Bottlenecks
1. Unnecessary ProductCard Re-renders (Estimated Gain: 45% faster interactions)
- Issue: Component re-renders on every parent state change
- Root Cause: Missing React.memo() and un-memoized event handlers
- Fix: Wrap with
React.memo()and useuseCallbackfor handlers - Effort: 2 hours | Risk: Low
2. Oversized Bundle (Estimated Gain: 320KB reduction, 1.2s faster load)
- Issue: Full Material-UI imported instead of tree-shakeable imports
- Root Cause:
import { * } from @mui/materialpattern - Fix: Cherry-pick:
import Button from @mui/material/Button - Effort: 3 hours | Risk: Low
3. N+1 GraphQL Queries (Estimated Gain: 60% fewer requests, 2.1s faster)
- Issue: User list makes individual requests per user
- Root Cause: No batch query or DataLoader pattern
- Fix: Implement batch API endpoint or Apollo DataLoader
- Effort: 6 hours | Risk: Medium
Optimization Roadmap
| Phase | Focus | Effort | Timeline | Expected Improvement |
|---|---|---|---|---|
| Phase 1 | Re-renders, bundle size | 8 SP | Week 1 | 50% faster interactions |
| Phase 2 | API efficiency, code-splitting | 10 SP | Week 2-3 | 2.1s faster page load |
| Phase 3 | Image optimization, caching | 6 SP | Week 4 | 40% faster on repeat visits |
What's Included
- Comprehensive Performance Audit: Full analysis of your codebase covering rendering performance, bundle size, dependencies, and runtime behavior.
- Prioritized Issues List: All findings ranked by impact, effort, and risk with clear severity labels and root cause explanations.
- Implementation Roadmap: Phased optimization plan with story point estimates, timeline, and success metrics for each phase.
- Code Refactoring Examples: Before-and-after code snippets with detailed explanations for implementing each recommendation.
- Executive Summary: High-level overview suitable for presenting to stakeholders with expected ROI and realistic timeline.
- Team Implementation Checklist: Structured task list your team can import directly into Jira, GitHub Issues, or Linear.
Who It's For
- Frontend Engineers & React/Vue/Angular Developers
- Engineering Managers overseeing frontend quality and velocity
- Full-Stack Engineers optimizing end-to-end application performance
- DevOps & Platform Engineers focused on Core Web Vitals
Best For
- Identifying performance bottlenecks in legacy or rapidly growing applications
- Planning data-driven performance improvements with team estimates
- Reducing bundle size and improving Lighthouse scores
- Creating stakeholder-ready optimization roadmaps and business cases
You might also like
Extract critical lease terms and financial obligations in minutes, identify risks and red flags that could impact deal profitability, and generate professional broker memos with negotiation strategy recommendations. You'll transform lease documents into actionable intelligence for faster, more confident decision-making.
by nakano1122
You systematically analyze multi-layered enterprise architectures, identify critical trade-offs across scalability, cost, and risk, and generate documented decisions that align technical choices with business strategy. This skill produces comprehensive architecture reviews that expose hidden dependencies, quantify implementation trade-offs, and deliver prioritized, actionable recommendations backed by formal Architecture Decision Records.
by nakano1122
You can leverage Claude to conduct thorough code reviews, evaluate code quality, identify architectural issues, and provide actionable feedback to your frontend engineers. This skill helps you standardize code review practices across your team, catch bugs before production, and maintain consistent quality standards while scaling your engineering capacity.
by nakano1122
You get a structured decision-making framework tailored to scale-ups navigating rapid growth. Claude helps you evaluate technical architecture choices, plan team scaling with hiring rubrics, prioritize technical debt against velocity demands, and craft engineering strategy communications for leadership. The framework balances short-term velocity with long-term maintainability.
by nakano1122
This skill transforms complex lease agreements into clear, actionable analysis. It evaluates terms against market benchmarks, identifies negotiation leverage points, and generates professional recommendation letters that strengthen your position in lease discussions.
by nakano1122
You conduct systematic architecture reviews that identify technical risks, quantify their business impact, and prioritize technical debt for remediation. The framework generates risk matrices, compliance gap analyses, and actionable roadmaps with effort estimates—ideal for due diligence, modernization planning, or governance decision-making. You produce executive summaries that translate technical findings into business language for stakeholder alignment.
by nakano1122
You get immediate structured incident assessment and response coordination. Claude analyzes incident severity, impact scope, and escalation requirements—then generates decision trees, stakeholder communication templates, and post-incident review guides. This skill accelerates your response from triage through resolution to after-action review.
by nakano1122
This skill evaluates industrial real estate deals by analyzing property fundamentals, comparable market data, risk factors, and investment metrics. You get detailed assessments of deal viability, market positioning, and potential returns—all structured to support your investment thesis with hard data. Whether you're analyzing a single property or comparing multiple deals, you'll receive an executive summary with a clear buy/hold/pass recommendation.
by nakano1122