Improve Site Speed: Remove Render-blocking JS & CSS
WordPress enables you to build a custom website with your choice of plugins and themes, but 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 webpages 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. That said, this a factor that can make a significant difference in load times. Remember that every resource on a webpage takes up bytes, more of which 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:
Autoptimize, on the other hand, is built specifically to address issues brought up by recommendation systems like PageSpeed Insights. The settings you’ll need in this plugin are under Settings > Autoptimize.
Both of these plugins can be used to minify, concatenate, and defer the loading of scripts. Every site is different, of course, so you may need to experiment to see what works best for your setup. It’s important that you test your settings before letting them run! Improperly minified or moved scripts can completely break your site.
Whatever method you choose to implement, it’s important to remember that speed is crucial for your website’s success. That’s why WP Engine keeps our servers running fast and reliable. Don’t be afraid to check out our services to help you reach optimal performance!