How to set up the critical rendering path.


Setting up the perfect critical rendering path is one of the most important aspects of creating a quick initial view of your web pages for your visitors. Google’s PageSpeed team has been shedding light on this concept for some years now and deems it one of the key factors in page speed. And when they speak, you should listen.
Setting up the critical rendering path basically means you make the most important visual parts of your site load first instead of loading everything at once. Usually this means that the important above the fold content should load first. This way the visitor gets an instant view of your site’s critical above the fold content and can instantly start using your site without having to wait for all the other less critical content to load first. This gives the visitor a “instant page load” experience when they visit one of your web pages, which is what you should love about it.

What is “above the fold”?

Above the fold is the first screen view the visitor gets on his screen when he visits your website without scrolling down. For most websites this constitutes to the logo, navigation links, title, textual content and one or two photos.

The importance of “the initial view”

By only focusing on loading the content needed for the above-the-fold initial view of a page you can make a page with hundreds of CSS and Javascript files load in less than a second. Of course, the browser still eventually has to load those hundreds files (which, to mention, are way too many files) but the initial view of the page with the above the fold content is visible to your visitors almost instantly. This is why setting up the critical rendering path is important for almost any site, and especially for larger sites with a lot of files to load. You can go from a above-the-fold rendering speed of 20 seconds per page to less than 1 second.

The browser’s rendering path

Before we learn how to set up the critical render path we should learn how browsers render a typical web page with HTML markup, textual content, a photo, CSS files and Javascript files. This is how a browser would render such a page:
1. The browser reads and analyzes the HTML markup to find out how to render the page.
2. The browser detects the page has textual content and a photo but has to load the CSS styles and Javascript files first before it can show this content in its entirety in the browser.
3. The browser starts downloading these CSS and Javascript files one by one to analyze their code and see what they order the browser to do.
4. When they are done loading, the browser loads the photo whereafter it finishes loading the page and showing the entirely loaded page to the visitor.
As you can see above the CSS and Javascript files can be a key factor in slowing the rendering process of your page, especially if you have more as one. This is also where big improvements in page speed can be made, hence the reason why we’re going to focus on the rendering of those files most.

How to set up the perfect critical rendering path?

We can take certain actions to speed up the initial view. This is what you can do:
1. Defer or Asynchronous loading of low priority Javascripts
2. Defer Loading CSS
3. Placing CSS code in style tags in the header (inline) instead of calling .css files
4. Inlining Small Javascripts
5. Reducing or Inlining Functional Images
6. Lazy loading photos
7. Compressing your CSS, Javascript or PNG, GIF and JPG files
8. Removing or minimizing social buttons
The last option is optional. If you really need the social buttons you shouldn’t remove them but social buttons can really slow your website down.

Analyze your own website

To set the best critical rendering path for your own website you first need to analyze your own pages. Visit a key page (the type of page which is most used by your visitors) from your site and ask yourself this question: Which files does this page require to strictly load the above the fold content, the initial view?

The content you need

Keep in mind that every website has its own initial view content but for most websites this is what a basic page generally needs for displaying the above the fold content:
– The HTML page
– CSS for header and above the fold content
– Logo image file
– Textual content
– Above the fold photos

The content you don’t need

The above is usually all that’s necessary to provide a quick but instantly usable first view of your page. Keep in mind that, apart from the logo, never use images but strictly CSS for the design of your websites. If you use a lot of images for your website design (which is not recommended) you should obviously load those too.
Now regarding the initial view for most websites this means that you generally don’t need…
– The majority of Javascripts
– CSS not needed for above the fold content
– Advertisements
– Below the fold photos
– Social buttons
– Any other sort of script, feature or addition to your site
You can load the first initial view of your above the fold content just fine without these attributes. They can load after you’ve loaded the prime content necessary to load your first initial view.

Experiment & test

Whenever you make changes advocated on this site (or anywhere for that matter) you should always test out how they affect the speed of your web pages. You can do this by using our page speed test tool.

More in-depth information

If you want more in-depth information about this subject with all the technical documentation you should definitely check out Google’s work about this.