Develop your websites and applications with performance in mind. Learn how to create a realistic performance budget; optimize images, code, and file caching; and more.
Overview
Syllabus
Introduction
- What is performance and why is it so important?
- What is web performance and optimization?
- How do we measure performance?
- Why does performance matter?
- How browsers render content
- HTTP/2 and multiplexing
- Bottlenecks
- Caching
- The PRPL pattern
- What is a performance budget?
- Creating a realistic performance budget
- Common culprits and performance hogs
- Images are the leading cause of the slow web
- Image quality matters
- The image scaling hack
- Image format options
- Manual image optimization
- Automated image optimization
- Responsive images
- Lazy-loading images
- Automated optimization of JavaScript and CSS
- JavaScript bundling vs. modules
- JavaScript loading: Async and defer
- Lazy-loading JavaScript modules with import()
- Minifying and uglifying JavaScript
- Critical CSS
- Deferring noncritical CSS
- Component-based CSS loading
- Web fonts can be major performance hogs
- Optimizing third-party web font delivery
- Optimizing self-hosted web font delivery
- Variable fonts to the rescue?
- Web fonts on a performance budget
- Compress data with Gzip and Brotli
- Server push
- Preloading vs. prefetch
- Browser caching
- CDNs
- Thank you
Taught by
Morten Rand-Hendriksen