Currently, there are 810 million websites that use WordPress, according to a recent study by Colorlib. While that number is impressive, it doesn’t show any sign 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’s an easy-to-use platform anyone can leverage to start a blog or business. Its library of plugins also gives users near-limitless functionality on their site. But this library of plugins 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 fast a page takes to load ties directly to the overall user experience.
Reaching the acceptable page speed levels for Google may require some site adjustments. One of those adjustments Google typically requests is to remove render-blocking for JavaScript in WordPress.
Get fully managed WordPress hosting
Power your site with the industry's most optimized WordPress hosting
Identifying render-blocking resources
The first step in learning how to remove render-blocking resources in WordPress is identifying what these resources are. The process isn’t difficult, but it does require using some website analytics tools.
Google Chrome’s DevTools provides three options to identify render-blocking resources. Those three tools are:
In Lighthouse, your render-blocking resources will show up in the Opportunities tab, but only if these resources are causing issues on your site. When you select the Opportunities tab, you’ll see the render-blocking resources flagged, a brief description of the issue they’ve caused, and a suggestion on how to fix it.
PageSpeed Insights and GTmetrix are platforms that use Lighthouse’s library to measure several of Google’s ranking factors, like page speed, Core Web Vitals, etc. They will list “eliminate render-blocking resources” as one of the solutions to your site, but it may be listed as low priority.
Although the platform may claim priority is low, it will still list the individual files causing the issue and give you a detailed solution.
Common render-blocking resources
Typically, in the world of WordPress, the term “render-blocking resources” refers to JavaScript or CSS.
Not all CSS or JavaScript files are render-blocking, but both sources are responsible for most site speed issues. Additional render-blocking resources might be:
- HTML imports
- CSS stylesheets
HTML imports aren’t as popular anymore, but being aware of them is still important. They may still exist on many older websites even though they’re legacy technology.
How to remove render-blocking resources in WordPress
Now that we have a little background on why removing render-blocking JavaScript in WordPress is important, let’s dive into the step-by-step process to speed up a WordPress site.
Step 1: “Minify” CSS and JavaScript files
Reducing the amount of CSS and JavaScript files running your website is the first step here. You can do this by reducing the amount of unnecessary blank white space and comments in your website’s code.
Step 2: Concatenate CSS and JavaScript
This process may sound more complex than it actually is. All concatenating 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 in your website’s code, so it shouldn’t be too much to handle.
Step 3: Defer JavaScript loading
You can configure your JavaScript files to launch after all the other elements on your web pages. One of the popular ways to do this is a more advanced topic we’ll cover later called Asynchronous Loading.
These three steps round out the process of how to remove render-blocking JavaScript in WordPress without a plugin. The same steps apply to CSS files, as well.
Although these steps are simple enough, they can be a challenge to do manually in WordPress. This is due, in large part, to the nature of WordPress plugins. Each front-end plugin on your site may be running several of their own CSS and JavaScript files.
WordPress provides a list that combines all of your JavaScript and CSS files, across plugins, into one place. While this does make things easier, the easiest way to remove render-blocking resources is with a plugin.
Eliminating render-blocking CSS and JavaScript resources with WordPress plugins
WordPress plugins are excellent tools for providing all sorts of functionality to your site – especially within the world of ecommerce. But many of these plugins also offer solutions to technical website issues, like page speed and removing render-blocking resources.
Here’s a list of some popular plugins and tools you can use to eliminate 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 turn on CSS Optimization and defer non-essential JavaScript directly from the plugin settings.
You’ll also be able to defer non-essential images which, although they aren’t render-blocking resources, can help with overall site speed. Additionally, JetPack Boost gives your website an overall score you can monitor to see how changes impact your site.
2. JCH Optimize
WordPress users will need to be a little more tech-savvy for this plugin than most others, but it’s useful for increasing page speed. JCH Optimize will increase speed by reducing the number of HTTP requests it takes for your web pages to load.
The plugin also helps with optimizing images for a WordPress site through its Sprite Generator. This feature combines larger site images into mini “sprites,” making them easier for your browser to load.
Unfortunately, JHC Optimize requires a paid subscription but, at $29 per month, over 10,000 WordPress users feel it’s worth the money.
3. Speed Booster Pack
This plugin’s features help you remove clutter, optimize CSS, and allow for “lazy loading” of website elements. The development team keeps the plugin up to date, and it even integrates with WooCommerce to help ecommerce users.
A fair bit of “trial and error” may be necessary to get the free plugin setup properly, but don’t feel left alone. One of the biggest advantages of Speed Booster Pack is its support. The development team provides three hands-on, professional-level support packages to help you configure Speed Booster Pack to fit 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 it makes to your WP dashboard. If you’re comfortable with the traditional WordPress setup, it may take some getting used to. Regardless of the change in interface, the plugin still offers loads of functionality and tools to remove render-blocking resources.
Running WP Rocket costs $49 per year for the primary plugin. You can also add a handful of free extras from the WordPress plugin library.
4. Autoptimize
Autoptimize has a unique way of condensing images to increase your site speed. The plugin does this by converting all images to WebP format. Additionally, Autoptimize provides all the basic render-blocking tools you might imagine, like minifying CSS and JavaScript, as well as script caching capabilities. The Autoptimize plugin also works with the Async JavaScript plugin.
The plugin works with PageSpeed Insights and works specifically to optimize issues identified by that platform. Autoptimize’s setup can be a little complex, but once users get used to the interface, they appreciate the features it provides.
You can purchase two versions of this plugin – a custom configuration version for $165 or an expert configuration that comes with a professional review of your website for $667.
Advanced techniques for eliminating render-blocking resources
For people who want to go the extra mile and have more control over removing render-blocking resources in their WordPress site, there are a couple of manual methods you can implement.
Asynchronous and deferred 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 marker to certain files causes your website to treat them as non-essential and signals your browser to render them separately from other critical files within the site.
To assign asynchronous loading to a particular script, add “<script async>” to that particular file within that page’s code. Doing so downloads the JavaScript or CSS while the rest of the page’s HTML loads. Once the marked file is completely downloaded, the page will pause loading the HTML and execute the asynchronous code.
For deferred loading, the same principles apply, but the marker you need to use is “<script defer>.” The difference between the two is that the defer script waits until the HTML has fully loaded to execute the script, while async pauses the HTML and resumes it afterward.
Ultimately, the goal of these methods is to drastically increase page loading speed. Pausing larger HTML elements is critical to optimizing the all-important first contentful paint for WordPress sites.
WordPress hosting from Nexcess
Hundreds of millions of websites currently use WordPress, but only a fraction are using it to its full potential. Learning to remove render-blocking JavaScript in WordPress (or CSS) is part of gaining an in-depth understanding of how to use the world’s most popular CMS platform.
Of course, it always helps to consult the experts when taking on technical operations like using WordPress to remove render-blocking resources. Nexcess is here to help. Our hosting experts can ensure you have the right fully managed WordPress hosting package, plugins, and configuration to meet the unique needs of your site and your industry.
Contact the Nexcess team today and let us help you wow your customers with WordPress.
