Understanding Critical Rendering Path is crucial in web development, as it impacts performance and user experience of website. As a web developer you can optimize Critical Rendering Path for better perfomance and SEO rankings.
In this article, we will look at basic terms of Critical Rendering Path, its sequence and techniques to optimize it.
What exactly is CRP? 🤔
Critical Rendering Path (CRP) is a sequence of steps that the browser takes to convert HTML, CSS and JavaScript into pixels on the screen.
Understanding Terms 🧠
Parsing is a process of converting HTML and CSS into structures that the browser can understand and manipulate.
Rendering is a process of converting DOM and CSSOM into pixels on the screen.
DOM (Document Object Model) is a tree-like structure representing the HTML content of a web page. Each element, attribute, and piece of text in the HTML document becomes a node in this tree.
CSSOM (CSS Object Model) is a tree-like structure that represents the CSS styles of a web page.
Render Tree is combination of DOM and CSSOM. It contains only the nodes needed to render the page, including the visual information like styles and layout.
Sequence in CRP 🚦
Steps in rendering process:
As browser receives first package of HTML file, it starts constructing the DOM.
It continues the process of DOM construction and as soon as browser discovers a reference to CSS file (
<link rel="stylesheet">) it sends HTTP request for CSS file.When it receives packages of CSS file, it starts simultaneously constructing the CSSOM.
When the browser counters reference to JavaScript file (
<script>element) it stops parsing HTML and CSS, as JavaScript can directly manipulate DOM and CSSOM. Only after JavaScript finished downloading and executing, parsing process continues.When browser encounters tags for external data like images, videos, audio etc, it notes the locations of files but continues parsing the rest of the page. The browser can perform the initial paint of webpage even if the external data hasn't been fully loaded yet. (That's why u can see how images load even after main content has already appeared on screen).
DOM and CSSOM are combined to form the Render Tree, which represents what will be displayed on screen.
The browser makes the layout. It calculates the exact position and size of each visible element.
The browser paints pixels on the screen and displays the webpage.
Note, that when content on a webpage changes dynamically (text changes color, hover animations etc) or additional content is loaded browser do not repaint the entire page, instead it selectively updates parts of the page.
CRP Optimization Techniques 💪
Minimize Critical Resources
- Ensure only the necessary resources are included in the critical path.
- Use minification tools (to remove blank space) and compression(.zip) to reduce the size of resources.
Optimize CSS Delivery
Even though CSS simultaniously parsing itself along with HTML, rendering process won't start until both DOM and CSSOM are ready. So, it is a good idea to render important CSS first and defer everything else.
- Inline important CSS content directly in the HTML.
- Load non-critical CSS asynchronously.
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
Optimize JavaScript Delivery
As you know for now, JavaScript blocks the parsing process of HTML and CSS as it can directly manipulate DOM and CSSOM.
By default JavaScript behaviour, it stops parsing while it downloads and executes. But you can use defer and async attributes to change that.
- Defering JavaScript ownloads it while HTML is parsing and executes it after it's done constructing DOM.
<script src="script.js" defer></script> - Downloading JavaScript asynchronously happens while HTML is parsing, but execution happens as soon as JavaScript file has finished downloading.
<script src="example.js" async></script>
Many developers also put their scripts at the end of <body> element to ensure that they are loaded after HTML has been parsed.
You can also inline important JavaScript directly in HTML just like CSS.
Use Preloading and Prefetching
- Preloading tells the browser to start fetching the file as soon as possible, before it is discovered in the document’s standard flow. This means the file is given a high priority. It doesn’t block the rendering process.
<link rel="preload" href="styles.css" as="style"> - Prefetching loads resources that might be needed in the near future. By fetching them in advance, browser can serve them from cache when they are actually needed. These files are given lower priority, which means that they are loaded after everything else.
<link rel="prefetch" href="about-us.html">
Summary 📝
Critical Rendering Path is a sequence of steps which browser takes to display web content and there are several techniques to optimize it.
Thank you for reading, leave a comment if you want and stay cool!😎
Top comments (0)