Have you ever finished creating a WordPress website, loved everything about it, and promptly began to hate it after realizing it takes forever to load? Mastering the elimination of render-blocking resources will help diagnose this problem. But how?<\/p>\n
Not only are slow loading speeds a nuisance for you and your visitors, but they can also cost you significantly when it comes to SEO. Since 2010, Google algorithms have accounted for loading speed in ranking decisions<\/a>, so slow pages appear lower on results pages.<\/p>\n You might be familiar with the common culprits of poor page performance \u2014 excessive content, uncompressed image files, insufficient hosting, and lack of caching to name a few. But there\u2019s another often-overlooked perpetrator in play: render-blocking resources.<\/p>\n <\/a><\/p>\n Don\u2019t get me wrong \u2014 CSS and JavaScript are great. Without CSS, websites would be walls of plain text. Without Ja=ooovaScript, we wouldn\u2019t be able to add dynamic, interactive, engaging elements to our websites. But, if executed at the wrong time, both CSS and JavaScript can put a dent in your website performance<\/a>.<\/p>\n Here\u2019s why: When a web browser first loads a web page, it parses all the page\u2019s HTML before displaying it onscreen\u00a0to a visitor. When the browser encounters a link to a CSS file, a JavaScript file, or an inline script (i.e., JavaScript code in the HTML document itself), it pauses the HTML parsing to fetch and execute the code, which slows everything down.<\/p>\n If you\u2019ve optimized your page performance<\/a>\u00a0in WordPress and are still experiencing problems, render-blocking resources may be the culprit. Sometimes this code is important to run on the first load, but much of the time it can be removed or pushed until the very end of the queue.<\/p>\n In this post, we\u2019ll show you how to eliminate this pesky code from your WordPress website<\/a> and give your performance a boost.<\/p>\n If you’d rather follow along with a video, check out this walkthrough created by WP Casts<\/a>:<\/p>\n Before making any changes, you first need to locate the render-blocking resources. The best way to do this is with a free online speed test like Google’s PageSpeed Insights tool<\/a>. Paste in your site\u2019s URL and click Analyze<\/strong>.<\/p>\n When the scan is complete, Google assigns your website an aggregate speed score, from 0 (slowest) to 100 (fastest). A score in the 50 to 80 range is average, so you\u2019ll want to land in the upper part of this range or above it.<\/p>\n To identify render-blocking files that are slowing your page, scroll down to Opportunities<\/strong>, then open the Eliminate render-blocking resources<\/strong>\u00a0accordion.<\/p>\n<\/p>\n Image Source<\/a><\/em><\/p>\n You\u2019ll see a list of files slowing the \u201cfirst paint\u201d of your page \u2014\u00a0these files affect the loading time of all content that appears in the browser window on the initial page load. This is also called \u201cabove-the-fold\u201d content.<\/p>\n Take note of any files ending with the extensions .css and .js, as these are the ones you\u2019ll want to focus on.<\/p>\n Now that you\u2019ve identified the issue, there are two ways to go about fixing it in WordPress: manually, or with a plugin. We\u2019ll cover the plugin solution first.<\/p>\n Several WordPress plugins can reduce the effect of render-blocking resources on WordPress websites. I\u2019ll be covering two popular solutions, Autoptimize and W3 Total Cache.<\/p>\n Autoptimize<\/a>\u00a0is a free plugin that modifies your website files to deliver faster pages. Autoptimize works by aggregating files, minifying code (i.e., reducing file size by deleting redundant or unnecessary characters), and delaying the loading of render-blocking resources.<\/p>\n Since you\u2019re modifying the backend of your site, remember to use caution with this plugin or any similar plugin. To eliminate render-blocking resources with Autoptimize:<\/p>\n 1.<\/strong> Install and activate<\/a>\u00a0the Autoptimize plugin.<\/p>\n 2.<\/strong> From your WordPress dashboard, select, Settings > Autoptimize<\/strong>.<\/p>\n 3.<\/strong> Under JavaScript Options<\/strong>, check the box next to Optimize JavaScript code?<\/strong>.<\/p>\n 4.<\/strong> If the box next to Aggregate JS-files?<\/strong>\u00a0is checked, uncheck it.<\/p>\n<\/p>\n 5.<\/strong> Under CSS Options<\/strong>, check the box next to Optimize CSS Code?<\/strong>.<\/p>\n 6.<\/strong> If the box next to Aggregate CSS-files?<\/strong>\u00a0is checked, uncheck it.<\/p>\n<\/p>\n 7.<\/strong> At the bottom of the page, click Save Changes<\/strong>\u00a0and Empty Cache<\/strong>.<\/p>\n 8.<\/strong> Scan your website with PageSpeed Insights and check for an improvement.<\/p>\n 9.<\/strong> If PageSpeed Insights still reports render-blocking JavaScript files, return to Settings > Autoptimize<\/strong>\u00a0and check the boxes next to Aggregate JS-files?<\/strong>\u00a0and Aggregate CSS-files?<\/strong>. Then, click Save Changes and Empty Cache<\/strong>\u00a0and scan again.<\/p>\n W3 Total Cache<\/a>\u00a0is a widely-used caching plugin that helps address laggy code. To eliminate render-blocking JavaScript with W3 Total Cache:<\/p>\n 1.<\/strong> Install and activate the W3 Total Cache plugin.<\/p>\n 2.<\/strong> A new Performance<\/strong>\u00a0option will be added to your WordPress dashboard menu. Select Performance > General Settings.<\/strong><\/p>\n 3.<\/strong> In the Minify<\/strong>\u00a0section, check the box next to Minify<\/strong>, then set Minify mode<\/strong>\u00a0to Manual<\/strong>.<\/p>\n<\/p>\n 4.<\/strong> Click Save all settings<\/strong>\u00a0at the bottom of the Minify<\/strong>\u00a0section.<\/p>\n 5.<\/strong> In the dashboard menu, select Performance > Minify<\/strong>.<\/p>\n 6.<\/strong> In the JS<\/strong>\u00a0section next to JS minify settings<\/strong>, make sure the Enable<\/strong>\u00a0box is checked. Then, under Operations in areas<\/strong>, open the first Embed type<\/strong>\u00a0dropdown and choose Non-blocking using \u201cdefer\u201d<\/strong>.<\/p>\n<\/p>\n 7.<\/strong> Under JS file management<\/strong>, choose your active theme from the Theme<\/strong>\u00a0dropdown.<\/p>\n 8.<\/strong> Refer back to your PageSpeed Insights results from your earlier scan. For each item under Eliminate render-blocking resources<\/strong>\u00a0ending in .js, click Add a script<\/strong>. Then, copy the full URL of the JavaScript resource from PageSpeed Insights and paste it into the File URI<\/strong>\u00a0field.<\/p>\n<\/p>\n 9.<\/strong> Once you\u2019ve pasted in all render-blocking JavaScript resources reported by PageSpeed Insights, click Save Settings & Purge Caches<\/strong>\u00a0at the bottom of the JS<\/strong>\u00a0section.<\/p>\n 10.<\/strong> In the CSS<\/strong>\u00a0section next to CSS minify settings<\/strong>, check the box next to CSS minify settings<\/strong>\u00a0and make sure the Minify method<\/strong>\u00a0is set to Combine & Minify<\/strong>.<\/p>\n<\/p>\n 11.<\/strong> Under CSS file management<\/strong>, choose your active theme from the Theme<\/strong>\u00a0dropdown.<\/p>\n 12.<\/strong> For each item under Eliminate render-blocking resources<\/strong>\u00a0ending in .css in your PageSpeed Insights scan results, click Add a style sheet<\/strong>. Then, copy the full URL of the CSS resource from PageSpeed Insights and paste it into the File URI<\/strong>\u00a0field.<\/p>\n<\/p>\n 13.<\/strong> Once you\u2019ve pasted in all render-blocking CSS resources reported by PageSpeed Insights, click Save Settings & Purge Caches<\/strong>\u00a0at the bottom of the CSS<\/strong>\u00a0section.<\/p>\n 14.<\/strong> Scan your website with PageSpeed Insights and check for an improvement.<\/p>\n Plugins can handle the backend work for you. Then again, plugins themselves are just more files added to your web server. If you want to limit these extra files, or if you\u2019d just rather handle the programming yourself, you can address the render-blocking JavaScript manually.<\/p>\n To do this, locate the <script><\/strong>\u00a0tags in your website files for the resources identified in your PageSpeed Insights scan. They will look something like this:<\/p>\n<\/p>\n <script><\/strong>\u00a0tags tell the browser to load and execute the script identified by the src<\/strong>\u00a0(source) attribute. The problem with this process is that this loading and executing delays the browser\u2019s parsing of the web page, which impacts the overall load time:<\/p>\n<\/p>\n Image Source<\/a><\/em><\/p>\n To resolve this, you can add either the async<\/strong>\u00a0(asynchronous) or the defer<\/strong>\u00a0attribute to the script tags for render-blocking resources. async<\/strong>\u00a0and defer<\/strong>\u00a0are placed like so:<\/p>\n<\/p>\n While they have similar effects on load times, these attributes tell the browser to do different things.<\/p>\n The async<\/strong>\u00a0attribute signals the browser to load the JavaScript resource while parsing the rest of the page and executes this script immediately after it has been loaded. Executing the script pauses HTML parsing:<\/p>\n<\/p>\n Image Source<\/a><\/em><\/p>\n Scripts with the defer<\/strong> attribute are also loaded while the page is parsed, but these scripts are delayed from loading until after the first render or until after the more essential portions have loaded:<\/p>\n<\/p>\n Image Source<\/a><\/em><\/p>\n The defer<\/strong> and async<\/strong>\u00a0attributes should not be used together on the same resource, but one may be better suited for a particular resource than the other. Generally, if a non-essential script relies on a script to run before it, use defer<\/strong>. The defer<\/strong>\u00a0attribute ensures that the script will run after the preceding necessary script. Otherwise, use async<\/strong>.<\/p>\n After making your changes, conduct one final scan of your website through PageSpeed Insights and see what impact your changes had on your score.<\/p>\n Hopefully, there\u2019s a noticeable improvement, but don\u2019t worry if not. Many factors can inhibit page performance, and you may have to do some more digging to find the source of poor performance.<\/p>\n In addition to a rescan, check your pages to make sure your site works. Does the page load correctly? Are all elements showing up? If something is broken or fails to load properly, undo your changes and troubleshoot the issue.<\/p>\n If you\u2019ve reached a point where you\u2019ve repeatedly tried various measures with minimal speed gains, it might be best to consider other ways to speed up your pages<\/a>, rather than risk breaking your site.<\/p>\n Many factors contribute to your users\u2019 experience on your website, but few are more important than load time. Whenever you make big changes to content or appearance on your WordPress site, you should always consider how such changes affect performance.<\/p>\n Now that you\u2019ve eliminated the render-blocking resources, you should continue to optimize your website\u2019s speed by analyzing other features that are known to slow down performance. Try to incorporate regular speed testing into your site maintenance schedule \u2014 staying ahead of any potential issues will be critical to your success.<\/p>\n1. Identify the render-blocking resources.<\/h3>\n
2. Eliminate the render-blocking resources manually or with a plugin.<\/h3>\n
How To Eliminate Render-Blocking Resources With the Autoptimize Plugin<\/h4>\n
How To Eliminate Render-Blocking Resources With the W3 Total Cache Plugin<\/h4>\n
How to Eliminate Render-Blocking JavaScript Manually<\/h4>\n
3. Re-run a site scan.<\/h3>\n
4. Check your website for bugs.<\/h3>\n
Optimizing Your WordPress Site for Performance<\/h2>\n