Category Archives: JavaScript

SEO – Page Speed – Tips

One 9th April, 2010, Google has announced “As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.” As Google is using about 200 ranking secrets for ranking factor and with the confirmation Page Speed is the officially adopted as ranking factor, those facing the touch competition on website SEO, for them if their website is not fast they will be punished for it and those who have the fast website will be given preferring.
According to the survey The Psychology of Web Performance says:
“In a 2004 study, Fiona Nah found that the tolerable wait time (TWT) on non-working links without feedback peaked at between 5 to 8 seconds (Nah 2004). Adding feedback, like a progress bar, pushed the TWT to an average of 38 seconds. Subsequent attempts at non-working links revealed lower TWTs, peaking at 2 to 3 seconds without feedback. Nah concluded that the TWT of web users peaks at about 2 seconds. With regard to behavioral intentions to return to a site, Dennis Galletta and others found that they level out at 4 or more seconds and attitudes flatten at 8 or more seconds (Galletta et al. 2004)

The Effects of Slow Download Times

Even small changes in response times can have significant effects. Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks (Farber 2006). Tests at Amazon revealed similar results: every 100 ms increase in load time of decreased sales by 1% (Kohavi and Longbotham 2007). Experiments at Microsoft on Live Search showed that when search results pages were slowed by 1 second: (Kohavi 2007)”
Google has introduced the Page Speed as one of the factor of Ranking in 2010 and study is done in 2007 and with passing of time, the importance of page speed has increased and if SEO doesn’t consider the Page Speed as one of the factor they would be punished for doing bad things. Thus, if in 2007 every increase of 100ms (means the 10th part of the second) in page load effects Amazon by sales of 1% in 2007 the effect of 100ms after 5 years is almost 2-3 times and if you don’t look at the Page Speed now then your website would be punished much harder as Page Speed becoming more and more important.
From the many advantages of Page Speed some of the important advantages are:

1. Cost Reduction

It’s not always about SEO, but it’s about saving money as in the present competitive world where the sales margins are decreasing daily and to make much profit is to reduce the cost of the product as it would affect in cost reduction.
Example without Page Speed: 16000 Page loads daily
I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. So I would be using traffic of about 16000 x 352 = 5500 MB of Traffic.
Example with Page Speed: Same as above of 16000 Page loads daily
Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). But when you calculate the things i.e transfer saving 20KB would be saving our 20 KB x 16,000 = 320,000 KB i.e. around 312 MB of Transfer

2. More Visitors

Online Business depends only on 1 thing i.e. visitors, the success of online business lies when a customer recommends your website to other or visitor visit again. If your website page loading speed is low then the customer has to wait and in the competitive market no one wants to wait. Now, search engines also weigh the time taken by page to load and if the page is loading fast they give preferring page loading speed less time. Think about a news website and now think that do you want to visit a news website which takes about 15 secs. to load a page or take about 2-3 secs. to load the page. Everybody would prefer to go to those websites which loads the page fast as they can spare the time easily. It is well said by somebody “Time is money and money is Time“, so reducing the time of page loading will certainly fetch more money and also reduce cost.

3. No Changes in Web Design

Many developers and SEO think that if they make the Page Loading speed more fast they have to reduce the size of Images, clips and other things to make it load fast and I would say it’s totally misguiding principle. To reduce the time of page loading, one doesn’t have to change the things but has to tweak the things. If the website uses the JPEG images then change them into PNG and that would reduce the size about 30-40% depending from image to image. For sounds one can also change the format from avi to mpeg or 3gp of any other format, which doesn’t decrease the quality of the sounds but reduce the size. For flash, Google has just launched the new service ‘Swiffy’ which reduces the size of flash file and also increases the performance. There are other many tweaks which can be used to increase the speed and we doesn’t have to change the design of other things of the Website/Web Page required thing is only tweaking the things and if one doesn’t want to change the size of the things just use GZIP on the contents which will reduce the size of the contents and communication between browser and server would be zipped format which certainly reduces the size of contents in communication only.

4. Mobile Users

One of major advantage of reducing the page load speed is the gain of Mobile Users. The Mobile is gaining the market and now Mobile companies like Apple and RIM has making money from the Mobile Users. The segment and development of Mobile Website is different and one has to deal with only one stream. Whatever thing is used the speed of Mobile can’t reach the speed of broadband communication and it is the fact that can’t be denied. If your website has the less loading time than Mobile users would also visit your website. For Mobile users the thing which matters the Speed i.e. time taken by the website for loading and reducing the Page Speed would certainly increase the customer base of Mobile Users.

Important Note:

The primary disadvantage of the Page Speed Service is that it only caters to Google servers. It even excludes Blogger, Google Sites, and Google App. The Page Speed Service only speeds up the cacheable parts on your page. It does not rewrite marked un-cacheable resources like some images, JavaScript, and so on. This may really limit the use of the service.

How to reduce the Page Loading Speed?

There are many rules defined in many Blogs and Website but I believe the following, things reduce the time of Page Loading Speed.
  1. Minify: Compacting the code can save many bytes of data and speed up downloading, parsing, and execution time. One of the practice which is used by many developers that they use TAB’s and double/triple spaces to write code and after the code is completed reduce/remove those extra spaces. It would certainly decrease the length of the Data. If the developers doesn’t want to Minify the HTML is ok but Minify other things such as CSS Code and JavaScript and for doing those there are many free services and one of code reducing service provided by Google is Closure Compiler.
  2. Enable compression: Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Many web servers can compress files in gzip format before sending them for download, either by calling a third-party module or using built-in routines. To enable compression, configure your web server to set the Content-Encoding header to gzip format for all compressible resources. Due to the overhead and latency of compression and decompression, you should only gzip files above a certain size threshold; we recommend a minimum range between 150 and 1000 bytes. Gzipping files below 150 bytes can actually make them larger. Write your web page content to make compression most effective.
  3. Optimize images: The type of image can have a drastic impact on the file size. Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum.
  4. Combine external CSS/JavaScript: Combining external style-sheets and JavaScript into as few files as possible cuts down on RTTs and delays in downloading other resources. It often makes sense to use many different CSS files during the development cycle, and then bundle those CSS files together as part of your deployment process after the development process is finalized.
  5. HTTP Cache: The cache, which is local copies of resources, works because many resources change infrequently. When a browser can reuse a local copy, it saves the time to set up a connection as well as the time to download. The key to making the cache work effectively is HTTP caching headers, which are sent by the web server to specify how long a resource is valid and when it last changed. The HTTP protocol gives two ways to define how long a resource is valid: the Expires header and the Cache-Control: max-age header. The Expires header specifies a date after which a resource is invalid. At that point, the browser will ask for the resource again. max-age works much the same way but it specifies how long a resource is after it is downloaded instead of giving a specific date. That is nice because you can configure your web server with a constant value.
Tagged , , , , , , ,

Crash Course – Tutorial – Learn – GIT

I have read many Articles/Manuals of git on Internet and think all the articles are messy. No body tried to explain, how to use it just have given the commands and their article is complete. So, today I am here describing my experience about Git and provide the real using of Git and how to do the things.

What is Git?

Most of the persons know what is Git but for those who doesn’t know let me explain them. In software development, Git is a distributed version/revision control and source code management (SCM) system with an emphasis on speed.

What do you mean by revision/Source Code Management system

The software development is very laborious work and to maintain the backup/Management of Source Code is a very critical thing. Let me go through an Example to understand version more easily.
A client comes to you and told you write certain code for certain project and do have done it easily, as there is no problem upto this stage. You write the Code and optimized it and given to the client.
Now, after sometime the same client comes to you and told you to do certain improvement in the same package and you have done that very easily and have no problem in it.
Now, after the lapse of some large time the same client comes to you and tell you earlier project has that feature and want to implement it. Now, here is the problem, either you have to work again or if you have taken the backup then it is easy. Here we are interested in not taken backup situation. Now, if you have done the project through Version Control system the version system would take the necessary backup at different points and you can view it easily.

Advantage of using Source Code Management system

There are many advantages of using SCM but the important advantages of using SCM are:
  1. Backups: If you accidentally delete some file (or part of a file) you can undelete it. If you change something and want to undo it, the SCM can do so.
  2. Portability:SCM are designed to help to solve the problem of Portability to your code between different computers. You do not need to bother if you always copied the newest version; the SCM will do that for you.
  3. Branching/Debuggin:Say you have developed the project as there are many things involved in it. As such Designing, Security, DBMS etc. things and now if you want to fix come thing in particular branch then you open the branch and debugging or up-gradation would start immediately rather than to see the full code again where the particular branch starts and where it ends.
  4. Simultaneously Working:Say you have developing the project as there are many things involved in it. As such you create the branches of the project and distribute them to different developers and those developers can work simultaneously without interfering with another developer work and each would be having its own new code and master branch with all working simultaneously.
  5. Cross Platform Working:This the piratical advantage that if one developer is familiar with working with one type of system and another in another type the SCM system make the both codes merged and cross-platform development would be easy development as both developers can know that things are required by other. The best example is open source projects such as Apache, MySQL, PHP and many more, which run on the cross-platform.

Does Git is the only SCM and what about cross platform running

No, Git is not only SCM available, there are many others available and that to run on cross-platform but there are certain advantages which makes Git a little superior to others. Other popular SCM are CVS, Sub-Version, Mercurial, Bazaar, Perforce and Team Foundation Server. There are many available but the TOP three are Git, CVS, Subversion. To know why Git is better than others we would have to look on the others SCM and know what are the advantages we are getting.
  1. Git allows your to work offline, with others it is not possible. Even a simple log command cribs for the server.
  2. With the philosophy of Git branching, checkout, tagging is a flash. SVN is good with branching and tagging but with checkout it is slow(goes to the server for each file).
  3. Git being content addressable, can be checked for inconsistencies(CVS had corruption).
  4. There are great workflows which suite them completely and have been worked out great with Git, here.
  5. With facilities like interactive rebasing and interactive add, stashing etc, you do not need to make bulk commits or create un-necessary branches for each bug/feature.
  6. Git is blazing fast with cloning too — it packers files and hence the transfer achieves connection speeds. With SVN and CVS there is no such tarring which makes it inherently slow over the wire.
  7. Non-significant but git metadata is almost half that of CVS and SVN and there have been better reported results with Mozilla’s transition of SVN->GIT.

Important terminology – GIT

One must understand, the terms used by git manual or used in other blogs and website and without understand them, we can’t learn using Git. The important terminology used by Git are:
  1. Repository: The purpose of Git is to manage a project, or a set of files, as they change over time. Git stores this information in a data structure called a repository. The Git repository is stored in the same directory as the project itself, in a subdirectory called .git. A git repository contains, among other things, the following:
    1. A set of files and directories
    2. A set of commit objects (i.e. the finalized code or different stages of backup of code or upgrading of code)
    3. Historical record of changes in the repository. A set of references to commit objects, called heads
  2. Branches: A branch is a separate code line with its own history. You can create a new branch from an existing one and change the code independently from other branches. One of the branches is the default (normally named master). The user selects a branch and works in this selected branch, which is called the “working copy”. Selecting a branch is called “checkout a branch”.
    Example: Say you are working on a paper. You’ve gotten a first draft out, submitted for review. You then get a new batch of data, and you’re in the process of integrating it into the paper. Halfway in, however, the review committee calls you up and tells you that you need to change some of your section headings to conform to format specifications. What do you do?
    Obviously you don’t want to send them your half-baked revisions with corrected headings. What you want to do is jump back to the version you sent out, change the headings on that version, and send off that copy, all the while keeping your recent work safely stored somewhere else.

    This is the idea behind branching, and Git makes it easy to do.

  3. Tagging: Git has the ability to ‘tag’ specific points in history as being important/milestone achieved – generally people use this to mark release points (‘version 1.0’, etc). There are two types of tags available in Git are:
    1. Lightweight: Lightweight tags are very much like branches that don’t change – it’s just a pointer to a specific commit.
    2. Annotated: Annotated tags, however, are stored as full objects in the Git database. They are checksum, contain the taggers name, email and date, have a tagging message and can be GPG signed and verified.
    It’s generally recommended to create annotated tags so you can have all this information, but if you want a temporary tag or for some reason don’t want to keep that other information, lightweight tags are available too.
  4. Commit: Committing is a relatively straight forward process that adds your changes to the history of your repository and assigns a commit this name to it. The change is not sent to a central repository, though. Other people can pull the change from you, or you can push the change to some other repository, but there’s no automatic updating. You can use commit in multiple ways to commit changes to your repository, but every commit requires a log message. You can add a message by adding -m “your message”. The message can be any valid string. You can also specify multiple paragraphs by passing multiple -m options to git commit.
  5. Revision: Represents a version of the source code. Git identifies revisions with SHA1 ids. SHA1 ids are 160 bits long and are represented in hexadecimal. The latest version can be addressed via “HEAD”, the version before that via “HEAD~1” and so on.
  6. HEAD: is used by your repository to define what is currently checked out:
    1. If you checkout a branch, HEAD symbolically refers to that branch, indicating that the branch name should be updated after the next commit operation.
    2. If you checkout a specific commit, HEAD refers to that commit only. This is referred to as a detached HEAD, and occurs, for example, if you check out a tag name.
Those who doesn’t like GUI or want to learn Command line operation the list of important commands is very necessary to learn are:

Important GIT Command

GIT Command Name Command Description
Add Add is used for adding the contents of the file to index.
bisect If any bug is created after update then the command is used to find the changes that introduced a bug in project.
branch branch command is used to create, view, list or delete the branches
checkout Checkout is used for switching between branches
clone clone means duplicate, in git it is used to duplicate the project at different location
commit commit is update the changes to index, note it doesn’t update the remote repository
diff To view the changes between two commits
fetch If you want to use the objects from different project then fetch is used to fetch the particular tag or branch
init create a empty git repository or re-initialize the an existing one
log It is used to show the message sent with commits
merge it is used to join two or more histories
pull pull is the important command used to fetch in case of multiple developers doing work on same project. It fetch from and merge with another repository or local branch
push after commit the project push is required to update the remote project.
rebase In case you deleted the file and wanted it again rebase is used to Forward-port local commits to updated upstream head
reset Moving the head to specified commit or state.
show used to view the different types of objects used in a project
status An important command to view the current status of branch either the code is edited by some body locally or not and if yes then in which files.
tag Tag is used to create, delete, list or verify the tag with GPG

Perquisites to understand GIT

The only thing required for Git is the software git installation, as users from Linux are much know about GIT and I don’t talk about Linux system. My target is for Windows and on Windows Git Can be installed by two ways: i) Either Install Cygwin/Migwin on the system first and then install/download the program through cygwin, ii) installing MSysGit.
I have not used Mac/Embedded systems or other systems and thus my personal interest in Windows and using the Open Source Tools and using GCC for development with cross-platform.
I personally like the second way, as installing the cygwin will be time-consuming and to understand cygwin one has to learn the command line commands and in second option download the simple package and install it and start working with GUI or command line as choice is yours. MSysGit can be downloaded here
I am going to talk about the Remote Git and using Git Locally and update the code Remote and also side by development and distribution with many developers maintaining the code. So, search about free git providers and signup and install GIT locally and generate the SSH key and upload the Key at website, so that you can easily update the code. At this point I am presuming that you have installed the Git and signed up a free/paid Git Provider and also setup the SSH key to update the key generated through your system.
Note: For downloading the SSH Key is not required the SSH Key is only required to update the source code to confirm the developer only update the source code and not by any person.

Creating the First Project on Remote Server

On Git registered website create a new Repositories with any name you like but remember whatever name you give on downloading the code through Git the project name is changed to project folder Name. Since we are using the example and best would be Hello_World.
There are two ways download the Repositories to you system i.e. i) through GUI and ii) through Bash (i.e. command line). I will let you know both the things.
GUI: Click on Start => All program’s => Git => Git GUI. Select the clone option provided there and provide the url of your project created as source and destination as any local system location of your choice.
BASH: Select the folder or drive to use as destination and right lick mouse button and choose the option of git bash from list and in command line write git clone url (url means the project remote address) and press enter and it would ask your password and after that the folder with the name of your Repositories would be created and we have to work under this folder.

First Commit/First update of Project

Now create your project under the folder created by git, here I am creating hello world example as project but you can make any project of any language. The code of hello project is as under:
#include 				/* Including the standard i/o file */
int main(){					/* Starting the main program */
	printf("hello world!!");		/* If all the right print hello world */
	return 0;				/* returning 0 to end the program */
At any time during coding you think a stage is reached or the time has come to take the backup then do the following steps to take a backup. Go the folder of the project created by GIT and under that folder right-click on empty screen as both GUI and Bash required this step.
GUI: Select GIT GUI. It will open a new Window which will let you the changes made in project. Under un-stacked the list of files would be displayed on which the changes are made and on clicking any listed file would show the changes made by you and if the file is new then whole new file contents. Stack the changes you want to made by selecting files and press ^T and the files would move from un-staked to stacked changes provide the comment on the small text window, you can type any thing you like to give a note for the project or any other think and press commit button. Now, the changes are staked but the stacked are not sent to remote server and you can also edit the changes upto this step and the last step is to click on push and a new window would pop and again press push and after that your project is updated on the remote server too.
Bash: Select Git Bash for command line update tool, First of all check the “git status”, as it will let you know what files are changed. After you confirm the files are correctly show then issue a command of “git add file-name”. This would all the files as stack to commit, you can also supply multiple file names in “git add file-name file-name …..”. When you have added all the files and no changes are required in files then right “git commit -m ‘your message'”, git commit will make the staked changes to final stage and those changes the original files with recent committed files or stake the changes to the original files, -m is used to write a message as comment as you can provide the description about commit and the changes made by you on the project. It is one of the important thing to write and let you know what is done at the time of that commit. Now the last step to push the changes to the remote git by “git push”, this command make your local committed copy and remote copy sync, and when again somebody or you download the project the new updated copy would be provided.


Git can work with the same workflow as Subversion, with a group of developers using a single repository for exchange of their work. The only change is that their changes aren’t submitted automatically but they have to push (however, you can set up a post-commit hook that will push for you every time you commit; that loses the flexibility to fix up a screwed commit, though). The developers must have either an entry in htaccess (for HTTP DAV) or a UNIX account (for SSH). You can restrict their shell account only to Git pushing/fetching by using the git-shell login shell. In the next article, I would tell you about more advanced features for development under many developers, merging the changes and to track bugs and many more things.
Tagged , , , , , , , , , , ,
%d bloggers like this: