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|
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“.
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).
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.
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.
Eliminating Render-Blocking CSS in WordPress Using Inline Calls
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.
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.
The plugin’s setup wizard will run multiple tests on GTmetrix in order to determine the best settings for your website.
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.
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.
Thanks for reading.