Page Rendering Lifecycle

Every time you load a web app, your browser performs a set of actions. By understanding what each action is and why it’s needed, you can fine-tune the performance.

The Web Performance Handbook, by Glen Elkins

This article is an excerpt from my book The Web Performance Handbook. In it, you will learn the core concepts of web performance, the tools you need to build performant websites, and how to make good performance part of your team’s workflow.

Build better web apps, increase conversion times, and charge your clients more by using what you learn in The Web Performance Handbook.

Here are the actions a browser performs to render a web app, also commonly referred to as the “Critical Rendering Path”:

Step 1

The HTML is downloaded and read first, and then the DOM (Document Object Model) is created. As the browser parses the HTML, it will likely encounter some external assets that it will need to retrieve in order to render the page correctly. We will touch on render-blocking files a bit later.

Step 2

The styles are loaded from the server, and then the CSSOM (Cascading Style Sheet Object Model) is created.