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.
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.
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.
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:
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.
We can take certain actions to speed up the initial view. This is what you can do:
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.
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?
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 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…
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.
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.
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.
We can help with that! We have professionally optimized the speed of thousands of websites. Because of this we know how to get the best results quickly while keeping our prices low. Get an instant price quote for our services now.