Sunday, June 21, 2015

Add External JS, Fonts or CSS without Much Effecting Page Loading Speed!
Some bloggers have craze of adding fonts. They sometimes add 10-15 fonts on a single blog to stylize their blog. Some bloggers have craze of blog styling and adding advanced functions in their blog using JavaScript and they add JavaScript and CSS externally (using link) and then they say- ‘Oh my gosh! How my blog is so slow!?’. 
Is it Similar to your story? Then today we have something to tell you!
Today, we will show you how can you add JavaScript & CSS which are hosted externally without much effecting your blog’s loading time. Actually, millions of Blogs about blogging introduce great widgets everyday to newbie bloggers. As, ‘newbie’ bloggers, they add that widget/gadgets in their blog but they never think that it can effect their blog’s loading time. Most of the bloggers upload widget’s CSS or JavaScript on an external server and when newbie bloggers add that widgets, their blog start behaving slow. So without talking anymore, let’s know what’s new thing in this post.

#1- Add Google Web Fonts Without Much Effecting Blog’s Page Loading Speed

Almost 90% Bloggers add some fonts (at least one) from Google Web Fonts in their blog. And, some bloggers add more than 5 Google Web Fonts in their blog. The Bloggers who have added 1-2 fonts, do not feel any changes in their blog’s loading speed but the Bloggers who have added more than 5 Google Web Fonts, feel a increase in their blog’s loading speed. You know why? Imagine- You have four bowls that are its one third filled. Your mom said to you to take that four bowls to hall of your home. And, it took you 5 minutes because you have two hands and in one time, you can only carry two bowls. But what if you collect all the material of four bowls and put it in one bowl and then take it to hall? It will take you only 1-2 minutes. Same as in Google Web Fonts. You add multiple links for multiple fonts but do you know? A single link can upload multi fonts in your blog and by doing this, you can decrease your blog’s loading speed in good percent. Now let’s learn how to do this:
  • Suppose, you have these fonts installed in your blogger blog:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Bree+Serif' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'/>
  • It will increase your blog’s page loading speed but if you don’t want to let it increased, use below like link:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Bree+Serif|Oswald|Dosis|Varela+Round|Quattrocento|Exo+2' rel='stylesheet' type='text/css'/> 

How to Create One Font Link from Multiple Font Links?

Its easy! You just have to remember what font you want. Okay… let me explain:
  • Suppose you have two font links as follows:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'/> 
  • And you want to create one link of above two link. For this, you will have to remember the font names.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'/> 
  • Now to make one link, you have to place first font name (Oswald) and then second font name (Lora:400,400italic) and between them, add | sign:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Oswald' rel='stylesheet' type='text/css'/>
  • Done! Now, this link will load Oswald and Lora font which will decrease your page loading speed in good percent. (you can add more than 2 fonts also!)

#2- Adding all JavaScript or CSS in only one External Link

I think, you are not the developer of your template. Right? If yes, then you are using a designer’s template with credits. Of course right! Nowadays, designers add their credits and not only add credits but they add complex credits which are hard to remove. They sometime add different JavaScripts externally to protect credits from being removed. But these JavaScripts make template or say your blog’s loading speed too poor. So to prevent them from increasing your blog’s loading speed, I have a trick!
Search for an external JavaScript file in your template. (Tip: Most of the external JavaScript file links end with .js except Google Drive) Open it and copy all the JavaScript from it and now, paste it on a simple Notepad file. Do this with all external JavaScript file links (copy the JavaScripts and paste it below the before pasted JavaScripts on the Notepad file but give at least one line space) and then, save it with .js extension. Then follow the steps mentioned:
  • Go to YourJavaScript.com
  • Type your email, upload your file using given uploader and then type right captcha and then click on upload.
  • The link of the uploaded file will reach within 1 minute in your email id.
  • Place that link and remove all other external links from which you had copied JavaScripts and pasted on Notepad file.
  • Save Your Template and you will see a huge decrease in page loading speed.
You can do the same with CSS files but instead of saving the file with .js extention, save it with .css extension and upload it through DropBox.

Need Help?

If you are a newbie and don’t know much about External links, how to indentify JavaScript, how to identify CSS, then don’t worry! I am here to help. You can drop a short comment with your email below and I will help you personally to increase your blog’s loading speed. Thanks!