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”
The browser’s rendering path
1. The browser reads and analyzes the HTML markup to find out how to render the page.
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.
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:
2. Defer Loading CSS
3. Placing CSS code in style tags in the header (inline) instead of calling .css files
5. Reducing or Inlining Functional Images
6. Lazy loading photos
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…
– CSS not needed for above the fold content
– 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.