Eliminate Render-Blocking Resources With Async and Defer Easily

Why do we need to eliminate render-blocking resources? Render blocking resources are static files, such as fonts, HTML, CSS, and JavaScript, vital to rendering a web page. When the browser encounters render-blocking resources, it stops downloading the rest until these critical files are processed. So the entire rendering process is put on hold.

On the other hand, non-render blocking resources don’t postpone the rendering of the page. After the initial page renders, the browser can safely download them in the background.
Let's understand in detail below.

What is Render Blocking Resources?

Eliminate Render-Blocking Resources With Async and Defer
First Paint of Page – Eliminate Render-Blocking Resources With Async and Defer

The process in which the web resources (ex: JS, CSS & HTML files) that are loaded in the webpage potentially cause the browser to block the rendering of the page until they are loaded is called render-blocking resources. These web files can be large with hundreds of kilobytes of data that must be loaded, in addition to the HTML, before it is rendered.

Therefore, always look for the best solution to eliminate render-blocking resources in above-the-fold content and optimize CSS delivery. Two techniques that are widely used are async & defer loading.

WP Rocket automatically applies the 80% of web performance best practices. You don’t need to be a rocket scientist to set it up and benefit from it.
$49.00 $58.00
WordPress experts recommend WP Rocket to achieve incredible speed results.

What are Render-blocking JavaScripts?

JavaScripts that block the rendering of meaningful content are called ‘Render Blocking JavaScripts.’ They need to be either deferred or use async to eliminate render-blocking resources.

What is Critical and Non-Critical JavaScripts?

CRITICAL: JavaScripts files that are necessary to load during optimized critical rendering.

NON CRITICAL: JavaScript files can wait to load until the first meaningful content (the first paint) of the web page has loaded, called non-critical javascript.

What is Inline Delivery?

Inline delivery refers to loading a resource (like JS, CSS) within the HTML code instead of calling/importing that separately.

How to Remove Render Blocking JavaScripts From Website?

To remove render-blocking JavaScripts, developers need to inline critical JavaScript and defer all non-critical JavaScript to eliminate render-blocking resources errors.

You may also like to read:

Common Things About Async and Defer

Both async and defer have one common thing. That is, downloading of render-blocking javascript doesn’t block page rendering. So the visitors may read webpage content & get acquainted with the webpage immediately.

Why Should We Defer Loading of JavaScripts?

When the web browser comes across a javascript, it executes the script before loading HTML, including the content users are looking for. It means that JavaScripts are one of the major culprits to make your website slow.

For a browser, executing JavaScript is a heavier task as it depends on the size of the javascript. Also, it takes more time than rendering the meaningful content (the first paint) of the webpage.

Eliminate Render-Blocking Resources With Async and Defer

Hence, JavaScript affects the critical rendering path and slows down your site's page speed. Also, defer loading heavier tasks of JS execution so that essential paths of rendering remain uninterrupted.

How to Identify Render-Blocking JavaScripts on Your Website?

You can quickly identify your website's render-blocking JavaScript(s) by using site speed testing tools. You can see the results below for this article when we have gone through the google page speed test:

Eliminate Render-Blocking Resources With Async and Defer
This Page Results – Eliminate Render-Blocking Resources With Async and Defer

Several page speed testing tools are available to analyze a website for site speed and loading time. The most reliable and trusted tools for page speed testing are:

1. PageSpeed Insights by Google
2. GTmetrix
3. Pingdom Tools

Test your website using the above speed testing tools. And analyze the results of these tools so that you can compare the results before and after implementing defer parsing of JavaScript(s).

What Does Defer Mean in JavaScript?

Defer literally means ‘hold back’ or ‘delay.’ If you use the ‘defer’ attribute in <script> for parsing (loading) of JavaScript, JavaScript will execute only after the HTML parsing has finished. This helps to improve the speed of a webpage.

Does Async or Defer Attributes Have any Effect on Inline Scripts?

No, both async and defer attributes don’t affect inline scripts.

What is Defer Parsing of JavaScript?

Usually, Googe Pagespeed Insights (PSI) or other site speed testing tools (GTMetrix, etc.) show warning/error. Eliminate render-blocking Resources if your website loads JavaScript(s) that block your site's meaningful content (the first paint).

According to Google PageSpeed Insights (PSI) recommendations, your website should deliver critical JS inline and defer all non-critical JS to eliminate render-blocking resources.

Therefore, defer parsing of JavaScript means JavaScript(s) should load only after the website's content has loaded to eliminate render-blocking resources errors.

What's the Main Reason to Defer Loading of JavaScript?

As you know,  the browser prioritizes executing the scripts over parsing the HTML. However, the fact is, most of the JavaScripts are used only when the complete web page is loaded. Examples are animation, effect, some functionality, etc.

Therefore, it is good to load JavaScript(s) only after the content has been loaded.

Advantages of Deferred Loading of JavaScript

The advantages of deferred loading of JavaScript are:

1. The deferred loading of JavaScript does not affect the critical render path

2. It consequently helps to speed up your website.

3. It gives a better user experience to your website visitors.

4. It makes your site load faster

5. It helps improve your search ranking on desktop and mobile.

6. It helps improve the performance of websites.

7. It allows the elimination of render-blocking JavaScript.

What is Defer Parsing?

Whenever a browser encoun­ters a javascript with the defer attribute, it sequentially follows the below steps.

  1. First, make par­al­lel requests to fetch the indi­vid­ual files.
  2. Meanwhile, Con­tinue pars­ing the doc­u­ment as if it was never interrupted.
  3. Then, Fin­ish task of pars­ing the web doc­u­ment even if the javascript files are downloaded.
  4. Once the parsing documents' task is finished, Exe­cute each script in the order they were encoun­tered in the document.

EXAMPLE:

<script src=”myjavascriptfile1.js” defer></script>
<script src=”myjavascriptfile2.js” defer></script>

Therefore, Defer is very sim­i­lar to async attribute with just one major dif­fer­er­ence.

More interesting topics for you:

How Do You Defer JavaScript?

With HTML V5, two new boolean attributes for the <script> tag have been introduced. They are async and deferAsync attribute allows the execution of javascript files asynchronously. But, the defer attribute allows execution only after the whole document has been parsed.

The webpage would have to load and execute scripts before rendering the page.

Here’s a usage example of defer attribute of <script>:

<script defer src=”/js/jquery.min.js”> </script>

How to Defer Loading of JavaScript in WordPress?

You can defer parsing of JavaScript in WordPress by following three methods:

  1. Using WordPress Plugins.
  2. Using the Script method (without using plugins).
  3. Adding a Code Snippet to function.php file.

Advantages of Async Loading of JavaScript

Advantages of async loading of JavaScript are

1. It allows the elimination of render-blocking JavaScript.

2. async loading of JavaScript does not affect the critical render path.

3. It consequently helps to speed up your website.

4. It gives a better user experience to visitors of websites.

5. It makes your website load faster.

6. It helps to improve your search ranking on desktop and mobile.

7. It helps to improve the performance of websites.

How Do You Async Attribute in JavaScript?

When you add the async attribute to your script tag, the fol­low­ing steps likely will happen.

  1. It makes par­al­lel requests to fetch the files.
  2. It con­tinue parsing/loading the doc­u­ment as if it was never interrupted.
  3. Exe­cute the indi­vid­ual scripts the moment the java files are downloaded.

EXAMPLE BELOW:

<script src=”javascript1.js” async></script>

Difference Between Async and Defer Loading?

Async and defer are similar in that they allow scripts to load without blocking the HTML parsing. It means users see page content more quickly. But they do have differences in eliminate render-blocking resources.

Here are the main difference between async and defer JavaScript.

1. The defer attribute delays JavaScript execution until HTML parsing has been completed. Whereas with the async attribute, HTML parsing & script execution happens simultaneously, and the script executes as soon as it’s ready.

2. Scripts loaded with async are parsed and executed immediately when downloading the resource. Whereas scripts with defer attributee don’t execute until the HTML doc is parsed.

3. Async scripts may load out-of-order, but defer scripts are executed in the order they appear in the markup.

4. Async follows Load-first order. Here the order of documents doesn’t matter. It may load and execute while the document has not yet been fully downloaded. It also happens if scripts are small or cached and the document is long enough. Defer follows Document order (as they go in the document). It executes after the document is loaded and parsed (they wait if needed), right before DOM Content Loaded.

Plugins to Eliminate Render-Blocking JavaScript Easier

A few WordPress plugins can help you optimize your site by removing render-blocking JavaScript. In this section, we’ll look at all popular choices.

 WP Rocket

WP Rocket Eliminate Render-Blocking Resources With Async and Defer
WP Rocket – Eliminate Render-Blocking Resources With Async and Defer

WP Rocket helps with site optimization through tasks such as minification of CSS and JavaScript, lazy loading images, deferring remote JavaScript requests, and more. It’s the ‘Swiss Army Knife’ of optimization plugins. 

WP Rocket Caching Plugin

$49.00 $58.00
WordPress experts recommend WP Rocket to achieve incredible speed results.
WP Rocket automatically applies 80% of web performance best practices. You don’t need to be a rocket scientist to set it up and benefit from it.
WP Rocket is the most powerful web performance plugin in the world. It will instantly reduce your load time and boost your Google PageSpeed and Core Web Vitals scores. No coding skills are needed.

Autoptimize

Eliminate Render-Blocking Resources With Async and Defer
Autoptimize – Eliminate Render-Blocking Resources With Async and Defer

To eliminate render-blocking JavaScript and CSS in above-the-fold content from WordPress, you can use plugins such as Autoptimize. This plugin makes the load time of your WordPress site better by combining bits of code, making code blocks smaller by removing unnecessary characters (compression), and so on. Making these changes makes the code easier to read, and the file size is reduced, thus shaving a few hundred milliseconds or even seconds off the loading time.

To install this plugin, you simply need to access your WordPress dashboard and navigate the Plugins tab. Then, select the Add New option located on the upper side of the window. After that, you can look for Autoptimize or other plugins in the search bar. Click on Install Now, active it for the website you want, and you are good to go.


W3 Total Cache

W3 Total Cache Eliminate Render-Blocking Resources With Async and Defer
W3 Total Cache – Eliminate Render-Blocking Resources With Async and Defer

What is interesting about this plugin is that it incorporates multiple extra features for optimizing WordPress. Caching represents the process in which specific files are stored on a user’s computer to make his experience with the website better. Subsequence visits will be more accessible, and the load times will improve.

KEY FEATURES

  • Compatible with shared hosting, virtual private / dedicated servers and dedicated servers / clusters
  • Transparent content delivery network (CDN) management with Media Library, theme files and WordPress itself
  • Mobile support: respective caching of pages by referrer or groups of user agents including theme switching for groups of referrers or user agents
  • Accelerated Mobile Pages (AMP) support
  • Secure Socket Layer (SSL/TLS) support
  • Caching of (minified and compressed) pages and posts in memory or on disk or on (FSD) CDN (by user agent group)
  • Caching of (minified and compressed) CSS and JavaScript in memory, on disk or on CDN
  • Caching of feeds (site, categories, tags, comments, search results) in memory or on disk or on CDN
  • Caching of search results pages (i.e. URIs with query string variables) in memory or on disk
  • Caching of database objects in memory or on disk
  • Caching of objects in memory or on disk
  • Caching of fragments in memory or on disk
  • Caching methods include local Disk, Redis, Memcached, APC, APCu, eAccelerator, XCache, and WinCache
  • Minify CSS, Minify JavaScript and Minify HTML with granular control
  • Minification of posts and pages and RSS feeds
  • Minification of inline, embedded or 3rd party JavaScript with automated updates to assets
  • Minification of inline, embedded or 3rd party CSS with automated updates to assets
  • Defer non critical CSS and Javascript for rendering pages faster than ever before
  • Defer offscreen images using Lazy Load to improve the user experience
  • Browser caching using cache-control, future expire headers and entity tags (ETag) with “cache-busting”
  • JavaScript grouping by template (home page, post page etc) with embed location control
  • Non-blocking JavaScript embedding
  • Import post attachments directly into the Media Library (and CDN)
  • Leverage our multiple CDN integrations to optimize images
  • WP-CLI support for cache purging, query string updating and more
  • Various security features to help ensure website safety
  • Caching statistics for performance insights of any enabled feature
  • Extension framework for customization or extensibility for Cloudflare, WPML and much more
  • Reverse proxy integration via Nginx or Varnish

Speed Booster Pack

Speed Booster Eliminate Render-Blocking Resources With Async and Defer
Speed Booster – Eliminate Render-Blocking Resources With Async and Defer

Another option is Speed Booster Pack. Once you’ve installed it, you can access the settings and choose the options that suit your needs. The plugin offers configuration options like moving scripts to the footer or deferring JavaScript files from parsing. By selecting these, you can remove render-blocking JavaScript and CSS in above-the-fold content with just a couple of clicks.

With its ever-evolving codebase, Speed Booster Pack aims to increase your site performance, page load times, and PageSpeed (Lighthouse) scores! Optimocha, the company behind Speed Booster Pack, has a team with a pathological obsession for speed, so you can be sure that your site will be in good hands.


JCH Optimize

JCH Eliminate Render-Blocking Resources With Async and Defer
JCH Optimize – Eliminate Render-Blocking Resources With Async and Defer

JCH Optimize is a plugin that combines JavaScript and CSS while reducing the files in size. It has many other features that can be useful in the long run, but it is excellent at eliminating render-blocking resources. Navigate through its settings and activate the features that seem relevant to your website.

MAJOR FEATURES

  • Page Cache
  • Optimize CSS/JS/HTML
  • GZip compress the combined files.
  • Generate sprite to combine background images.
  • Ability to exclude files from combining to resolve conflicts
  • Defer/Load combined javascript file asynchronously
  • Optimize CSS Delivery to eliminate render blocking
  • CDN/Cookie-less Domain support
  • Lazy load images

Why We Prefer Defer Over Async?

Both async and defer cause JavaScript execution to happen at different times on the web page to eliminate render-blocking resources.

Defer causes javascript execution to happen simultaneously as or later than async. It is because javascript is made defer or async & is less critical for the web page's important content. Therefore, it’s better to defer their execution outside of the primary rendering time.

Defer scripts can never block synchronous scripts. Whereas async scripts depend on how quickly they download. Synchronous scripts are typically made synchronous because they are important for the web page's critical content.

Therefore, it’s always better to use defer attribute, so synchronous scripts are not blocked from executing. Also, their critical work is completed more quickly.

Which is Better Async or Defer?

While using an async attribute, the JavaScript file gets downloaded asynchronously & then executed as soon as it’s downloaded.

Whereas with the defer attribute, the file gets downloaded asynchronously. But executed only when the document loading is completed. Also, scripts will perform in the same order as they are called.

Assume we are using jQuery as well as other javascript that depend on it. We defer on them (jQuery included), making sure to call jQuery before the dependent scripts.

Eliminate Render-Blocking Resources With Async and Defer

Therefore, defer is the correct attribute choice when a script depends on another. And, defer is the right choice when async is not an option.

FAQs About Eliminate Render-Blocking Resources With Async and Defer

  1. Are images render blocking?

    Remember, images aren't rendered blocking, so if you have images on the blue DOM line, you can safely ignore those, although you will still want to optimize your images.

  2. What is CSS render-blocking JavaScript?

    Render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files.

  3. What is inline CSS?

    Inline CSS allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML element using the style attribute with any CSS properties defined within it.

Conclusion: Eliminate Render-Blocking Resources With Async and Defer

So, we have discussed the best strategies to eliminate render-blocking resources.

  • Don’t use CSS imports.
  • Load conditional CSS with media attributes
  • Use the defer and async attributes to eliminate render-blocking JavaScript.
  • Split, bundle, and minify CSS and JavaScript files
  • Try to load all custom fonts locally

To help visitors load the visible portion of your page more quickly, you should delay loading resources that aren’t immediately required.

We will be happy to hear your thoughts

Leave a reply

About Pro Blog Solutions

Pro Blog Solutions pull together information on a range of topics like WordPress, affiliate marketing, mobile apps, how-to guides, tutorials, web hosting, Android, make-money blogging, etc. Our efforts are to constantly improve the industry-leading solutions for the web in collaboration with our sponsors.

Trending on Web

Recommended for you

Sign up, and keep yourself up to date with our latest blog updates & offers!

© 2016-2023 Connect Motive Media. All Rights Reserved
Pro Blog Solutions