If you’ve run a speed test on your website, you may find that one of the biggest contributors to slow load speed are render-blocking resources. But what are render-blocking resources? And more importantly, how can you minimize them to help speed up your website’s load times?

Which resources block rendering?

Any file that needs to load, but does so before the page has finished rendering is render-blocking. Rendering just means that the page becomes visible and is ready for interaction with menus and links. If the site is busy downloading a file before it begins to paint the picture of the final website, then that produces a poor user experience. Our attention span has become so short that even a load time of a few seconds can feel like an eternity.

Imagine you are preparing to bake a pie using a recipe. If the first step of that recipe says, “Refer to Chapter 2 for a basic pie crust,” then you must leave the recipe to go read the reference. While you are doing that, the recipe will not progress. But it may be a critical step to the finished product. If you skip the step you’ll have a pie tin full of filling. If you wait until the end of the recipe, you’ll have the crust sitting on top of the filling. So it’s not always guaranteed that render-blocking resources are unnecessary.

What can you do to mitigate the impact?

Evaluate each file that is being loaded. In many cases, the render-blocking files are not even used by the finished page. In this case, it’s an obvious benefit to remove the files. If you’re using WordPress, a lot of plugins will come with their own CSS style sheets or JavaScript files. Even if you deactivate a plugin, it may not remove all of the files from the page load. Determine which plugins can be removed, and deactivate and delete them.

In some cases, render-blocking content is absolutely necessary. In that case, all you can do is try to keep the number o files to a minimum. You can also “minimize” the files, which removes all white space, comments, and makes certain functions and loops use fewer characters. Reducing the kB size of the file will make it download faster.

You can also keep the files just as they are, but load them last. Moving certain file references from the header to the footer means the whole page will load first, and only after it is almost entirely finished will it load the footer. Depending on the file, this may be perfectly acceptable. Your page could take 20 seconds to fully load, but if all of the visual and interactive elements are available after 1 second, then your load speeds are good.

Check out the blog on Measuring load speeds with Google PageSpeed Insights to see if render-blocking resources are a problem for your site. Faster load speeds can not only delight your users, but can have indirect benefits like better SEO ranking.