Lesson 24 / 25
Common performance pitfalls and how to avoid them
Learn from common mistakes and anti-patterns that degrade performance.
Performance anti-patterns
Avoid: unoptimized images, render-blocking CSS/JS, layout thrashing, polling instead of events, missing caching headers, bloated frameworks, inlining large resources, not testing on slow networks, ignoring third-party scripts. Each costs 100-1000ms of performance.
Testing on realistic conditions
Always test on slow networks (3G, 4G), older devices (2-3 year old phones). DevTools throttling: Fast 3G = 1.6Mbps down, 750Kbps up, 40ms latency. Most real users aren't on fiber. Measure on real devices and networks regularly.
Avoiding regressions
Set performance budgets in CI/CD. Use synthetic monitoring for early detection. Compare before/after metrics. Educate team on performance impact. Measure third-party impact (analytics, ads, tracking). Budget for unavoidable dependencies.
Quick check
Quick check: What is a common performance anti-pattern?
- Polling instead of events
- Using Service Workers
- Optimizing images