How to optimize your site

February 20th, 2008   Filed Under CSS, Javascript, Technology, Tips & Tricks, browser, gyan  

Optimization means “Most desired possibility under a restriction expressed or implied”.
Why:
We need to optimize our site so that the pages come with minimum flicker and downloads at the light speed. Some of the audience will also say why we need to optimize so much when the broadband speed is growing up higher and higher. The answer from my experience would be .. “Why to spend more money when I know I can get more things by spending the same amount of money?”
By keeping things unoptimized we are doing bad both to the user and ourselves. Most affected is the user and hence our business. We force our users to spend more data when they visit our site. So their money gets hogged up by the ISPs. Moreover even our business is not benefited out of it. The other thing is time. If your site is getting downloaded to the users in no time the user is happy because the user feels that he/she doesn’t have to waste their time in gathering some information. Doesn’t matter how lazy the user is … the user doesn’t want us to be lazy. And that is the key which gives us money directly or indirectly.

So when someone speaks about optimization he/she has to always keep the bigger picture in mind.
In order to optimize your site you need to take care of these thing:

1) Compress your images
2) Club/merge your images
3) Be miser in writing code
4) Deliver your assets from CDNs
5) Properly position your js calls
6) Keep your site accessible
7) Expire your assets in longer periods
8 ) Follow web standards in laying out

Now I am explaining each of the points one by one:

1) Compress your images: Most of the times I have seen people using images which are not compressed using the right compression utility. When I say optimize image I mean also decide in which format should be used to save the image.
The widely used and supported formats by all the A-Grade browsers are :

a) Gif: You choose this format when you see your images are flat colored. Reason being it uses the allowed color gamut and shares the color information with all the defined pixels. So, the more colors you allow the more the size of the image. For example, if you are saving an image which uses only 4 or 5 colors then you choose this format. Also you use this format when you need a clear transparent part in you image.b) Jpeg: This format is used when you see some gradients(colors harmonizing from one range to another). In this case if you use .gif format your color gamut will increase and so your image size. The jpeg image compression saves the shares the pattern all over the image and common patterns are saved as single information and tiled across. Hence if you have an image with a gradient of sky blue to white at 90 degrees then no matter how wide image you save, the file size increases only marginally.

c) Png: This format is more or less same as the Gif format, but has a capability of saving a transparent part with a shade of some color. i.e., starting from some color and ending at transparent. For example you save an image which has a shadow effect.

2) Club/Merge your images: We use lots of small small images for a module or lets say the common parts of our pages. Rather than creating these many images you can make a matrix of such images and call them as the span or div backgrounds and position them accordingly. This saves you unnecessary calls to different assets and the download time drastically comes down. One would say how does it matter? It is only a 43 bytes images. For this I would say that you need to install firebug and see the request and response headers which are the part of a single image call. Its huge data.

3) Be miser in writing code: Your browser feels bliss when your page downloads in a second. The less the code is on the page the lighter is the page. Yeeaah so whats the big deal in that statement? The big deal is that everyone knows but no one cares. Write as less code as you can … make image names as smaller as you can. Put image paths or URLs as smaller as you can. Be a “kanjoos makkhichoos”(an indian proverb)…meaning the great miser. Cut down in naming your css classes.
In javascript use a library to reuse the common codes… jQuery is the one I would suggest. For the css you may merge all the float lefts into single float left having different selectors declared at once. If you don’t get on that revert back to me.

4) Deliver your assets from CDNs: Those of you who don’t know what a CDN is … “A Content Delivery Network (CDN) provides fee-for-service delivery of streaming content via the Internet. Their network consists of linked “edge” servers throughout the Internet that help reduce network congestion and server overload for content delivered”. So if you can use CDN your assets delivery becomes lightning fast. Just try googling around for the “CDN servers”

5) Properly position your js calls: Your js file calls actually halts the display of your page untill the whole file is loaded and interpreted by the browser. You may not realize that if you have less amount of code written in the js files. Whatever is the case you should always make a habit to call only the js libraries inside the head tag. Rest all of them should be called just before you end your html tag. So what happens is your page is displayed fully and the user is not frustrated by seeing a blank white screen. Believe me a users blood boils when he/she sees the blank screen.

6) Keep your site accessible: This point tells you that your site should be accessible in the conditions when there is no javascript in a browser and all the images are off and only the text and hyperlinks works properly. The real reason behind being an accessible site is to be accessible to the disabled and accessible to the page readers. So if you have given alt content to all the important displayed images the page readers will read and tell that to a blind person accessing your site. There are hell lot of things related to this for which I will write a different story some day.

7) Expire your assets in longer periods: What does it mean? It means that every asset(image, page, css, cookie, js, flv, wvm) has a header called expire. And it speaks about the expiration date of that asset. So if your asset doesn’t expire till a longer future time, the browser basically serves that asset from the cache(locally stored version). Hence the first time a user comes to your page it may take some time to download your assets, but the next time it serves from the cache. So the expiry date should be set on the next release anticipated date so that after that your user should get a new content if changed. There is some complexity around this, which I will tell later how to handle it.

8 ) Follow web standards in laying out: Tables are tables they are not frames and they are not containers for your layout. There is a special tag created for layout called division(div) where you should stuff your content. Table is a chart where you display a list of information. So promise me … next time you will not do a misuse of table. And love Div for layouts.

If your site or page has these 8 points checked, I bet your site is one of the worlds’ best site. And I thank you for doing such a wonderful job. Enjoy madi !!

Post Linx
Permalink | Trackback | | Print This Article |


Comments

Leave a Reply