If you’re a WordPress user, I strongly recommend making website performance a priority. By delivering fast-loading pages to visitors, you will improve your search engine rankings, increase website traffic and give readers a great user experience.

A key part of optimising a website is analysing web pages using performance benchmarking tools such as Google PageSpeed Insights, GTmetrix and Pingdom Website Speed Test. These services will rate the performance of a URL, confirm the size of the page and confirm how long it takes the page to load.

Performance benchmarking tools do not just analyse your web pages, they also show what needs to be addressed in order to improve page loading times. For example, you may be advised to remove unused CSS code or reduce the weight of images on your website.

One recommendation that you will frequently see is to Eliminate render-blocking resources in WordPress. In this article, I will explain what render-blocking resources in WordPress are and show how you can improve your website’s page loading times by removing them.

What are Render-Blocking Resources in WordPress?

Website optimisation is all about delivering your website pages to visitors in the quickest possible time. A typical page contains many different elements.

Structure & Design	Constructed using HTML and CSS
Content	Text and images
Dynamic Content	Dynamic content such as video and sliders are displayed using Javascript

When someone visits a page on your website, their browser will process the page’s code from top to bottom. This is commonly referred to as “Rendering the Page“.

If the browser encounters calls to external CSS or Javascript files, it needs to stop rendering the page and download these CSS and Javascript files before they can be processed. These resources are therefore considered “Render-Blocking” as they are stopping the page rendering process.

Render-blocking resources increase the time it takes the browser to show the primary content to the user, which is an important performance and search engine ranking metric that Google calls First Meaningful Paint (FMP).

Be aware that text and images are not render-blocking and not all CSS and Javascript files are render-blocking either. It tends to be larger CSS and Javascript files that slow down page rendering.

How to Identify Render-Blocking Resources on WordPress

Render-blocking resources on WordPress can be identified easily using performance benchmarking tools. All you have to do is enter the URL of the page you want to test.

Google PageSpeed Insights highlights the total time that render-blocking resources add to the first paint of your page. Underneath you will see a breakdown that shows the URL of each render-blocking resource and the size of the file. It also shows how much quicker your page could load if the render-blocking resource is eliminated.

GTmetrix also lists each render-blocking resource, the size of the file and the time it takes to download the file.

Although the Pingdom Website Speed Test does not have a specific section that highlights render-blocking resources, you can see what is causing pages to slow down from the “File Requests” area.

It will highlight render-blocking resources such as icons, fonts and Javascript files. The file URL, file size and download time is displayed for each resource. The file requests area is also useful for seeing which images are increasing page loading times.

As WordPress calls different CSS and Javascript files across your website, it is important to run performance tests for multiple pages so that all render-blocking resources are detected. For example, you could run performance tests for key areas of your website such as your home page, blog index, blog post, about page and contact page.

Identifying Critical Resources

A resource is deemed critical if it is required to display the first paint of a web page. All other resources are deemed non-critical.

One of the easiest ways to identify critical resources is to use the Coverage tab in Chrome DevTools. It highlights exactly what percentage of files were necessary to display the initial page load correctly. Critical styling is displayed in green, whilst non-critical styling is displayed in red.

In the screenshot below, you can see that on WordPress.org, a large percentage of code in render-blocking CSS and Javascript files is not being utilised. This situation is worse on many WordPress websites, with the coverage test highlighting several files where 100% of each file is unused.

Eliminating Render-Blocking CSS in WordPress Using Inline Calls

Google recommends moving all critical code from render-blocking resources to an inline call from your HTML page. Styling that is critical to the first paint of a page can be defined using a style block within the head section of your page, whereas critical Javascript functions can be called inline within your page using Script tags.

On a dynamic platform such as WordPress where CSS and Javascript code is added to a website through themes and plugins, it may be impractical to move critical styling manually. As such, many WordPress users use services such as NitroPack and Critical CSS so that critical stylesheets are extracted automatically and displayed inline within the head section.

If website styling is located in small CSS files, you can use the performance WordPress plugin Asset Cleanup to automatically inline styling from small stylesheets.

Remove Render-Blocking Javascript in WordPress Using Async & Defer

Render-blocking Javascript resources in WordPress can be eliminated using two techniques called Async and Defer. Both methods allow the browser to continue rendering the page whilst render-blocking CSS and Javascript files in above-the-fold content in wordpress are downloaded in the background.

It may be preferable to use Async or Defer on a page so it is important to test both and see which technique provides the best results. You will, however, see a reduction in page loading times whichever method you use.

Async	Download files as the page is being rendered and execute files as soon as they are available
Defer	Download files as the page is being rendered and execute files in sequential order once the page has finished rendering

Async and Defer can be applied throughout your whole website using a WordPress performance plugin.

On my personal blog, I use the plugin Async JavaScript to defer Javascript on pages. Developed by Autoptimize creator Frank Goossens, Async Javascript lets you apply Async and Defer to non-critical Javascript files and gives you the option of applying different settings to JQuery files.

The plugin’s setup wizard will run multiple tests on GTmetrix in order to determine the best settings for your website.

I chose Async JavaScript as it automatically applies Async or Defer throughout my website. This is undoubtedly the simplest approach to eliminating render-blocking resources in WordPress, but you may see better results with the WordPress plugin HTTP/2 Push Preload.

Once you have identified render-blocking resources on your WordPress website using Chrome’s coverage tool or a performance benchmarking service such as GTmetrix or Google PageSpeed Insights, you can apply Async and Defer using HTTP/2 Push Preload on a file by file basis.

If you’re willing to test the performance of Async and Defer for each file, you will be able to find the best technique for each resource. This can lead to a greater reduction in page loading times.

Whichever WordPress plugin you use to apply Async and Defer, be sure to check your website design afterwards to ensure nothing has broken.

For a more comprehensive overview of this subject, please read my article “How to Defer Parsing of Javascript in WordPress Using Defer and Async“.

Final Thoughts

Render-Blocking Resources in WordPress greatly increase page loading times. They also affect the user experience of your website as visitors will see a blank page until all render-blocking resources have been downloaded and executed.

Chrome’s coverage tool and services such as Google PageSpeed Insights and GTmetrix make it easy to identify render-blocking resources. You can then eliminate render-blocking resources using WordPress plugins such as Async JavaScript and HTTP/2 Push Preload.

Thanks for reading.

Kevin