Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
Identify and fix performance issues to create faster, smoother user experiences.
Understand current performance and identify problems:
Measure current state:
Identify bottlenecks:
CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
Create systematic improvement plan:
Optimize Images:
srcset, picture element)<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
Reduce JavaScript Bundle:
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
Optimize CSS:
Optimize Fonts:
font-display: swap or optional@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
Optimize Loading Strategy:
Avoid Layout Thrashing:
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
Optimize Rendering:
contain property for independent regionscontent-visibility: auto for long listsReduce Paint & Composite:
transform and opacity for animations (GPU-accelerated)will-change sparingly for known expensive operationsGPU Acceleration:
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
Smooth 60fps:
requestAnimationFrame for JS animationsIntersection Observer:
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
React-specific:
memo() for expensive componentsuseMemo() and useCallback() for expensive computationsFramework-agnostic:
Reduce Requests:
Optimize APIs:
Optimize for Slow Connections:
aspect-ratio CSS property/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
Tools to use:
Key metrics:
IMPORTANT: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
NEVER:
will-change everywhere (creates new layers, uses memory)Test that optimizations worked:
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.