Setting the file. One moment.
Subchapter 3.33
reference/optimize.mdMarkdown7 KBView on GitHub
Performance is a feature. Identify the actual bottleneck for THIS interface, fix it, then measure. Don’t optimize what isn’t slow.
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 reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polishwidth, height, top, left, margins)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:
When the user-facing numbers move, hand off to /impeccable polish for the final pass.