// Analyzes and optimizes frontend performance using Core Web Vitals, bundle analysis, lazy loading, image optimization, and caching strategies
| name | Frontend Performance Optimizer |
| slug | frontend-performance-optimizer |
| description | Analyzes and optimizes frontend performance using Core Web Vitals, bundle analysis, lazy loading, image optimization, and caching strategies |
| capabilities | ["Core Web Vitals measurement and optimization (LCP, FID, CLS)","JavaScript bundle size analysis and code splitting","Image optimization and modern format recommendations","Lazy loading strategy implementation","Browser caching and CDN configuration","Resource prioritization and preloading","Performance budget definition and tracking"] |
| inputs | ["Application URL or codebase path","Framework type (React, Vue, Angular, vanilla)","Target performance metrics (optional)","Existing bundle analyzer output (optional)"] |
| outputs | ["Performance audit report with Core Web Vitals scores","Prioritized optimization recommendations","Code examples for fixes","Performance budget thresholds"] |
| keywords | ["performance","frontend","web-vitals","optimization","bundle-analysis","lazy-loading","caching","LCP","FID","CLS"] |
| version | 1.0.0 |
| owner | cognitive-toolworks |
| license | MIT |
| security | [{"no-secrets":true},{"no-pii":true},{"read-only-analysis":true}] |
| links | [{"title":"Web Vitals","url":"https://web.dev/vitals/","accessed":"2025-12-15T19:35:37-05:00"},{"title":"Lighthouse Performance Scoring","url":"https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/","accessed":"2025-12-15T19:35:37-05:00"},{"title":"webpack Bundle Analyzer","url":"https://github.com/webpack-contrib/webpack-bundle-analyzer","accessed":"2025-12-15T19:35:37-05:00"}] |
Trigger conditions:
Use this skill when you need systematic frontend performance analysis and actionable optimization recommendations based on industry-standard metrics.
Time normalization:
NOW_ET = "2025-12-15T19:35:37-05:00" # NIST/time.gov semantics
Input validation:
Source freshness:
Goal: Quick performance assessment with high-impact recommendations.
Steps:
Measure Core Web Vitals using Lighthouse or WebPageTest API
Analyze bundle size (if build artifacts available)
Generate top 3 recommendations based on worst metrics:
Output: Performance score summary + prioritized 3-item action list.
Abort conditions: URL unreachable, no performance data available.
Goal: Comprehensive audit with framework-specific optimizations.
Steps:
All T1 steps plus detailed metric breakdown
Framework-specific analysis:
Resource optimization:
Caching strategy review:
Performance budget definition:
Output: Detailed audit report + code examples + performance budget config.
Goal: Root cause analysis with custom optimizations and benchmarking.
Steps:
All T2 steps plus root cause investigation
Waterfall analysis:
JavaScript execution profiling:
Custom optimization strategies:
Benchmarking plan:
Output: Root cause analysis + custom optimization plan + monitoring setup guide.
Tier escalation:
Ambiguity thresholds:
Abort conditions:
Required fields:
interface PerformanceReport {
metrics: {
lcp: { value: number; rating: "good" | "needs-improvement" | "poor" };
fid: { value: number; rating: "good" | "needs-improvement" | "poor" };
cls: { value: number; rating: "good" | "needs-improvement" | "poor" };
};
recommendations: Array<{
priority: "high" | "medium" | "low";
category: "images" | "javascript" | "css" | "caching" | "fonts" | "third-party";
issue: string;
solution: string;
estimatedImpact: string; // e.g., "0.5s LCP improvement"
codeExample?: string;
}>;
performanceBudget?: {
javascript: string; // e.g., "500KB"
css: string;
images: string;
total: string;
};
nextSteps: string[];
}
Format: Structured JSON or Markdown report with code blocks.
Constraints:
Input:
URL: https://example.com/app
Framework: React
Output:
## Performance Audit Summary
**Core Web Vitals:**
- LCP: 4.2s (poor) — Target: <2.5s
- FID: 85ms (good)
- CLS: 0.15 (needs improvement) — Target: <0.1
**Top 3 Recommendations:**
1. **HIGH: Optimize hero image (3.5MB PNG)**
- Convert to WebP/AVIF
- Use responsive images with srcset
- Estimated impact: 1.5s LCP improvement
2. **HIGH: Reduce layout shift in header**
- Add explicit width/height to logo
- Reserve space for dynamic content
- Estimated impact: 0.12 CLS reduction
3. **MEDIUM: Enable text compression**
- Configure gzip/brotli for text assets
- Estimated impact: 0.3s LCP improvement
Token budgets:
Safety:
Auditability:
Determinism:
Official Documentation:
Tools:
Performance Budgets:
Design RESTful APIs with OpenAPI 3.1/3.2, resource modeling, HTTP semantics, versioning, pagination, HATEOAS, and OWASP API Security.
Design data pipelines with quality checks, orchestration, and governance using modern data stack patterns for robust ELT/ETL workflows.
Validate WCAG 2.2 compliance (A/AA/AAA) with ARIA, color contrast, keyboard navigation, screen readers, and automated testing via axe-core/Pa11y.
Design Kafka architectures with exactly-once semantics, Kafka Streams, ksqlDB, Schema Registry (Avro/Protobuf), performance tuning, and KRaft.
Design RabbitMQ architectures with exchanges, quorum queues, routing patterns, clustering, dead letter exchanges, and AMQP best practices.
Configure Prometheus with alerting, recording rules, service discovery (K8s, Consul, EC2), federation, PromQL optimization, and Alertmanager.