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?
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 will first download the image
- The browser downloads the CSS file and reads it to make sure nothing else is being called
- The browser can finally display the web page
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.
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
@importmethod 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
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.
<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.
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.
- Web Designers No Longer Need to Sacrifice Performance for Beauty
- Are Google’s Core Web Vitals Metrics Unreasonable?
- Avoiding ‘Wasteful’ CSS in Your Projects
- My Approach to On-Page SEO in 2019
- Why You Need to Prioritize PageSpeed in Discussions with Clients
- Lazy Loading for Optimal Performance
- Website Speed Part 4 : PHP Programming for Speed
- Website Speed Part 2: Working With and Optimizing Images for the Web
- In Web Design, Easier Doesn’t Always Mean Better
- The Challenge of Designing Websites for Large Screens