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.
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
- 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
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.
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.
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:
- 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.
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.
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
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.