What Are Render-Blocking Resources & How to Fix Render Blocking Issues

Render-blocking resources are one of the most common reasons for slow loading websites. And if your website is not fast enough, not only are you hurting your visitors’ user experience, but your search engine rank as well. The bad news is, if your website is slow, you are losing customers and revenue.

However, there’s also good news – you can improve your website speed by eliminating render-blocking resources. In this article, we’ll explain how render-blocking resources impact your loading times and show you how to fix them.

What Are Render-Blocking Resources?

The most common render-blocking resources are JavaScript and CSS files that are located in the head of your web page. They load in above the fold area (or the area that you normally see on a website before scrolling down to see the rest of the content) and are a part of the critical rendering path used by a web browser.

In layman’s terms, that means that certain events need to happen in order for your browser to properly display (render) the initial view of any web page. Here’s an example of how a basic rendering path works:

• The browser downloads a web page that consists of an HTML file which holds the structure of the web page
• The browser then reads the HTML and notices 3 additional files: a css file, a javascript file, and an image
• The browser will first download the image
• The browser then realizes it can’t continue displaying the page without grabbing the CSS and JavaScript
• The browser downloads the CSS file and reads it to make sure nothing else is being called
• The browser downloads the JavaScript file and reads it to make sure nothing else is being called
• The browser can finally display the web page

While the browser is busy loading and reading each of the CSS and JavaScript files, your visitors are staring at a blank screen, waiting for your site to load. If you’re using a CMS like WordPress, your browser can be busy for quite a while because it will have to load not only the style and script files of your theme, but the script and style files that come with WordPress itself as well as those that come with all the plugins and widgets that you’re using.

When it comes to optimizing your website speed, the first task on your list should be reducing the time it takes for your users to be able to view and interact with your content. The easiest way to do that is to optimize your critical rendering path.

How to Fix Render Blocking Issues

Now that you know what causes render-blocking issues and how they impact the speed of your site, let’s talk about how to fix those issues.

Render-Blocking CSS

There are three ways to fix render-blocking CSS issues:

• Properly call your CSS files – your CSS file should be linked in your HTML file like so: <link rel="style.css" href=“style.css"> instead of relying on using the @import method. The @import method will usually be near the top of your regular stylesheet and cause the browser to go back and find the imported file before it can read the rest of the CSS file and result in an even bigger delay when it comes to rendering your web page
• Lessen the number of CSS files in the critical path – if at all possible, combine all the different CSS files into one and remove the call to those files from your HTML

Render-Blocking JavaScript

To remove render-blocking JavaScript, you need to know how many JavaScript files are loaded and where are they called in your HTML. A good way to find this out is to use Google PageSpeed Insights tool. When Australian-based cleaning company, This Is Neat Cleaning, was building their website, they used Google’s PageSpeed Insights as their benchmark, testing various scenarios to find out exactly what they needed for both mobile and desktop.

It was evident from testing, that inserting the majority of scripts at the bottom of HTML files, produced the best results. The major reason being that moving scripts to the bottom of the page removed render blocking javascript from stalling the user experience. With critical CSS still being loaded above the fold, the user could still fundamentally use the site, while interactions and functionality were still being loaded in the background.

Using a Plugin

Of course, as with anything WordPress related, you can use a plugin to fix render blocking issues. With over a million total active installations, it was a no-brainer that This is Neat Cleaning would use W3 Total Cache for caching, minifying, and performance optimization.

Here’s how you can use W3 Total Cache to fix render-blocking issues.

In your WordPress dashboard, go to Performance > Settings and scroll down to the Minify section. Check the box that says Enable and then elect Manual from the dropdown menu next to minify mode. Save settings. You’ll then need to add all the scripts and styles that you want to minify.

To find out where the scripts and stylesheets that are render-blocking are located, go to the Google Page Speed Insights Tool and analyze your website. Then, look at the suggestions tab and find the section that reads: Eliminate render-blocking JavaScript and CSS in above-the-fold content. Click on Show how to fix and select and copy the URL of the file.

Go back to your WordPress dashboard and navigate to W3 Total Cache > Performance > Minify. Scroll down to the JavaScript section and under Operations in areas make sure the embed type is set to Non-blocking using defer for the <head> section. Then, click the Add script button and paste the URL you copied from the Google PageSpeed tool.

Once you’ve added all the script files, scroll down to the CSS section, click Add a stylesheet and add the URLs of the stylesheet files copied over from Google PageSpeed Insights.

When you’re done, click the Save settings and purge cache button.

Final Thoughts

Render-blocking resources can cause havoc when it comes to website speed. Luckily, there are a few ways to fix those issues so use the tips provided here to improve the speed of your website and ensure your visitors have the best possible user experience.

The post What Are Render-Blocking Resources & How to Fix Render Blocking Issues appeared first on Speckyboy Web Design Magazine.