Developing for Web Performance

Course details

Performance matters! Faster websites have been shown to increase visitor retention, loyalty, and satisfaction, especially on mobile. In this course, discover how to develop websites and applications with performance in mind. Since the cause of most slowdowns is the communication between the browser and the server—the realm of HTTP—senior staff instructor Morten Rand-Hendriksen goes over the HTTP/2 protocol, which offers web developers huge performance enhancements. Morten then covers how to keep your team focused on performance by creating a realistic performance budget. He explains how to optimize images (one of the biggest resource hogs), code, and file caching, as well as server delivery and browser handling. Plus, learn how to optimize CSS and JavaScript and use a content delivery network to speed up download times. Upon wrapping up this course, you'll have the basic knowledge you need to develop websites and apps that thrive in the age of the lightning-fast web.

Concepts

0. Introduction

01 - What is performance and why is it so important

1. Web Performance - An Introduction

02 - What is web performance and optimization
03 - How do we measure performance
04 - Why does performance matter

2. Web Performance Basics

05 - How browsers render content
06 - HTTP 2 and multiplexing
07 - Bottlenecks
08 - Caching
09 - The PRPL pattern

3. Creating a Performance Budget

10 - What is a performance budget
11 - Creating a realistic performance budget
12 - Common culprits and performance hogs

4. Optimizing Images

13 - Images are the leading cause of the slow web
14 - Image quality matters
15 - The image scaling hack
16 - Image format options
17 - Manual image optimization
18 - Automated image optimization
19 - Responsive images
20 - Lazy-loading images

5. Markup and Content

21 - Automated optimization of JavaScript and CSS
22 - JavaScript bundling vs. modules
23 - JavaScript loading - Async and defer
24 - Lazy-loading JavaScript modules with import()
25 - Minifying and uglifying JavaScript
26 - Critical CSS
27 - Deferring noncritical CSS
28 - Component-based CSS loading

6. Web Fonts

29 - Web fonts can be major performance hogs
30 - Optimizing third-party web font delivery
31 - Optimizing self-hosted web font delivery
32 - Variable fonts to the rescue
33 - Web fonts on a performance budget

7. Optimizing Delivery

34 - Compress data with Gzip and Brotli
35 - Server push
36 - Preloading vs. prefetch
37 - Browser caching
38 - CDNs

Conclusion

39 - Thank you