How to Eliminate Render Blocking Resources

on 31 Aug 2023, by Bogdan, in Blog, WordPress, Cloud, Guides

by Bogdan

Render-blocking resources are critical to the performance of your website and its infrastructure when it’s live. Removing them can supercharge your website's performance by speeding up page loading times, enhancing user interaction, stabilizing the site, boosting its SEO, and improving other core web vitals.

In this article, we’ll show you six methods to eliminate render-blocking resources and take your website to the next level. We’ll cover the following:

What render-blocking resources are
Types of render-blocking resources
How to eliminate render-blocking resources from your website, and
The benefits of eliminating render-blocking resources.

Let’s get started right now.

What are render-blocking resources?

Render-blocking resources are site files, usually CSS and JavaScript, that prevent your web page’s content from loading quickly.

For starters, when a browser encounters these render-blocking resources, it temporarily stops loading the rest of your page until the browser processes these files. This pause puts the display of your web page on hold, leaving your site visitors staring at a blank page or a sparsely populated web page.

If you don’t fix this issue quickly, you might lose site visitors before they can get to see your page. We definitely don't want this for you. So, keep reading to find out how to get rid of these files.

What are render-blocking resources?

Normally, the browser regards everything in the <head> section of the HTML page as render blocking. These files include:

CSS stylesheets.
JavaScript files. These are <script> tags added in the <head> section.
Imported fonts such as Google Fonts, Adobe Fonts, MyFonts, AdobeFF Market, Monotype fonts and a lot more. Overdoing it may slow down your site.
Imported HTML, although by now, HTML imports are obsolete.

Other examples of render-blocking resources include:

Large and unnecessary media files (that are placed within the initial viewport),
Code bloats such as unused code, copy-pasted code, unused features, etc. (If you come across these files, just remove them.)
Unnecessary (additional) plug-in files,
Inline scripts and styles are render-blocking files as they're normally processed before the rest of the page content, and much more.

Usually, these resources take too long to load slowing down your site. First, let’s take a closer look at the rendering path that we’ll improve when we get rid of render-blocking resources.

What is the critical rendering path?

The critical rendering path is like a step-by-step guide that your browser follows to display your page. This involves the browser requesting files such as HTML files, stylesheets, scripts, and embedded images needed to display your web page properly. Some of these files might slow down this process. These files are the render-blocking resources we talked about earlier.

Once all the render-blocking files are dealt with, the browser continues parsing the rest of your HTML files until it’s all done. After that, the browser organizes how your page should look (with some additional work). When this whole process is finished, your web page is painted on the screen as illustrated below.

(source: DBS Interactive)

Normally, this process should only take a few milliseconds if it’s optimized properly. In fact, Google suggests that your web page should load within the first 2 seconds. Our aim is to assist you improve your site’s performance by removing render-blocking resources that cause your page to load slowly.

How to eliminate render-blocking resources

In this section, we’ll provide you with some best practices you can follow to remove render-blocking resources effortlessly and improve your site’s performance.

1: Identify specific render-blocking resources on your website

Before you can decide what to do with render-blocking resources on your website, the first step is to identify them. The most efficient approach is to analyze your website using performance analysis tools like Google PageSpeed Insights.

Other notable options are Lighthouse, which is now part of Chrome DevTools, as well as GTmetrix and webpagetest.org. Both PageSpeed Insights and GTmetrix utilize the Lighthouse library, providing free web applications for evaluating page speed, Core Web Vitals, and other performance metrics.

To identify render-blocking files that are slowing your page, scroll down to Opportunities, then open the Eliminate render-blocking resources section.

It’s important that you pay attention to any files ending with the extensions .css and .js, as these are the ones you’ll want to focus on.

The next step you will take will be based entirely on your goals. If you've received a render-blocking resource warning, you should focus on eliminating these issues one by one. However, if you didn't receive such a warning, you can still apply some of the following techniques to improve your site’s speed.

2: Defer non-essential resources

Deferring non-essential resources means holding off on loading less important files on your website until the critical parts of your web page (the content visible without scrolling) have been shown.

This approach allows users to start interacting with your page sooner, while non-essential resources like third-party scripts, fonts, and images load in the background. This technique strikes a balance between delivering a responsive page and making sure that less important resources don't slow down the main user experience.

It's important to note that this approach has become more popular with the introduction of Core Web Vitals, as it improves the site's LCP scores (which measure the rendering time of the largest content element above the fold).

Tip: You can use online tools like the Critical Path CSS Generator or Addy Osmani's Critical Library to find critical CSS code automatically instead of doing it manually. These tools pull out the CSS rules that matter for the content visible above the fold.

3: Remove unused CSS and JavaScript

Tools like purifyCSS can analyze your CSS code to identify selectors that are not being used, allowing you to safely remove them. This even includes CSS code from third-party libraries like Bootstrap or Tailwind.

To further optimize, you can utilize Google Chrome's Coverage tab in the Chrome DevTools. This feature helps you see which CSS rules and JavaScript functions were used during a specific page load. You can then remove the ones that weren't used.

Popular content management systems such as WordPress also have clean-up plugins that let you remove your unused CSS and JavaScript automatically.

Tip: For JavaScript, it’s a good idea to manually review and consider code splitting. This approach ensures that only the necessary code is loaded for each specific page. Smaller code bundles, often considered non-essential resources, are lazy-loaded after the main webpage is rendered.

4: Minify CSS and JavaScript files

Next, let’s focus on minifying your CSS and JavaScript files. Minification helps you clean up your code, making it lighter. It involves removing unnecessary/extra elements in your scripts and stylesheets — parts that don’t affect your code’s proper functioning. This process optimizes your code and speeds up the critical rendering path.

(Source: atatus.com)

If you prefer manual minification, consider these steps:

Use shorter class and ID names where possible, while ensuring they still make sense for future maintenance.
If you have multiple CSS selectors with the same properties, combine them into a single rule to reduce redundancy.
Remove comments in the code, as they're not necessary for functionality.
Trim unnecessary spaces, line breaks, and indentation. Be cautious not to remove spaces that are essential for proper rendering.

Important: If you choose the manual route, always test your minified code to ensure it doesn't interfere with your website's design and functionality.

Alternatively, you can use online tools like Minify, Minify Code, PostCSS, and CSS Minifier for assistance. Additionally, tools like Webpack and Parcel come with built-in minification features to help you clean and optimize your code.

5: Use the defer and async attributes to load JavaScript files

The defer and async attributes are both used in the <script> tag to control how the browser handles JavaScript files within the <head> section of an HTML file.

The defer attribute instructs the browser to download the script while simultaneously parsing the HTML content. The deferred script only executes after the entire HTML file has been parsed. This ensures JavaScript doesn't block the display of your page. On the other hand, the async attribute allows the browser to download the script concurrently without blocking the ongoing HTML parsing.

Choosing between the defer and async attributes depends on the specific needs and the behavior you want to achieve for optimal page load performance and script execution. The defer attribute, for instance, is recommended when:

Your scripts need the DOM, but you want these script files to start downloading before the document loads.
The order of script execution is important, and you want the scripts to run in the order they appear on the HTML file.
You want to ensure that the script doesn't block the rendering of the page for fast page loads.

The async attribute is useful when you have third-party scripts that are hosted on a different domain, and you want to prevent them from blocking the page. Google Analytics, for example, often recommends adding the async attribute to support asynchronous loading in modern browsers.

6: Use CDNs (Content Delivery Networks) to speed your resource loading

CDNs don’t necessarily eliminate render-blocking resources per se. However, you can use them to improve page load speeds. CDNs excel at handling multiple requests simultaneously, allowing them to load multiple CSS and JavaScript in parallel from a server closest to the user. This significantly speeds up content delivery, regardless of the user’s location.

Besides, many CDNs enable browsers to continue rendering a page while quietly fetching non-critical resources in the background. Since CDNs cache resources in the browser, repeated downloads are reduced when users return to your site. This clever approach ensures that render-blocking resources don't stop the process of fetching preloaded resources.

The benefits of eliminating render-blocking resources

The benefits of eliminating render-blocking resources include:

Lightning-fast page loads – Clean, concise, and optimized code enhances the critical rendering path, resulting in instant page load times.
Enhanced SEO performance — By minimizing the resources needed to load your page, search engines like Google can crawl your site more efficiently. This optimization can lead to higher SEO rankings.
Optimized overall performance – Addressing issues related to code bloat and render-blocking resources makes your site lightweight, improving its overall performance. Your websites will be deployed faster across multiple ranges of platforms and devices. Besides, you will score well on other core web vitals.
Improved user experience – Most users expect a site to load within 3 seconds. Achieving this speed fosters better user engagement, leading to an enhanced experience with your website.

Conclusion

In this article, we’ve explored six methods to eliminate render-blocking resources. Following these strategies not only meet your user expectations but also provides a boost to your search engine rankings while significantly enhancing your site speed and site performance.

However, getting rid of stuff that slows your website is hard work, and there are even more tricks to uncover. If you’re looking to create blazingly fast and optimized websites with ease, look no further than Brizy.

Brizy is a no-code website builder that simplifies the challenging steps of optimizing a website to help you create fantastic websites that excel in all aspects of great websites. This page builder utilizes clean and efficient code that helps you build mobile-friendly, SEO-optimized sites with lightning-fast load speeds.

Article by Bogdan

Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io

Switch to Brizy Cloud and you will NOT have to manage most of the points above. It's all included by default.

Brizy Cloud is built with a focus on delivering fast-loading and responsive websites. The platform employs various techniques and coding practices to minimize loading times, reduce server requests, eliminate render blockers and optimize website assets, resulting in better overall performance. This is crucial as faster-loading websites enhance user experience, improve search engine rankings, and increase user engagement.

Also, you can learn how Brizy Cloud improves your Google Speed Insights score (and not only GSI) by reading this blog post here