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:
Why speed matters
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.
General HTML performance considerations
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.
Understanding the critical path
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.
Optimize resource loading
As a page loads, many resources are referenced within its HTML that provide a page with its appearance and layout through CSS, as well as its interactivity through JavaScript. In this module, a number of important concepts related to these resources and how they affect a page's load time are covered.
Assist the browser with resource hints
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.
Image performance
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 performance
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.
Optimize web fonts
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.
Code-split JavaScript
Some resources are not crucial to a web page's initial load. JavaScript is one such resource that can be deferred until the time of need through a technique known as code splitting. By doing so, you can improve performance by lowering bandwidth and CPU contention—a critical consideration for improving both initial page load speed and input responsiveness during startup.
Lazy load images and <iframe> elements
Images and <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.
Prefetching, prerendering, and service worker precaching
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.
An overview of web workers
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.
A concrete web worker use case
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.