Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. Better user experiences go a long way toward helping you achieve the goals you had in mind for your website.
Web performance may seem like a niche topic, but it is, in fact, both broad and quite deep. Given its depth as a subject area, it's vital that a course on web performance is both approachable, yet informative. The initial release of this course focuses on web performance fundamentals that beginners should find informative.
Each module in this series aims to have—where practically possible—a set of demos that supplement the content of each module and demonstrate key performance concepts. Given that this course is an initial offering, additional modules are currently being planned for publication in the coming months.
Here's what the initial course offering for Learn Performance covers:
Before you can get started with learning performance, you first have to understand its role in the user experience, and how it can result in better outcomes for users. This course starts off with a brief introduction into these topics, giving vital context as to why it's important to learn performance.
Every website starts with a request for an HTML document, that request has a big role to play in how fast your website loads. This module covers important concepts such as HTML caching, parser blocking, render blocking, and more, so you can ensure the first request for your website's HTML is off on the right foot.
The critical rendering path is a concept in web performance that deals with how quickly the initial rendering of a page appears in the browser. This module goes into the theory behind the critical rendering path, covering concepts such as render-blocking and parser-blocking resources, and how they play a key role in how quickly a page appears in the browser.
Resource hints are a collection of features available in HTML that can assist the browser in loading resources earlier and possibly even with higher resource priority. In this module, a few resource hints that can help your pages load even faster are covered.
Images represent a large portion of the data transferred on many web pages today. This module covers how to optimize images, as well as serve them efficiently so that you minimize wasted bytes, regardless of the user's device.
Video is a media type used often on web pages—but knowing how to serve them efficiently is one aspect of performance you shouldn't overlook. This module covers some key techniques for embedding videos in such a way that your website stays fast, as well adjacent performance considerations that can arise with their use.
Web fonts are a commonly used resource on the web—and rightfully so—as they add to the design of a website in ways that other resources can't. Even so, web fonts still have a performance cost. In this module, a number of performance considerations and techniques around web fonts are explored.
<iframe> elements can consume significant
bandwidth and CPU processing time. However, not all images and
<iframe> elements need to be loaded during the initial page
load, and can be deferred to a later time in which the user is likeliest to
see them. This technique is known as lazy loading. In this module,
lazy loading images and
<iframe> elements is explained so
you can get your pages to load faster and only consume bandwidth and
processing time only when needed.
While much of performance deals with what you can do to optimize and eliminate unnecessary resources, it may seem a bit paradoxical to suggest that some resources should be loaded before they're needed. However, there are some cases in which it might be appropriate to load certain resources ahead of time. In this module, this aspect of performance is explored, as prefetching, prerendering, and service worker precaching are discussed.
Much of what the user sees in the browser occurs on a single thread known as the main thread. However, there are opportunities where you can start up new threads to do computationally expensive work so that the main thread can accommodate important user-facing tasks. The API that does this is known as the Web Worker API, and in this module, the basics of it are covered.
Now that you have a basic understanding of web workers and their capabilities and limitations, it's time to take a look at a concrete use case for a web worker. In this demo, a web worker is used to fetch a JPEG file, extract its metadata, and send it back to the main thread so the user can see it in the browser.
Ready to get started with learning web performance? Get things kicked off by first reading Why speed matters.