Developing for Web Performance

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.

Introduction

• What is performance and why is it so important?

1. Web Performance: An Introduction

• What is web performance and optimization?
• How do we measure performance?
• Why does performance matter?

2. Web Performance Basics

• How browsers render content
• HTTP/2 and multiplexing
• Bottlenecks
• Caching
• The PRPL pattern

3. Creating a Performance Budget

• What is a performance budget?
• Creating a realistic performance budget
• Common culprits and performance hogs

4. Optimizing Images

• 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

5. Markup and Content

• 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

6. Web Fonts

• 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

7. Optimizing Delivery

• Compress data with Gzip and Brotli
• Server push
• Preloading vs. prefetch
• Browser caching
• CDNs

Conclusion

• Thank you