Hãy nhìn lại lối sống của bạn.

How to Remove Render Blocking JavaScript Properly

1 213.516

- Advertisement -

How to Remove Render Blocking JavaScript properly. As you have landed on this page, you must have tested your website on Google PageSpeed Insights, Pingdom Tools or Gtmatrix and looking for a solution to eliminate Render Blocking JavaScript in above-the-fold content.Read on

In this article, I will discuss what is render blocking JavaScript? Why you should remove render blocking JavaScript? How to eliminate render blocking JavaScript properly? And how to remove render blocking JavaScript in WordPress with or without plugin.

Before digging deep and exploring the solutions to eliminate render-blocking JavaScript in above-the-fold content, you should know the problem first. So let’s start with, what render blocking JavaScript is and why it is important to remove render-blocking JavaScript.

Do you know?

What is Render Blocking JavaScript?

Render blocking JavaScript in above-the-fold content is that external/internal JavaScript which blocks the desired loading of website. SuchJavaScript(s) blocks rendering of the webpage speedily.

Why You Should Eliminate Render Blocking JavaScript?

If JavaScript(s) is present in above-the-fold content in a webpage, it will slow down the page loading speed. Because the web browser could not render HTML speedily if a script encounters its path.

Whenever the web browser comes across a script, it has to stop and execute the script first before continue to parse HTML. Hence, critical rendering path is blocked and optimized rendering of the web page does not happen. Therefore the progressive site loading is compromised.

Clearly, Render Blocking JavaScript is one of the major culprits to slow down your page speed and you cannot afford slow loading website these days. Because no one (including search engines) likes a slow loading website. Therefore you must consider fixing this issue of render blocking JavaScript(s) on your website.

Also, Google recommends eliminating Render-Blocking JavaScript as one of the Google PageSpeed guidelines. And Google has already started taking into account site speed as one of the ranking factors in web search ranking. Hence, removing render blocking JavaScript will not only help to improve user experience & pagespeed but overall search ranking and technical SEO also.

Summing up the benefits of eliminating Render-Blocking JavaScript in above-the-fold content:

  • Improve pagespeed
  • Better user experience
  • Search ranking & technical SEO benefits
  • Improve Google PageSpeed Insights Score

How to find Render Blocking JavaScript(s)?

Before you start to eliminate render blocking JavaScript, you must know which Render Blocking JavaScript(s) are. There are several ways to do this. You should use Google PageSpeed Insights Tool. PageSpeed Insights tool let you know which JavaScript(s) are blocking the critical render path and loading of the web page.

How to Remove Render Blocking JavaScript?

Google recommends following three solutions to remove render-blocking JavaScript:

  1. Async loading of JavaScript
  2. Defer parsing of JavaScript
  3. Inline JavaScript

Async loading of JavaScript:JavaScript can be loaded Asynchronously by adding async attribute in the JavaScripts. For example:

<script async scr ="abc.js" >

Defer parsing of JavaScript:Defer means hold back for the later time. When we say Defer Parsing of JavaScript, it refers to hold the JavaScript back while other critical webpage resources (HTML, CSS etc.) have completed loading and JavaScript loads only afterward the initial render of the web page is loaded. I have written a detailed guide to Defer Parsing of JavaScript Properly you can check that out.

Inline JavaScript: To inline JavaScript, you should call the whole JavaScript instead of calling it by name. This method is useful for small JavaScript(s).
For example:

<html>
<head>
<script type="text/javascript" src="abc.js"></script >
</head>
<body>
<div>
Hello, world!
</div >
</body>
</html>

You should place the content of JavaScript after /* contents of abc JavaScript file */comment to inline JavaScript.

<html>
<head>
</head>
<body>
<div>
Hello, world!
</div >
<script type="text/javascript">
/* contents of abc JavaScript file */
</script >
</body>
</html>

Do you know? How to Setup Lazy Load for Google AdSense Ad units?

How to Remove Render Blocking JavaScript in WordPress with or without plugin?

You can use following methods to remove render blocking JavaScript in WordPress:

  1. Using WordPress plugin(s) – plugin method
  2. Defer parsing of JavaScript manually – without plugin method

Remove Render Blocking JavaScript in WordPress using Plugin(s)

Though there are several WordPress plugins available for removing render blocking JavaScript in above-the-fold content, following three plugins stand out from the crowd:

  1. Autoptimize
  2. Speed Booster Pack
  3. W3 Total Cache

Check out following paragraphs explaining the setup of these plugins to remove render-blocking JavaScript in WordPress.

1. Autoptimize

You can use Autoptimize plugin to remove render blocking JavaScript in WordPress. [Download Autoptimize]

  • Go to WP Dashboard > Plugins > Add New.
  • Search Autoptimize in WordPress plugin repository.
  • Install and activate Autoptimize
  • Navigate to Dashboard > Settings > Autoptimize. You will see a screen like below.
  • Check (select) the options.
  • Click Save changes and Empty Cache and you are done.

You can also exclude any specific JavaScript from Autoptimize.

2. Speed Booster Pack

This is another good plugin that you can use to remove render blocking JavaScript in WordPress. [Download link]

  • Go to WordPress Dashboard > Plugins > Add New.
  • Search Speed Booster Packin WordPress plugin repository.
  • Install and activate Speed Booster Pack
  • Go to Dashboard > Settings > Speed Booster Pack. You will be taken to screen like below.
  • Select (check) the options as shown in the image below.
  • Click Save Changes. And you are good to go.

Move Scripts to footer

I always recommend loading of JavaScript in footer instead of head element wherever possible. The advantage of moving scripts to footer is that the scripts will be load after the rest of page resources. Hence the scripts will not block the rendering of the web page. As a result, your website will load faster.

Loading JavaScript (JS) from Google libraries

The advantage of loading JavaScript (JS) from Google libraries is that there is high chance that the visitor of your website already had a cached copy of JavaScript (in his browser cache data) which you are using on your website. Thus the browser will not download it from your website and will render the locally cached copy of JavaScript. Consequently, it will help to make your site load faster.

3. W3 Total Cache

Yes, you can also use W3 Total Cache plugin to remove render blocking JavaScript in WordPress. W3 Total Cache one of the most popular cache plugins. [Download link]

There are fair chances that you already installed this plugin. If you haven’t:

  • Go to WordPress Dashboard > Plugins > Add New.
  • Search W3 Total Cache in WordPress plugin repository.
  • Install and activate W3 Total Cache plugin.
  • Go to WP Dashboard > Performance (W3 Total Cache Settings) > Minify.
  • Scroll down to JS minify settings. You will see settings like shown in the image below.
  • Check/select options. Click Save all settings and you are done.

I hope this article helps you removing render blocking JavaScript in above-the-fold content. Which method or plugin do you use to eliminate render blocking JavaScript? Have a question regarding this article, post it via comment section. I will be happy to help.

Read more Robots meta changes for Google about new features 

- Advertisement -

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.