Adding a JavaScripts element will definitely take time to load in the browsers. If you are not careful in using them, then the performance of your site will take a serious hit.
No matter how and here you add JavaScripts; the following tips will help you to load them properly, smoothly and quickly.
1. Best Place to Put JavaScripts is just before </body> Tag.
The basic principle of a well-structured website is that the style-sheet (CSS) will be on top for design, content of the site (navigation, article, widgets, other), and JavaScripts for behavior. That means the best place for adding a JavaScript is just before
</body> tag.
We see a need for adding a script and immediately we look for
</head> and paste the scripts. But that is not wise. Sure sometimes it’s not possible to add the scripts before </body>, but always try to put JavaScripts as below as possible in your Blogger template.
By doing this you are allowing a faster optimized loading of your site in the visitors browsers; specially for mobile devices.
2. Get and Use Asynchronous JavaScripts code from the 3rd Parties
You use many 3rd party elements in your website. For example; social sharing buttons and follow widgets, advertisement and more. Always try to use asynchronous version of them. For example you can get asynchronous code for AdSense ad units.
3. Use Defer or Async loading for JavaScript.
Just by adding “defer” or “async” attribute we can optimize the loading time of JavaScript. Let’s see what they do,
- Without “async” or “defer”, browser will run your script immediately, before rendering the elements that’s below your script tag. This is not good for any website.
- With “async” (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time. You can use “async” like this in blogger;
<script async src="techinfoknow.js" type='text/javascript'/>
If this generates an error in the Blogger template editor then use “asycn” attribute like the below example;
<script async="async" src="techinfoknow.js" type='text/javascript'/>
- With “defer“, browser will run your script when the webpage parsing is finished, not necessary finishing downloading all image files.You can use “defer” like this in blogger;
<script defer src="techinfoknow.js" type='text/javascript'/>
This may give a error while saving in the Blogger template editor then use “defer” like the below example;
<script defer="defer" src="techinfoknow.js" type='text/javascript'/>
4. Always Compress and Minify a JavaScript then Use it
You should compress you JavaScripts no matter how and where you use them in your blog. It will help you to reduce the size of the script and therefore loading time of that script. Doing it is very easy as many online and offline tools are available for that.
5. Combine All the JavaScripts in to One Single Compressed .js File.
It is difficult than it sounds. It’s a more advance technique and very difficult for any platform let alone blogger. But the fruit is much sweeter too.
If you want you can do this by yourself as there are many free online tools that help in combining all the scripts in a web page. If you are attempting this then I suggest that you backup your scripts and website template first. However it will be wise to get help from an expert.
6. Wisely Using JavaScripts in Your Blog
Sometimes bloggers uses similar kind of third party scripts which definitely hampers loading time. For example; why use scripts from both “addthis” and “shareit”. Both are pretty much the same. Use only one suitable solution in that case.
7. Always Try to Find a Simpler and Faster Solution
Instead of filling your site with bandwidth hogging JavaScripts elements in your blog use a simple solution. You can do some simple outside of the box thinking which will help your blog’s performance without using JavaScript. Like for suggestion;
- Instead of using a render blocking script for label wise recent post widget, you can add them directly using simple HTML and CSS for styling.
- Instead of using a heavy 3rd party solution for social sharing buttons you can add pure CSS-HTML solution for them without any script.
Now you realize that just by adding scripts and widgets will not make your blog’s performance better. You also have to consider the visitors comfort.
If your site takes long time to load then the visitor will be annoyed specially visitors from mobile devices. And that’s why you need to optimize your blogger template in a way that loads you blog is the fastest time possible.
No comments:
Post a Comment