LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Website / Website Tips / WordPress / WordPress Tips » How To Optimize External JavaScript File For Better Loading?

How To Optimize External JavaScript File For Better Loading?

How-To-Optimize-External-JavaScript-File-For-Better-Loading

As you know that Javascript /Jquery files are well known about there loading time and slowing down your web speed. So its time to make this phenomena reverse and make it load fast so that it will not effect on your page load time. Through using this code, you will also get “Eliminate Or Remove Render-Blocking External JavaScripts” error from your blog too so we suggest everyone to use this code.

Before a browser can render a page to the user, it has to parse the page. If it encounters a blocking external script during parsing, it has to stop and download that Javascript. Each time it does that, it is adding a network round trip, which will delay the time to first render of the page. Using asynchronous scripts means that your page can render more quickly. Instead of forcing users to wait for a script to finish downloading before the page renders, a script can be downloaded in the background. Although most scripts were originally synchronous, newer versions of the scripts have been designed to load asynchronously.JavaScript needed to render the above-the-fold region should be inlined, and JavaScript needed to add additional functionality to the page should be deferred until after the above-the-fold content has been delivered.

Recommended For You:
Redirect Blogger Archives To WordPress Archives After Migration

Table of Contents

Some Top Sites Are Using This Code:

Make sure you are using the asyncrhonous version of your script. The following popular scripts support asynchronous script loading:

  • BuySellAds (s3.buysellads.com/ac/bsa.js) : blog post – async by default
  • ChartBeat (static.chartbeat.com/js/chartbeat.js) : doc, blog post – async by default
  • Clicky (static.getclicky.com/js) : blog post
  • Disqus (disqus.com/count.js, disqus.com/embed.js) : docblog post – async by default
  • Facebook (connect.facebook.net/…/all.js) : docblog post – async by default
  • Google AdSense (pagead2.googlesyndication.com/pagead/show_ads.js) : docblog post
  • Google Analytics (google-analytics.com/ga.js) : docblog post – async by default
  • Google DFP GPT (www.googletagservices.com/tag/js/gpt.js) : doc
  • Google Plus (apis.google.com/js/plusone.js) : doc, blog post
  • New Relic (d7p9czrvs14ne.cloudfront.net/11/eum/rum.js) : doc – async by default
  • Pinterest (assets.pinterest.com/js/pinit.js) : doc
  • Shareaholic : doc – async by default
  • ShareThis (w.sharethis.com/button/buttons.js) : doc
  • ScorecardResearch/Comscore (b.scorecardresearch.com/beacon.js) : doc – async by default
  • StumbleUpon (platform.stumbleupon.com/…/widgets.js)
  • Quantcast (quantserve.com/quant.js) : doc – async by default
  • Twitter (platform.twitter.com/widgets.js) : doc – async by default
  • Tynt (cdn.tynt.com/tc.js)
  • Yandex (mc.yandex.ru/metrika/watch.js)

How To Optimize External JavaScript?

Step 1:) Find external JavaScript files on your web page.
<script type="text/javascript" src="https://www.example.com/scripts/javascript.js">

Step 2:) Now add async="" to external JavaScript files.
<script type="text/javascript" async="" src="https://www.example.com/scripts/javascript.js">
Ste 3:) Save and done.

Important Note:

If your JavaScript resources use document.write, it is not safe to use asynchronous loading. Many script still not support this so add this code and check your web that that one script is working or not. If not working then remove it.

Recommended For You:
Stylish Hover Page Navigation Menu For Blog & Website

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.

You Like It, Please Share This Recipe With Your Friends Using...

8 Responses to “How To Optimize External JavaScript File For Better Loading?”

  1. iliyas shaikh says:

    Nice article .. in my blog not work

  2. iliyas shaikh says:

    Thanks my dear brother
    i do it but just in fail about css load time

  3. deady ady says:

    not works sir

  4. Osama says:

    Hello,

    I have two questions, please.

    I added async to jQuery after the opening head tag.

    I have a gadget called the previous article and the following article. It’s inserted under the blog posts of my blog. After I had used async, the title of the previous article and the following article didn’t appear.

    1- What should I do to make them appear again, please?

    2- May you give me examples of external JavaScript files except jQuery to add async? The name of my template is Picture Window.

    Regards,
    Osama

    • EXEIdeas says:

      async is used to execute scripts after HTML parsing but for this blogger blog, XML is there. So the script will not execute as it requires some parameters and adds content to XML elements. So the solution is to use it without async

Leave a Reply to iliyas shaikh Cancel reply

Your email address will not be published. Required fields are marked *