Profileur de Performance

What problem does it solve?

Slow loading times, low FPS in games, or memory leaks degrade user experience and can lead to abandonment. This Skill provides a systematic approach to analyzing and optimizing application performance, ensuring a smooth and responsive experience across all devices.

Core Features & Use Cases

• Targeted Metrics: Focuses on key performance indicators like First Contentful Paint (FCP), Time to Interactive (TTI), Frames Per Second (FPS) (≥ 60 for arcade games), and stable memory usage.
• Advanced Profiling Tools: Guides the use of Chrome DevTools Performance tab, Lighthouse, and the browser's Performance API to identify bottlenecks.
• Optimization Patterns: Recommends techniques like lazy loading, requestAnimationFrame, object pooling, and proper cleanup to improve runtime and memory efficiency.
• Use Case: If users report lag in an arcade game, activate this Skill to profile its performance. You'll identify long tasks, memory spikes, or low FPS, then apply optimizations like object pooling or dirty rendering to restore a smooth 60 FPS experience, delighting your players.

Quick Start

1. Open Chrome DevTools (F12) and go to the 'Performance' tab.

2. Click 'Record' while interacting with the app or playing a game.

3. Analyze the flame chart to identify long tasks, high CPU usage, or low FPS.

4. Run a Lighthouse audit for loading performance:

npm run audit:mobile