Eliminate render-blocking resources

Overview

Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.

These resources delay the First Paint – the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time.

Eliminating render-blocking resources can help your page load significantly faster and improve the website experience for your visitors.

How does eliminating render-blocking resources affect page performance?

Every time a browser loads a page, it parses through the page’s HTML code line-by-line.

In doing so, it may come across various scripts and tags that, unless specified otherwise, will be downloaded, parsed, and executed before moving onto the rest of the HTML code.

Render-blocking resources delay the browser from starting the render process, extending your page’s First Paint.

Multiple render-blocking resources could mean that your visitor waits for a long time before seeing anything meaningful on your page (like a blank or sparsely populated page).

This gives visitors the impression that the page is taking too long to load, causing them to refresh, hit the back button, or exit entirely.

Scripts and tags placed at the beginning of the page need to be deferred/asynchronously loaded or eliminated altogether as the quicker your visitors see something load on your page, the better the performance (or in many cases, perception of performance).

Minimizing render-blocking resources, as much as possible, can facilitate progressive loading, allowing First Paints to occur sooner, and enabling your visitors to perceive that your site is doing something.

How to eliminate render-blocking resources with Staq

Both .CSS and .JS files can cause render-blocking issues, however, you may find that Google identifies purely .CSS files only.

The Staq tool may either eliminate render-blocking resources or improve them.

To optimize, go to Site Optimizer > CSS. Then turn on:

• Load CSS deferred
• Extract Critical CSS.

What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren’t required at the initial load.