Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Web Performance 101: Critical Render Path

DZone's Guide to

Web Performance 101: Critical Render Path

To optimize the critical render path for your web page, you must analyze the assets that are critical to the initial view.

Free Resource

Download our Introduction to API Performance Testing and learn why testing your API is just as important as testing your website, and how to start today.

The success of a website is directly proportional to the users’ digital experience. In the age of tech, savvy consumers, and competitive targeted marketing, speed matters. Users expect websites to load fast. The faster the user can view the web page, the better the digital experience. We’ve already discussed how page size, images, and scripts can affect web page load time and how each of these factors can be optimized to deliver the best user experience. In this article, we look at another important factor that determines web performance: critical render path.

What Is Critical Render Path?

The series of events involved in downloading website resources (HTML, CSS, and scripts), processing, and rendering the first pixel on the page is called the critical render path.

Image title

A browser needs to construct the structure of the page before rendering. The web page data structure has two main components: DOM (Document Object Model) and CSSOM (CSS Object Model). The browser parses the page HTML to form the DOM while the CSS is used to build the CSSOM.

The HTML is received by the browser in raw bytes, which is converted to characters. The HTML markup tokens and tags (for example: “<head>”, “<body>”) are then generated. These tags are then mapped to form nodes that make up the DOM tree.

full-processA similar process is carried out by the browser when it receives the CSS rules. The data is converted to characters and tokens, which are then linked to form the CSSOM tree.

cssom-treeThe DOM and the CSSOM together form the final render tree. The browser paints each node on the page following the render tree path. The entire process takes time and can impact the overall performance of the web page.

How Significant Is the Critical Render Path?

The initial view of the page, or what the user views above the fold, is critical to the end-user experience. Optimizing each step in the critical render path will speed up the rendering process of above-the-fold content, resulting in a better digital experience.

If the page HTML contains any render-blocking script or CSS, then the render start will be delayed. Most websites are cluttered with multiple CSS files, scripts, and images that are not critical for rendering the first pixel. A user is more likely to wait for a page to load if an initial layout is displayed versus a blank page.

We can see this in action in the image below. The filmstrip shows the number of seconds the page remains blank before the first pixel is displayed. Amazon paints the first pixel within a second while Nordstrom takes 2.4 seconds.

amazonvsnord_renderstartThe time taken by the initial render sets the tone for the users’ digital experience. The user perceives a better web performance even if the rest of the page takes another second to fully load.

Let us compare the Critical Render Path from another perspective. The following waterfall graphs give us a better understanding of the page design and critical render path. The graph below for Axis Bank shows several scripts and other resources being loaded before the page starts to render. This can be detrimental to the end-users’ digital experience.

axisbankwaterfallIn contrast, the waterfall chart for U.S. Bank gives an example of an optimized render path. There are fewer resources that need to be downloaded before the initial render.

usbankwaterfallWhat Is the Ideal Render Path?

To optimize the critical render path, we must focus on the following three factors.

  1. Reducing the number of critical assets to allow the browser to start rendering the initial view/above-the-fold content quickly without waiting for the rest of the resources to complete loading.
  2. Minimizing the byte size of the critical resources to reduce browser overhead and help speed up the rendering process.
  3. Optimizing the order in which each critical resource is downloaded or lazy-loading assets that are not critical to minimize the round trips the browser needs to make to fetch each critical resource and in effect reduce the length of the critical render path.

To build the ideal render path for your web page, you must analyze the assets that are critical to the initial view. The resources must then be minimized and optimized to reduce the overhead on the browser. This will ensure the progressive rendering of the page begins as fast as possible. The page will continue to load and draw all the other elements but this will not disrupt what the user views above the fold.

Find scaling and performance issues before your customers do with our Introduction to High-Capacity Load Testing guide.

Topics:
performance ,web development ,critical render path

Published at DZone with permission of Kameerath Kareem, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}