Keep your code at minimum
Minimize DOM access
DOM modifications you should consider limiting your markup. It’s a good reason to switch to HTML5 and leave those old XHTML, HTML4 behind. You can check the number of your
DOM elements by typing in Firebug’s console:
Compress your code
Well, I don’t compress my
main.js, but check if you have any jQuery plugins that are not compressed, do it (remember to keep author’s notes). Below I listed some options for compression.
- YUI Compressor (my favorite, used by jQuery team), beginners guide, second guide and official site
- Dean Edwards Packer
GZip Compression: Idea behind this is to reduce time of transferring data between browser and server. When it’s done you get your file with
Accept-Encoding: gzip,deflate header. It has some disadvantages though. It takes: CPU on both server-side and client side (to compress and uncompress) and disc space.
eval(): While sometimes it may bring some time efficiency, it’s definitely wrong practice. It makes your code look more dirty and it crashes out most of the compressors.
Using proper CDN
Many webpages now use CDN (Content delivery network). It improves your caching, because everybody can use it. It can also save you some bandwidth. You can easy ping or firebug those servers to check from where you get data faster. Choose CDN by matching your readers localization. Remember to use public repositories when it’s possible.
Some CDN options for jQuery:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js– Google Ajax, information about more libraries
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js– Microsoft’s CDN
http://code.jquery.com/jquery-1.4.2.min.js– Edgecast (mt)
head section, but only if it’s loading asynchronously.
Load tracking asynchronously
This one is very important. Most of us are using Google Analytics for statistics. It’s good. Now look where you put your tracking code. Is it in head section? Is it using
document.write? Then you should blame yourself for not using asynchronous tracking code for Google Analytics.
This is what asynchronous tracking code for Google Analytics looks like. We must acknowledge that it uses
DOM instead of
document.write, which may be better for you. It detects some of the events before page load which is very important. Now think of all the users closing your page before it even loaded. The cure of missing page views has been found.
Don’t using GA? It’s not a problem, most of today’s analytics providers will allow you to use asynchronous tracking.
Ajax request have great impact on your site’s performance. Below I pointed some tips about ajax optimization.
Cache your ajax
Look at your code. Is your ajax cacheable? Well, it depends on data, but mostly your ajax requests should be cacheable. In jQuery your requests are cached by default, not including
Use GET for Ajax Requests
POST type requests takes two TCP packets to send (headers sent first, data next).
GET type request takes only one packet to send (which may depend on your amount of cookies). So while your URL length is less than 2K and you want to request some data use
It’s both simple and extremely powerful when it comes to performance. It grades your website and shows you what you need to correct, what should be taken care of.
Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request.
getImageData(). What is more it’s very efficient. You can gain about 35% compression without minifying your data. Lossless compression! I must point out that for larger scripts you can feel “some” load time while image is pointed to canvas and pixels are read.
For more information about this one check out this article from 2008.
Hope you guys liked this article. If yes, remember to share it and to say hello to me on twitter. Stay in tune for some further posts about serious performance optimization.