How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript) – Kinsta Managed WordPress Hosting

How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript) - Kinsta Managed WordPress Hosting

If you’ve ever run your WordPress site through Google PageSpeed Insights, Google has probably told you that you need to eliminate render-blocking resources on your WordPress site. In fact, that might be why you’re reading this very post right now.

That probably poses two questions in your mind:

  1. What are render-blocking resources in the first place?
  2. How can you eliminate render-blocking resources on WordPress?

In this post, we’re going to answer both questions for you. Here’s everything that we’ll cover in this post:

What Does “Eliminate Render-Blocking Resources” Mean?

In order to understand what render-blocking resources are and why they hurt your site’s load times, we need to start with a basic look at how a web browser renders a web page.

When a visitor lands on your site, their web browser basically starts at the top of your site’s code and reads down. Top-to-bottom, got it?

If in that process, it encounters a CSS or JavaScript file, it needs to stop “reading” while it waits to download and process that file. The time that it spends “paused” to download and parse those resources could be spent on something much more productive, like loading the part of your website’s content that’s immediately visible when someone lands on the page.

Let’s look at an extreme example to show why this can be an issue.

Let’s say that you have this cool JavaScript effect in your site’s footer. It’s powered by “coolfooter.js”, which is a script that’s referenced at the top of your site’s code (even though the effect is in the footer, so visitors won’t see it until they scroll to the footer).

So a very rough layout for your site’s code might be something like:

  • Header meta
  • Coolfooter.js
  • HTML for your above-the-fold content. This is all the content that a visitor sees right away (before they start interacting with the page)

And here’s why this is a problem:

When a visitor lands on your site, their browser starts reading from top-to-bottom. So before it can parse and render the HTML for the above-the-fold content on your site, it needs to wait to download and parse the coolfooter.js file.

End result? It takes longer to display the HTML for the above-the-fold content, which means that your visitors will perceive your site as being slower.

When Google tells you to eliminate render-blocking resources, it’s essentially saying, “hey, don’t load unnecessary resources at the top of your site’s code because it’s going to make it take longer for visitors’ browsers to download the visible part of your content”.

With the tips in this post, you’ll be able to wait to load certain CSS and JavaScript resources until the visible part of your page has already loaded.

What are Render-Blocking Resources?

When referring to render-blocking resources, we’re

[…]

 



This article was written by Jon Penland and originally published on Blog – Kinsta Managed WordPress Hosting.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top