35
What's Critical Rendering Path?
Whenever we talk about web performance, we come across things like async/defer, perceived performance, and critical path rendering. In this blog, we're going to discuss in length about Critical Rendering Path and how does it affect web performance.
We can define CRP in one line as
The whole process involves several steps and processing of code. The following flow would give you an idea of it -
unicode
type with an HTML page to convert data into characters.Objects
because it needs to store information such as parentNode
, childNodes
, events attached to that respective element etcetera.
display: none
or any of its descendants. Because render tree represents elements that are going to be painted on screen. So it omits any element that would not be part of our layout. We would talk in length about layout in the next step.viewport
of device, these properties vary. This process is called layout
or reflow
.To optimize DOM construction -
- As we already saw, DOM is render-block. It is render blocking because if it encounters a link or a script tag, browser stops DOM construction waits and after the link is fetched or JS engine has completed running JS code in script tag, browser starts where it left the construction.
- Browser does this because, when it encounters a script tag, it doesn't know what changes that script would do after completion. This is the same case even if you don't write JS code directly in script tag but write it in a different file and link via a script tag. Browser would still behave the same.
- So in order to load app as soon as possible, we need to decide what our critical resources are and what aren't?
-
You can do this by attaching a
async
attribute on your script tag like this
<script src="index.js" async></script>
When browser encounters
async
tag, it understands that this is not critical resource for page, it doesn't stop and keeps the DOM construction going to next part of file.
How can we optimize the CSSOM construction step?
media types
and media queries
when we link our CSS files.<link rel="stylesheet" href="index.css">
then it's CSS parse blocking.
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 680px)">
<link rel="stylesheet" href="portrait.css" media="orientation:portrait">
then this wouldn't be blocking since it only loads when screen size is under 680px.
will-change
to let browser know beforehand that this property would change in the future. If browser encounters this property then it does some optimizations even before the element actually changes.async
and loading them later.📚 Resources -
35