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.
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
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
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.
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.
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:
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
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.
To assign asynchronous loading to a particular script, add “