performance-optimizer

Audit and optimize web performance bottlenecks in Next.js and SPA projects.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/kanitmann01/TitanTale-Analytics --skill performance-optimizer-kanitmann01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimizer
Source: https://github.com/kanitmann01/TitanTale-Analytics/tree/main/.cursor/skills/performance-optimizer
Command: npx skills add https://github.com/kanitmann01/TitanTale-Analytics --skill performance-optimizer-kanitmann01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance issues in modern web apps (slow load times, heavy bundles, and excessive re-renders) degrade user experience and inflate costs. This skill guides engineers to identify bottlenecks, prioritize improvements, and implement evidence-based changes.

Core Features & Use Cases

  • Performance auditing: analyze loading, rendering, and network behavior to pinpoint hotspots.
  • Incremental optimization: apply small, verifiable changes (bundle splitting, caching tweaks, server components) with rollback plans.
  • Use Case: optimize a Next.js app with dynamic imports to reduce TTFB and bundle size.

Quick Start

Run performance-optimizer on your Next.js project to identify and implement a minimal performance improvement.

Frequently Asked Questions about performance-optimizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify web performance bottlenecks in a Next.js application?▼

Identify web performance bottlenecks by auditing bundles, rendering paths, and network behavior. Use profiling tools to pinpoint loading hotspots and excessive re-renders before applying incremental changes.

What's the best way to reduce bundle size and improve loading speed in SPAs?▼

Reduce bundle size and improve loading speed by applying dynamic imports, bundle splitting, and caching tweaks. Implement these as small, verifiable changes with clear rollback steps to ensure stability.

Can I use dynamic imports to optimize TTFB and bundle size in Next.js?▼

Yes, you can use dynamic imports in Next.js to optimize TTFB and bundle size. This technique splits your code into smaller chunks, loading non-critical resources only when needed to alleviate bottlenecks.

Why does my web app suffer from slow load times and heavy bundles?▼

Slow load times and heavy bundles occur when web apps lack proper bundle splitting and caching. Auditing rendering paths and token efficiency helps pinpoint these hotspots to implement evidence-based optimizations.

Does performance optimization require measuring before and after applying changes?▼

Yes, performance optimization requires measuring before and after applying changes. This evidence-based approach ensures that bundle splitting, server components, or caching tweaks verifiably improve loading speed.

What should I do if incremental performance changes break my web app's rendering?▼

If incremental performance changes break rendering, apply rollback plans. The optimization process prioritizes small, verifiable changes to bundles and caching, ensuring you can safely revert if loading speed degrades.