⛔ to render blocking ????????. Let's fix this.
In this article, we'll discuss what render blocking resources are and how to fix them. Addressing this is one of the best things to do to directly improve your Google PageSpeed Report, website speed, and SEO rankings.
Here's what Google has to say about render blocking resources in their PageSpeed Report:
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.
There are a number of WordPress plugins that can help you inline critical assets or defer less important resources. Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.
On a WordPress site, typical render blocking resources are
Here's an example. Say your basic website consisted of the following bunch of code:
The browse loads the head, stops to download and process the base CSS, then the CSS and JS for the footer, then loads Section 1, and finally the footer.
Notice the issue? The browser is loading CSS and JS for the footer, which isn't "immediately visible" to the user before Section One. In most cases, the footer doesn't need to need to be viewed immediately: it'll be out of the range of the initial viewport. So there's no point in loading this CS and JS, because it stops the browser from rendering for something visitors won't immediately see.
That's known as a render blocking resource, and is one of the leading causes of a slow WordPress website.
By eliminating these render blocking resources, you can drastically speed up the loading time of your webpage. In the example below, this site can save about 1 1/5th of a second by addressing this.
For such a major problem, it's pretty easy to fix. We simply need to move the render blocking code & files lower, so the browser loads the visible content first.
In this section, we'll introduce the actual mechanics behind the strategies used to fix render-blocking resources. Unless you're a frontend developer, you don't need to do any of this (plugins do it automatically), but it's a good idea to understand how everything works. If you don't want to, simply skip to the next section.
First, understand that there's some CSS and JS that are needed to load your page. If you move these essential scripts and styling, your site might break. Luckily, Google Page Speed (usually) tells you which can be moved (and the plugins that you'll use to optimize this site will do this automatically).
For CSS, there are a few things to do, depending on when and where it's needed.
For CSS required immediately (typically this pertains to styles that apply to HTML elements that load in the initial viewport), it's best to inline it. Here's an example of inline CSS:
<p style="color: blue;">This is a paragraph.</p>
For CSS stylesheets/styles that are conditional (the most common application of this are different styles for different screen sizes, also known as responsive design), call this in the head using the link attribute.
<link rel="stylesheet" type="text/css" href="theme.css">
All other CSS should be loaded asynchronously (async), a concept that we'll introduce further in the next section. You can load it by including an onload attribute:
<link rel="stylesheet" href="theme.css" media="print" onload="this.media='all'">
Here are some graphics that visually represent both Asynchronous and Deferred loading of JS:
These graphics were sourced from BitsOfCo.
How do you actually implement the loading styles? It's just a simple addition to your existing code:
<script [defer]OR[async] src="script.js">
There's no "best" choice for loading style -- everything really depends on your situation.
Also -- You can also move the script in the actual HTML source of the page. For example, scripts essential to the page are typically loaded in the header, while scripts that are needed, but not immediately are loaded in the footer.
Now that you understand how to fix this, here's some good news. With WordPress, there are dozens of plugins that automatically implement the fixes mentioned above, while determining which strategy is best for your specific website. All you need to do is install, configure, and run it.
WordPress has some amazing plugins (both free and paid) that can address your PageSpeed issues - specifically render blocking resources. We'll list some plugins that we use (both with SpeedOpp and designing custom websites with Isotropic, our parent company and digital agency) here to point you in the right direction. You can browse our blog to see tutorials regarding the implementation and setup of some of them.
There are many, many more that can be found by searching Google or WordPress.org for caching and render-blocking optimization plugins.
Plugins may fall short in some regards. For example, some scripts cannot be altered. This is especially true with scripts and styling files that are required by your WordPress theme. If the plugin doesn't recognize your websites dependency on these assets, it could unknowingly have them load later then needed, resulting in a broken frontend (don't worry, this can be undone).
In some cases, it's best to go into the actual HTML of the webpage, identify every file that may block website rendering and determine if it should be addressed or left. If it should be addressed, you should then figure out which strategy is best (keeping in mind its own dependencies, dependencies from the website, and a host of other conditions, which we mentioned in the prior section).
If your WordPress website breaks everytime you attempt to fix render blocking resources, it's likely due to the plugin being unable to understand the importance of a script/css file.
That's where SpeedOpp comes in. We address every single PageSpeed opportunity (including render blocking resources) by manually reviewing and auditing your site, determining the best course of action, and implementing tried-and-true strategies. Basically, we'll do everything that's mentioned in this post and more, professionally and quickly. If we don't boost your PageSpeed score, you get your money back.
It's a completely personalized service that is tailored to the requirements of your individual website. Boosting the speed of your website increases SEO, lowers bounce rates, and leads to more conversions. If you’re looking for a low cost, high impact way to bolster your digital appearance, consider SpeedOpp.