Increase your Pagespeed by Defer Loading of Javascript



According to Google webmaster policy you must Eliminate the Java script above the fold.Because large size of java script increases the loading  time of your page and cause the user to leave your site.In other words it block your content until the whole script will be loaded.Mostly this problem occurs when  if you are using third party ads program or your own special function code like Most popular Jquery scripts.It will cause problem to your visitor who have slow dial-up connection or mobile user.You must be careful for your visitor.That is why tried to eliminate big Scripts  as possible as.

Above-the-fold
Image|Source

Some time it is not possible because we care about our website design and that is why there are always few jquery  files in above </head>  tag.It facilitate the use experience like recent post,Jquery social share etc.

And that are the scripts that may slow down your Page Speed and  Of-course it may affects your on page SEO. Probably you might think about why not put that script somewhere else like under footer.But that's not smart idea .Still your page webpage noticed by search engine as SLOW.

Recommendation:

If its not possible to remove some Java scripts then it should be in lined.Inlined java script cause the web-browser to first Load your content and then download your script.You can inline some small script for better result.

Inline Small JavaScript:

If your external script are small then you can call it directly from your HTML document.It look likes This:
<html>
  <head>
    <script src="small.js" type="text/javascript"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
</body>
</html>

This will cause the Browser to render Above-the-fold content first.

Defer loading of javascript:

Inline java script still not good idea for large scripts with having size of 20KB or above.So the another solution which is given by google that below code must be added in your HTML just before </Body> tag.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "example.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

This cause block your external script until your content is loaded in other words it creates little delay to load it.You can use it by just copy that code replace "Example.js" with your java script name and place it before </body>.


1 comment: