Web Performance Optimization

What you'll learn

• Explain Core Web Vitals (LCP, INP, CLS) and set targets for each.
• Optimize images, fonts, CSS and JavaScript to cut load time.
• Apply caching, CDN, HTTP/2–3 and resource hints to speed up delivery.
• Diagnose bottlenecks with DevTools, Lighthouse, WebPageTest and RUM.
• Set performance budgets and prevent regressions in CI.

Syllabus

Module 1: Getting started

1. Why performance matters

Module 2: Foundation

1. Core Web Vitals
2. Performance metrics fundamentals

Module 3: Core optimization

1. Image optimization
2. Asset compression and minification
3. Caching strategies

Module 4: Data delivery

1. HTTP/2 and HTTP/3
2. CDN usage and optimization

Module 5: Design and architecture

1. Code splitting and bundling
2. Lazy loading and infinite scroll
3. Critical rendering path

Module 6: Optimization techniques

1. JavaScript optimization
2. CSS optimization
3. Font optimization
4. Video optimization

Module 7: Measurement & quality

1. Chrome DevTools and Performance API
2. Lighthouse scoring and audits
3. WebPageTest and real-world testing

Module 8: Tools and monitoring

1. Resource hints and preloading
2. Service Workers and offline support
3. Performance monitoring and budgets

Module 9: Advanced optimization

1. Advanced performance techniques
2. Performance best practices and patterns

Module 10: Revision and mastery

1. Common performance pitfalls and how to avoid them
2. Interview questions and practical scenarios