Improve Site Speed: Remove Render-blocking JS & CSS
WordPress enables you to build a custom website with your choice of plugins and themes. However, this can mean that your site has a lot of scripts slowing down its loading times. Not all of these scripts need to be loaded right away, and some can actually block visitors from seeing your content as quickly as possible.
When the script queue is very long, it can take a while before visitors are able to access your site. Often, many of these scripts aren’t necessary for viewing the website right away, and could just as easily wait to run until after the site itself is fully loaded.
In other words, these kinds of scripts slow down your web pages without actually contributing to the immediate needs of your viewers. Any script that doesn’t involve what the viewer will see right away (often referred to as ‘above the fold’ elements) should be deferred until the rest of the page is loaded.
Of course, site speed is affected by more than just render-blocking scripts. With that said, this is a factor that can make a significant difference in loading times. Remember that every resource on a web page takes up bytes, more of which can result in longer download times. The fewer and lighter scripts your site has, the better. After all, you don’t want to let a slow site negatively impact your business.
In general, it’s best to make sure your website’s code is as clean and minimal as possible to improve overall speed. However, there will always be some leftover code. By default, browsers will try to load everything at once, including the render-blocking scripts.
It is up to you to make sure your site first loads the scripts necessary for it to look correct and be usable when a viewer first lands on a page. Only then should the rest of the scripts be loaded.
Before you can eliminate render-blocking scripts, you’ll need to identify which scripts are causing problems. To do this, we recommend using Google’s PageSpeed Insights. Simply enter your URL, and Google will tell you exactly which scripts are slowing down your page:
To reduce the number of render-blocking scripts on your site, you’ll need to follow a few best practices:
1. WP Rocket
One of the biggest benefits to using this plugin is the easy setup process. However, one potential downside is the user interface. The plugin creates a different experience in your WordPress dashboard then you might be used to. Some longtime users may not appreciate this interface change. Still, the plugin’s actual functionality remains top-notch.
There are a few free extras you can get for WP Rocket in the WordPress Plugin Directory. However, the base plugin itself is priced at $49 a year for one website and one year of support, with additional tiers offering more options.
Autoptimize is built specifically to address issues brought up by recommendation tools like PageSpeed Insights. All the settings that enable you to configure the plugin for your website will be contained in a new menu in your WordPress dashboard.
Autoptimize covers all the basic optimization tasks, such as minifying and caching scripts. One unique feature is that it can also optimize and convert images into the WebP format. This tool has excellent overall reviews, although you’ll want to keep in mind that it can be somewhat complex to configure.
While the plugin itself is free, you can purchase one of two packages from the developers to assist with its configuration. There’s a custom configuration plan priced at around $165 (€149). You can also get a completely hands-on, professional review of your website and expert plugin configuration for around $667 (€599).
3. JCH Optimize
JCH Optimize also offers some unique tools to help improve your page loading speeds. For example, it can reduce the number of HTTP requests it takes to load your pages, and lower the size of those pages as well. This results in a decreased server load, and lower bandwidth requirements.
Another unique feature of JCH Optimize is its Sprite Generator. This combines background images into ‘sprites’, so it takes fewer HTTP requests to load them to a browser. One of the downsides to this plugin can be the steep learning curve, however. Most users will need to rely on the support documentation to ensure that they have configured the plugin correctly, in order to avoid errors.
With that being said, the plugin has many five-star reviews and over 10,000 active installations. In terms of price, there is a free version of the plugin available. If you want access to support and advanced features like the Optimize Image API, however, you’ll need to purchase a subscription. These start at $29 for six months of support and API access.
One of the benefits of using Speed Booster Pack is that it has a Content Delivery Network (CDN) integration feature. This makes it easy to use the CDN of your choice in WordPress, while also optimizing with the plugin. The downside to this plugin lies in the trial-and-error process you might need to follow in order to get it configured properly.
It’s also worth noting that there is a service option to go along with the free plugin. Much like Autoptimize, the developers offer several options for providing a hands-on, professional approach to configuring the plugin to fit your unique website.
Improve Your Site’s Speed With WP Engine
Whatever your approach to improving your site’s speed might be, we’re here to help. We have a Speed Tool for testing your website, and the best developer resources to help you on your way to an optimized experience.
In fact, our Digital Experience Platform (DXP) is a great place to start building a better website. Check out our pricing plans today!