Currently, there are 810 million websites using WordPressaccording a recent study by Colorlib. While that number is impressive, it doesn’t show any signs of slowing down.
That same study shows that 500 new sites are built on WordPress per day. To put it in perspective, this number compares to only 60-80 new sites per day for platforms like Squarespace and Shopify.
WordPress is popular for a reason. It is an easy to use platform that anyone can take advantage of to start a blog or business. Their plugin library also gives users almost unlimited functionality on their site. But this plugin library can also cause a problem.
Google is open about the fact that page speed is a critical ranking signal for SEO. This is because how quickly a page loads is directly related to the overall user experience.
Achieving acceptable page speed levels for Google may require some adjustments to the site. One such tweak that Google often requests is to remove the rendering block for JavaScript in WordPress.
Get fully managed WordPress hosting
Power your site with the most optimized WordPress hosting in the industry
Identifying Render Blocking Resources
The first step in learning how to remove render-blocking resources in WordPress is to identify what these resources are. The process is not difficult, but it does require the use of some website analytics tools.
Google Chrome DevTools offers three options for identifying render-blocking resources. Those three tools are:
In Lighthouse, your render-blocking resources will appear in the Opportunities tab, but only if these resources are causing problems on your site. When you select the Opportunities tab, you’ll see the flagged render-blocking resources, a brief description of the problem they caused, and a suggestion on how to fix it.
PageSpeed Insights and GTmetrix are platforms that use the Lighthouse library to measure various of Google’s ranking factors such as page speed, Core Web Vitals, etc. They will list “remove render-blocking resources” as one of the solutions for your site, but it may be listed as low priority.
Even though the platform may claim that the priority is low, it will still list the individual files that are causing the problem and provide you with a detailed solution.
Common processing blocking resources
Typically, in the WordPress world, the term “render blocking resources” refers to either JavaScript or CSS.
Not all CSS or JavaScript files block rendering, but both sources are responsible for most site speed issues. Additional processing block resources can be:
HTML ImportsCSS Style Sheets
HTML imports are not as popular anymore, but being aware of them is still important. They may still exist on many older websites, even though they are legacy technology.
How to remove render-blocking resources in WordPress
Now that we have a little background on why it’s important to remove render-blocking JavaScript in WordPress, let’s dive into the step-by-step process of speeding up a WordPress site.
Step 1: “Minimize” the CSS and JavaScript files
Reducing the number of CSS and JavaScript files running your website is the first step here. You can do this by reducing the amount of comments and unnecessary white space in your website’s code.
Step 2: Concatenate CSS and JavaScript
This process may sound more complex than it really is. All concatenation means combining appropriate .css and .js files to condense the amount of space they consume. There should only be a handful of files to concatenate into your website code, so it shouldn’t be too much to handle.
Step 3: Defer loading JavaScript
You can configure your JavaScript files to start after all other elements of your web pages. One of the more popular ways to do this is a more advanced topic that we’ll cover later called asynchronous loading.
These three steps complete the process of how to remove render-blocking JavaScript in WordPress without a plugin. The same steps also apply to CSS files.
Although these steps are simple enough, it can be challenging to do them manually in WordPress. This is due, in large part, to the nature of WordPress plugins. Each front-end plugin on your site can run several of its own CSS and JavaScript files.
WordPress provides a list that combines all your JavaScript and CSS files, via plugins, in one place. While this makes things easier, the easiest way to remove render-blocking resources is with a plugin.
Remove render-blocking CSS and JavaScript resources with WordPress plugins
WordPress plugins are great tools for providing all sorts of functionality to your site, especially in the world of eCommerce. But many of these plugins also offer solutions to technical website issues, such as page speed and removing resources that block rendering.
Here is a list of some popular plugins and tools you can use to remove render-blocking resources and give your site pages lightning speed.
1. Jetpack
Installing JetPack Boost on your site gives you all the tools you need to remove render-blocking resources and optimize your page speed. JetPack Boost includes toggle switches that allow you to easily enable CSS optimization and defer non-essential JavaScript directly from the plugin settings.
You’ll also be able to defer non-essential images which, while not render-blocking assets, can help with overall site speed. Additionally, JetPack Boost gives your website an overall score that you can monitor to see how changes impact your site.
2. JCH optimize
WordPress users will need to be a bit more tech-savvy for this plugin than most others, but it is useful for increasing page speed. JCH Optimize will increase speed by reducing the number of HTTP requests it takes to load your web pages.
The plugin also helps with optimize images for a WordPress site through its Sprite Generator. This feature combines larger images from the site into mini “sprites”, making it easier for your browser to load them.
Unfortunately, JHC Optimize requires a paid subscription but, at $29 per month, 10,000+ WordPress users feel it’s worth the money.
3. Speed Booster Pack
Features in this plugin help you remove clutter, optimize CSS, and enable “lazy loading” of website elements. The development team keeps the plugin up to date and even integrates with WooCommerce to help eCommerce users.
It may take a bit of “trial and error” to get the free plugin set up correctly, but don’t feel alone. One of the biggest advantages of the Speed Booster Pack is its support. The development team provides three handy, professional-level support packs to help you configure Speed Booster Pack to suit your site’s unique needs.
4. WP Rocket
WP Rocket provides several features to help remove render-blocking resources and optimize a WordPress site for speed. The plugin can help you:
Defer remote JavaScript queries Perform CSS and JavaScript minification Implement “lazy loading” for images
The plugin offers an easy setup process for WordPress, but some users may not like the changes you make to their WP dashboard. If you’re comfortable with the traditional WordPress setup, it might take a bit of getting used to. Regardless of the change in the interface, the plugin still offers many features and tools to remove render-blocking resources.
Running WP Rocket costs $49 per year for the core plugin. You can also add a handful of free extras from the WordPress plugin library.
4. Optimize automatically
Autoptimize has a unique way of condensing images to increase the speed of your site. The plugin does this by converting all images to the WebP format. In addition, Autoptimize provides all the basic render-blocking tools you can think of, like minifying CSS and JavaScript, as well as script caching capabilities. The Autoptimize plugin also works with the Asynchronous JavaScript Plugin.
The plugin is powered by PageSpeed Insights and works specifically to optimize for issues identified by that platform. Setting up Autoptimize can be a bit complex, but once users get used to the interface, they appreciate the features it offers.
You can buy two versions of this plugin: a custom setup version for $165 or an expert setup that comes with a professional review of your website for $667.
Advanced techniques to remove render-blocking resources
For people who want to go the extra mile and have more control over removing render-blocking resources on their WordPress site, there are a couple of manual methods you can implement.
Asynchronous and lazy loading for JavaScript and CSS files
As you add JavaScript to WordPress (or CSS), you can add an “async” or “defer” attribute within your website’s code. Assigning this flag to certain files causes your website to treat them as non-essential and tells your browser to process them separately from other critical files within the site.
To assign asynchronous loading to a particular script, add “