How to eliminate render-blocking resources

Web pages cannot be displayed until critical static files, including fonts, HTML, CSS and JavaScript files, are processed. When the browser encounters one of these files, it stops downloading the rest of the files until they are finished. As a result, the entire rendering process is halted until these critical files are processed. 

Are render-blocking resources slowing down your page and affecting user experience? Learn how to identify and address these problems.

What is critical rendering path?

Every phase of rendering a web page, from the moment the browser begins receiving data to the moment the page is fully rendered, is referred to as the critical rendering path.

• The critical rendering path should be optimized to get to your first paint as quickly as possible. The goal is to reduce the time users spend looking at a white blank screen and display visual content as quickly as possible.

Optimizing it right can reduce the rendering time required for this process to just a few milliseconds. Make sure to optimize for rendering performance on as many different devices as possible.

The developer guide documentation from Google covers the critical rendering path optimization process, but I will focus on one powerful method in particular: reducing render-blocking resources.

What is the critical path for rendering?

When a browser requests a page, it must convert HTML, CSS and JavaScript into visual pixels. This process is defined as the critical rendering path.

Before any visual content is rendered, the browser must request, receive and parse all HTML and CSS files (plus some extra work).

The browser completes these steps within a fraction of a second (in most cases). The user will view a blank white page until the browser completes these steps.

Users may experience how a page loads depending on the page load process phases.

A visualization of how a page loads over time.

Improving the critical rendering path can improve the overall page experience, which can in turn improve performance on Core Web Vitals metrics.

How to optimize the critical rendering path

The critical rendering path can be improved by analyzing your render-blocking resources. If render-blocking resources are present on the page when it is first rendered, they may block the Core Web Vitals and negatively impact your scores.

The optimization process is as follows:

• Reducing the number of resources that are critical to the rendering path. This can be achieved by utilizing the defer method when possible.
• Prioritizing content that is above the fold and downloading important media assets as early as possible.
• Compressing the remaining critical resources.

Slow website loading can hurt your SEO results 

According to Google’s user behavior data, most users quit a slow website after 3 seconds.

Google says three Core Web Vitals metrics (LCP, FID and CLS), along with their associated thresholds, will now be linked to desktop ranking. Google is also developing a fresh Core Web Vitals statistic, which considers the longest event duration and the total number of events.

Google provided an explanation of the factors they are considering:

• The longest single event duration in the interaction group defines the maximum event duration. The total event duration is the sum of all event durations, ignoring any overlap.
• Numerous organizations have made reducing site latency a top priority, as a result of studies linking it to improved KPIs (conversions, bounce rates, time on site).
• SEOs are well positioned to help drive this optimization initiative because their job is to connect business objectives with web developers’ priorities.
• The ability to audit a site, analyze its results and identify areas for improvement helps SEOs work with developers to improve performance and communicate results to key stakeholders.

The purpose of optimizing render-blocking resources

Speeding up the critical rendering path ensures that crucial, above-the-fold content is loaded as quickly as possible. When a page doesn’t load fast enough, it’s usually because of resource bottlenecks. All resources that are preventing the page from quickly rendering must be deprioritized.

A Core Web Vitals score improvement is achieved through page speed and user experience optimization.

Why should you care about improving render-blocking CSS?

Coding is not crucial for ranking, as Google has said many times. However, optimizing page speed can potentially provide ranking benefits because it improves user experience.

CSS files are considered to be render-blocking resources. Despite taking place in a fraction of a second (usually), the browser cannot begin rendering any page content until it requests, receives and handles all CSS styles. A browser that fails to properly style content just displays a list of plain text and links. Having no content on your page is what’s referred to as being naked.

A page that is stripped of CSS styles would be completely unusable. To make the content look at least a bit palatable for a user, the majority of the content must be repainted. Loading these resources could take between a millisecond and several seconds, depending on how long your server needs to wait in order to load them. The amount and size of these CSS files can also vary, which may depend on their quantity and size.

A look at the render tree reveals the browser rendering all the files along with CSS within the DOM:

• Because by default CSS is a render-blocking resource, it makes sense to improve CSS until it has no negative impact on page rendering.
• CSS is a delay-inducing resource that should be delivered to the client as soon as possible to improve first-load times.
• The browser must be able to work with the HTML, which must first be converted into the DOM. Similarly, CSS files are converted into the CSSOM.
• CSS files that are optimized within the DOM and CSSOM decrease the time a browser takes to render everything, which greatly enhances the overall page experience.

A screenshot from Lighthouse showing a page optimized for performance.

Is it worth improving the performance of render-blocking JavaScript?

There isn’t a need to always load JavaScript. A page can be fully rendered without downloading and parsing all the JavaScript resources. Even though Javascript isn’t a required part of the page rendering process, modern websites are developed in a way that JavaScript (for example, the Bootstrap JS framework) is required to provide an optimal user experience.

In the event that JavaScript files are discovered prior to the first page render, the rendering process can be halted until later, after the JavaScript has finished executing. Deferring JavaScript files for later use is recommended when possible.

In case there are JavaScript functions like an alert built into the HTML, page rendering may be delayed until after the execution of this JavaScript code. Parsing and executing JavaScript might be delayed because it can modify both HTML and CSS styles, altering the entire page content. This is a delay built into the browser by default.

Blocking DOM construction and delaying page rendering can also be achieved using JavaScript. To provide the best performance, remove any superfluous JavaScript from the critical rendering path.

How to find and fix render-blocking resources 

The first step is to identify the critical rendering path and analyze critical resources:

A screenshot of WebPageTest showing the render start.

Before the green “start render” line, look for CSS or JavaScript files that are requested but are not critical for loading above-the-fold content. Test removing a (potentially) render-blocking resource after identifying it to see if above-the-fold content is affected. It’s still a smart idea to check how the site functions without these scripts, even if they are critical.

Besides improving such resources, there are other ways to improve page performance. You may wish to consider combining non-critical JavaScript files and placing them at the end of your page.

Non-critical CSS files can be combined into one file and compressed to reduce the number of CSS files you have. Your coding techniques can also improve the performance of your file, resulting in a file that downloads faster and has a less negative impact on page rendering.

Methods to reduce the number of render-blocking elements on a page

When you have determined that a render-blocking resource is not critical for displaying content above the fold, you can consider a variety of ways to speed up the page load time and delay less important resources.

There are a number of approaches to tackling this issue, ranging from delaying JavaScript and CSS files to lowering CSS impact.

Here are my 4 favorite methods to reduce render-blocking elements on a page:

1. Avoid including CSS using the @import rule

Using @import to include CSS files in your HTML file can help keep things organized. However, it can also have adverse effects on performance.

An @import declaration will slow down the browser by requiring it to process all of the CSS files. The entire rendering process will be blocked until it is finished.

The best approach is to follow the standard procedure of including a CSS stylesheet using the link tag in HTML.

2. Minifying CSS and JavaScript files can help save on file size and load times

A plugin can be used to minify your CSS and JavaScript files can have a significant impact on WordPress if you are using it. If you are not using WordPress, you can still utilize the services of a qualified developer to complete the process manually.

Minification removes all the unnecessary spaces within a file, resulting in a smaller file and a small performance boost. Rendering is completed much faster because minified files are much lighter than their original counterparts. Besides reducing the size of the files, minification also shrinks the size of non-render blocking resources, resulting in faster downloads.

3. Rather than using third-party fonts, use the system fonts

Having lots of fonts on a site might make it appear prettier to the brand team’s overwhelming joy, but at the cost of potentially longer load times and lost leads. Fonts that are provided by third parties may appear attractive, but they can slow down your site and contribute to your file-size issue. Having to download external files to render your page may significantly increase download times because the browser must make external requests to obtain them.

Look for any unnecessary font files that are loaded but not used. Your Core Web Vitals can be significantly improved by removing all these unnecessary files. Using system fonts rather than requesting external fonts keeps processing to a minimum. There may also be system fonts very similar to the third-party fonts you are using.

4. Become a better coder by combining files

Using inline CSS everywhere causes processing and rendering issues within the browser. Be sure to move inline CSS to the external CSS stylesheet file to achieve better performance.

Major issues with page rendering can arise if another developer’s code is not up to par. An example of this would be if you have a page that is coded using older techniques rather than modern and leaner ones. Older techniques might result in significant code bloat, contributing to a slower page load time. You can eliminate this problem by creating leaner and less bloated code, resulting in a better page rendering experience.

It is also possible to improve your code by combining files. To further reduce page rendering issues, you can defer less important JavaScript files by including them at the end of the HTML code on the page.

Key takeaways 

Finding solutions to reduce render-blocking resources has been an SEO audit staple for a while.

Here are the top reasons: 

1. Reducing render-blocking resources on your site makes it faster. You can take advantage of elements that will play into Google’s overall page experience and minimize the number of resources required to render the page.
2. Google Core Web Vitals metrics can also provide you with hints to boost the performance of your pages — for instance, if JavaScript is hampering the performance of your pages.
3. It’s always a good practice to stay current on Core Web Vitals metrics, as new ones are introduced often.
4. You also keep your website visitors happy by locating and fixing render-blocking resources, ensuring that your website is always in top shape to maximize conversion potential.

If you need help improving your B2B website’s loading time, get in touch with our team. We can optimize your source code for SEO for increased search visibility.

Jason Safavi

Jason Safavi is an experienced technologist with a passion for innovative software development. With over 18 years of experience in the field, he has established himself as an expert in advanced website builds and machine learning. As our company's Chief Technology Officer, Jason leads the development of cutting-edge software solutions that help drive business growth and improve our clients' experiences. He has an exceptional ability to identify new and emerging technologies and adapt them to meet our clients' evolving needs. Jason is a strong advocate of continuous learning and encourages his team to stay up-to-date with the latest trends and best practices in software development. He is always exploring new web and software technologies, experimenting with new programming languages, and testing new tools and frameworks to see how they can be used to improve our products and services. Aside from his passion for technology, Jason is also an avid gamer. He enjoys playing games on his PS5, and we often joke about him constantly losing in Mortal Kombat matches.