Improve WordPress speed: How to remove resources blocking rendering

If you have used Google’s PageSpeed Insights to analyze the performance of your WordPress website, you may have come across the recommendation to “remove resources that block rendering”. This suggestion is key to improving the loading speed and user experience on your website. Below, I’ll explain what this recommendation means and how you can effectively fix this problem.

What does “Remove resources that block rendering” mean?

Render-blocking resources are files that the browser must load and process before it can display page content to the user. These resources typically include CSS and JavaScript files. When these files are not handled properly, they can significantly delay the time it takes for a page to become interactive, affecting the user experience and site performance metrics.

How to know which resources are blocking rendering

To identify the resources that are blocking rendering on your website, you can use tools such as Google PageSpeed Insights, Lighthouse or the performance dashboard in your browser’s developer tools. These tools will provide you with a detailed list of the resources that are causing the problem and offer specific recommendations to fix it.

Types of render-blocking resources

1. CSS files: Browsers must load and process all CSS files before they can render any part of the Web page.
2. JavaScript files: Although JavaScript files do not always block rendering, they can do so if they are loaded synchronously and before the main page content.

Troubleshooting resources that block rendering

To fix the problem of resources blocking rendering in WordPress, you can follow these steps:

1. Minimize and merge CSS and JavaScript files: Reduce the number of HTTP requests and file size by combining and minimizing CSS and JavaScript.
2. Load CSS asynchronously: Load CSS files asynchronously or deferred to prevent them from blocking rendering.
3. Load JavaScript deferred: Use the defer or async attributes to load JavaScript deferred so as not to block initial rendering.
4. Remove unused CSS: Tools such as PurifyCSS or specific functions in optimization plugins can help you remove unused CSS.
5. Use system fonts or load fonts efficiently: Use system fonts or apply font-display: swap so that text is visible while fonts are loading.

Plugins to optimize resources that block rendering

1. Autoptimize.
   • Install and activate the Autoptimize plugin.
   • Go to Settings > Autoptimize.
   • Check the options to optimize JavaScript code, optimize CSS code and optimize HTML code.
   • Save the changes.
2. WP Rocket.
   • Install and activate the WP Rocket plugin.
   • Go to settings > WP Rocket.
   • On the file optimization tab, enable the options to minify CSS files, minify JavaScript files, merge CSS files and merge JavaScript files.
   • On the media tab, enable the option to deferred load JavaScript.
   • Save changes
3. W3 Total Cache.
   • Install and activate the W3 Total Cache plugin.
   • Go to performance > general settings.
   • Enable minification of HTML, CSS and JavaScript.
   • Save changes

Conclusion

Eliminating resources that block rendering is crucial to improve the loading speed and user experience on your WordPress website. Using analytics tools and optimization plugins, you can identify and fix these issues efficiently. Implement the recommendations and watch your website become faster and more efficient, improving both performance metrics and user satisfaction.

In addition, to ensure that your site not only loads fast, but is also visible in search engines, it is essential to have a good SEO strategy. I recommend exploring the 5 best SEO plugins for WordPress, which can help you improve the visibility and overall performance of your site. Implementing both performance optimizations and SEO strategies will allow you to offer an exceptional user experience and achieve better search engine results.