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) and older devices (2–3 year old phones). DevTools throttling "Fast 3G" is roughly 1.6Mbps down and 750Kbps up. Most real users aren't on fiber, so measure on real devices 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
- Compressing images
Answer
Polling instead of events — Polling wastes network and CPU; events or push updates are more efficient.