In previous posts, we talked about optimizing our websites to reduce page weight and inadvertently decrease overall page load time. This page load metric, though incredibly important, doesn’t fully take into account the user’s perception of a websites’ performance. At the very least, a user’s goal when visiting a website is to view the page content. As a result, they are more likely attuned to the time it takes for a page to be viewable (first meaningful paint) or usable (time to interactive) rather than on the time it takes for the entire page to load (page load time). Optimizing for render performance requires a sound understanding of the steps the browser takes when going from initial page request to rendering pixels to the screen.
Mission Critical: Render all the things.
The process that the browser takes from request to initial render is known as the critical rendering path. To better understand how this process works, let’s break this down into smaller steps:
When you first go to view a page, the browser sends a request for the main
Clearing the critical performance hurdle
- Identify critical resources
- Prioritize critical resources by making them first to load
- Defer/Async everything else
Critical CSS In the explainer for the browser render path earlier, we saw that a request for CSS blocks the page from rendering. Thankfully, there’s a sneaky way to minimize the set of render blocking CSS (critical CSS) so only the most important styles load on initial render. Determining the critical CSS for a page however can be rather complex. It requires knowledge of the elements that a user will see on initial render as well as the associated styles for those elements. Doing this manually would prove a tedious endeavor. But lucky for us there are many tools to help us deliver mission critical CSS without much added effort. Penthouse is one example of those tools that enable you to identify critical CSS. For more on critical css, I recommend this humorous tutorial by the dynamic duo David and MPJ on Dev Tips.
defer, check out this blog post as well as this one that goes in depth into the scenarios and performance benefits of using on over the other.
Browsers + Developers = Better Performance
Ensuring that a website loads as fast as possible takes a lot of work from both the developer and the browser. While browser engines (and the people who make them) do a great job of making sure our websites are as performant as possible by default, there are many tools and techniques at our disposal (see above) to making more performant webpages. Its our responsibility as developers to deliver better experiences for our users everywhere. So go forth and make more performant websites!