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\u2019t necessary for viewing the website right away, and could just as easily wait to run until after the site itself is fully loaded.<\/p>\n\n\n\n
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\u2019t involve what the viewer will see right away (often referred to as \u2018above the fold\u2019 elements) should be deferred until the rest of the page is loaded.<\/p>\n\n\n\n
Why eliminate render-blocking resources in WordPress?<\/h2>\n\n\n\n
Render-blocking JavaScript and CSS scripts slow down your web pages, which is bad for a lot of reasons. Site speed plays a role<\/a> in many vital aspects of your WordPress website, including general usability and Search Engine Optimization (SEO). When your site loads slowly, you are more likely to lose visitors, and less likely to be ranked highly in search engine results.<\/p>\n\n\n\n Of course, site speed and performance are affected by more<\/a> than just render-blocking resources. 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\u2019t want to let a slow site negatively impact your business<\/a>.<\/p>\n\n\n\n In general, it\u2019s best to make sure your website\u2019s code is as clean and minimal as possible<\/a> 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Before you can eliminate render-blocking scripts, you\u2019ll need to identify which scripts are causing problems. To do this, we recommend using Google\u2019s PageSpeed Insights<\/a>. Simply enter your URL, and Google will tell you exactly which scripts are slowing down your page performance:<\/p>\n\n\n\n Make a list of any scripts that appear in the results under Eliminate render-blocking JavaScript and CSS<\/em>. Whether you try to address them manually or use a plugin, these are the scripts you\u2019ll want to pay extra attention to as you apply the following fixes.<\/p>\n\n\n\n To reduce the number of render-blocking scripts on your site, you\u2019ll need to follow a few best practices:<\/p>\n\n\n\n These tips can be tricky to accomplish by hand in WordPress, because many front-facing plugins come with their own JavaScript and CSS files. One plugin can easily attach upwards of five or six scripts to the front end of your site. These files can add up quite quickly!<\/p>\n\n\n\n Thankfully, WordPress uses one combined filter<\/a> to register all front-end facing scripts. This means you have the opportunity to identify and handle any incoming JavaScript or CSS files \u2013 even if you don\u2019t know exactly what to look for. Of course, this is much easier to accomplish with a plugin rather than starting from scratch.<\/p>\n\n\n\n There are a few WordPress plugins that can help you optimize your site<\/a> by removing render-blocking JavaScript and CSS. In this section, we\u2019ll look at four popular choices.<\/p>\n\n\n\n WP Rocket<\/a> helps with site optimization through tasks such as minification of CSS and JavaScript, lazy loading images, deferring remote JavaScript requests, and more. It\u2019s the \u2018Swiss Army Knife\u2019 of optimization plugins. <\/p>\n\n\n\n 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\u2019s actual functionality<\/a> remains top-notch. <\/p>\n\n\n\n Autoptimize<\/a> is built specifically to address issues brought up by recommendation tools like PageSpeed Insights<\/a>. All the settings that enable you to configure the plugin for your website will be contained in a new menu in your WordPress dashboard. <\/p>\n\n\n\n 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<\/a>. This tool has excellent overall reviews, although you\u2019ll want to keep in mind that it can be somewhat complex to configure.<\/p>\n\n\n\n JCH Optimize<\/a> also offers some unique tools to help improve your page load time. 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. <\/p>\n\n\n\n Another unique feature of JCH Optimize is its Sprite Generator. This combines background images into \u2018sprites\u2019, 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<\/a> to ensure that they have configured the plugin correctly, in order to avoid errors. <\/p>\n\n\n\n With that being said, the plugin has many five-star reviews and over 10,000 active installations. <\/p>\n\n\n\n Speed Booster Pack<\/a> offers CSS and JavaScript optimization, lazy loading, and a clutter removal feature. The developers at Optimocha<\/a> keep the plugin up-to-date with a constantly evolving code base, so you know you\u2019ll always be using the latest methods. There\u2019s also a built-in WooCommerce<\/a>\u00ae<\/sup> optimization feature that works to resolve bottlenecks.\u00a0\u00a0<\/p>\n\n\n\n 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. <\/p>\n\n\n\n It\u2019s also worth noting that there is a service option to go along with the free plugin. Much like Autoptimize, the developers offer several options<\/a> for providing a hands-on, professional approach to configuring the plugin to fit your unique website.<\/p>\n\n\n\n Whatever your approach may be for improving site speed, we\u2019re here to help. We have a Website Tester that can help you diagnose the current state of your website, and we offer the best developer resources<\/a> to help you on your way to an optimized experience.<\/p>\n\n\n\n Find out more about WP Engine’s industry-leading hosting for WordPress<\/a>, or check out our pricing plans<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":" 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 and performance. Not all of these scripts need to be loaded right away, and some can actually block visitors from seeing your content…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":146382,"template":"","resource-topic":[912,901],"resource-role":[896,897,1296,899],"resource-type":[916],"class_list":["post-27182","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to eliminate render-blocking resources in WordPress<\/h2>\n\n\n\n
![\"Page](\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/06\/pagespeed-insights.png\")
<\/figure>\n\n\n\n\n
Using plugins to eliminate render-blocking resources<\/h2>\n\n\n\n
1. Using WP Rocket to eliminate render-blocking resources<\/h3>\n\n\n\n
2. Eliminating render-blocking resources with Autoptimize<\/h3>\n\n\n\n
3. Utilizing JCH Optimize to eliminate render-blocking resources <\/h3>\n\n\n\n
4. Eliminating render-blocking resources with Speed Booster Pack<\/h3>\n\n\n\n
Optimize WordPress performance with WP Engine<\/h2>\n\n\n\n