How to eliminate render-blocking resources
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?
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.
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.
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.
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.
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.
Finding solutions to reduce render-blocking resources has been an SEO audit staple for a while.
Here are the top reasons:
- 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.
- It’s always a good practice to stay current on Core Web Vitals metrics, as new ones are introduced often.
- 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.