Thursday, June 16, 2011

Optimize your website

At work as programmer i need to optimize page load time.

So here is some tweaks which you can use for your own web sites.

1. Optimizing your CSS and JS ( Javascript, Jquery and so on... ).
All pages uses css and js. Most of time they are huge. like 50-500 kb for css and same for JS.

Most of time i use the tool to see how fast my page is loading:

http://tools.pingdom.com

Best way to optimize CSS is:
Explode CSS files by parts and use only required ones for pages you are using. After compress it with such tools as http://www.cssdrive.com/index.php/main/csscompressor. And in same time combine these ones together into one single load ( search google for CSS.php combiner ).


Best way to optimize JS is:
Explode by files and use only required code you are using. Compress these files with tools like this: http://www.compress-javascript.com/ ( Some codes don't work after compress, you can try to find another good compressor which will compress better than this one. Let me know if you find anything.. )
In same time combine them with combiners into one file. ( search google for JS.php combiner ).

2. Cache! Best way to optimize website is to use cache.
There also some good tweaks about cache. For example using GZIP cache.
Most of time gzip compressed code with 80% success. For example if you code is 100kb, gzip will compress into 20kb and load it into user browser.
To check gzip compression im using such tools as this one: http://www.whatsmyip.org/http_compression/

3. Images! Less images - better. But as you know, logos and so on.. are important for web sites.
Big web sites as facebook using very nice technique - one big image with all images: http://static.ak.fbcdn.net/rsrc.php/v1/zi/r/uVYVvAILt0K.png

4. HTML, PHP code optimization gives some results too. Spaces, tabs, else { } and so on are pretty good on lowering some kbs...
but each kb less will be some gigabytes less for server load per day-week-month if your web site is big!.

5. Javascript lazyloading - it is very nice tool for loading images. It will load image only if user sees the image. If the image is not in visible spot, it will not be loaded.
Source: http://www.appelsiini.net/projects/lazyload

And remember, that visitor is important of all web sites!