performance-profiling

Performance Profiling - Performance Analysis and Optimization Skills

Skill Overview

Help developers systematically analyze application performance—from measurement to optimization—following the scientific process of “measure → analyze → optimize”, enabling quick identification and resolution of performance bottlenecks.

Use Cases

1. Slow Website Loading

When users report that the site takes a long time to open and the first-screen load time is slow, this skill helps you quickly pinpoint whether the issue is caused by an oversized JavaScript bundle, resource-loading blocking, or rendering performance problems, using methods such as Lighthouse audits and Core Web Vitals analysis.

2. App Jank and Memory Issues

When a page experiences scrolling stutter, slow interaction responses, or steadily increasing memory, this skill provides approaches for runtime profiling and memory analysis to help identify runtime issues such as long tasks blocking the main thread, layout thrashing, and memory leaks.

3. Unclear Timing for Code Optimization

If the development team is unsure whether optimization is needed—or what to optimize—this skill emphasizes the principle of “measure first, then optimize”. By following a four-step process—establishing a performance baseline, identifying bottlenecks, applying targeted fixes, and validating results—it helps avoid blind optimization and over-engineering.

Core Features

1. Core Web Vitals Monitoring

Provides target thresholds and measurement methods for the three core metrics: LCP (largest contentful paint), INP (interaction latency), and CLS (cumulative layout shift). Supports end-to-end performance management, including local Lighthouse testing during development, CI/CD pipeline automation integration, and RUM (real user monitoring) in production environments.

2. Multi-Dimensional Performance Analysis

Covers multiple dimensions such as bundle size analysis, runtime profiling, memory analysis, and network analysis. Recommends appropriate tools for different types of problems, such as using Bundle Analyzer to inspect dependency sizes, using DevTools Performance to analyze execution timelines, and using the Memory panel to track down memory leaks.

3. Systematic Optimization Workflow

Offers a complete workflow from baseline measurement to bottleneck identification, and from targeted fixes to effect validation. Includes a symptom-to-cause comparison table for common performance issues, as well as a priority-ordered quick optimization checklist, helping developers efficiently resolve performance problems.

Common Questions

Which step should performance analysis start with?

It must begin with “establishing a baseline”. Don’t guess based on intuition—measure the current state with Lighthouse or related tools first to obtain quantitative data as the comparison benchmark for subsequent optimizations. Without a baseline, you can’t verify results.

What are the pass criteria for Core Web Vitals?

LCP (loading performance) should be under 2.5 seconds, INP (interactivity) should be under 200 milliseconds, and CLS (visual stability) should be under 0.1. Exceeding these thresholds indicates an experience issue that should be handled with priority.

How can you tell if there is a memory leak?

Use the DevTools Memory panel to analyze heap snapshots. Check whether there is continuously increasing heap memory, a large number of retained objects, or detached DOM nodes. If memory doesn’t recover after repeated operations and there are uncleared references, it likely indicates a memory leak.