Every web developer should know these tips or at least take them into consideration before starting their next project. The list contains various tips that range from server configuration to application logic. Including all tips into your project might result into a bigger server load but will drastically improve your users experience (since your site will be lighting fast!). Also, don’t forget, search engines LOVE speed and its more eco friendly if your site loads faster. So why not use these?
It is incredible how much time it is spent on having awesome features in a web application but so little time spent on optimizing it. The user experience is composed of 80% page load time and 20% of the UI (user interface) and functionality. Although this fact is know for ages, there are tons of web applications and web sites that ignore this and tend to ignore each of the following tips focusing on giving the user a rich experience but ignoring the fact he has to get there first. And he has to get there fast.
The following tips should be taken in consideration before actually building your website (but they can still prove valuable if added after). The tips are a concise list formed from both Yahoo & Google experience on the web that these two web giants freely shared with us, the web community.
1. Use a subdomain for your static files
There are many explanations about why to do this, but the conclusion is that, you should distribute all your static files into HTTP requests from 2 to 4 (but no more then 4).
The perfect example would be, for example:
- www.yourdomain.com : This would be the base domain your users are going to land on.
- images.yourdomain.com : This would be the domain where you will put all your PNG’ and GIF files (or all static images)
- scripts.yourdomain.com : This would be the domain where you will hold all your javascript and other scripts (only use static scripts here!)
- static.yourdomain.com : This would be the domain where you should host all your CSS files and other static content
2. Set cookies on the www subdomain
In a few words, if you make a request to a domain above (like scripts.yourdomain.com) and you have in your application 10 cookies set, each having 0.5 kb, then for each image request you will send 5kb through. And you don’t need cookies for static content, do you?
Example: Set all cookies to "www.yourdomain.com" (not *.yourdomain.com). Since images.yourdomain.com is not part of www.yourdomain.com then it won't send them through the request.
3. Use cache-control for each of your static content to a long period
Basically, since you are using static content then, you don’t want to change it very soon (that’s the whole idea of static content). This way you can make sure that the user will not make more requests or transfer any more precious kilobytes after 1 month of inactivity on your website for example. A good choice is to set them to 1 year or more.
Example In your .htaccess file ExpiresDefault "modification plus 10 years" ExpiresByType text/html "modification plus 1 minute"
4. Name your static files with the version number
Every static file should include in its name the version of the file (ex: myFileName-1.2.3.js ). This way, in case you do need to change the static file then deleting it from the webserver and adding the new version won’t change a thing for old users since they will have the cache active in their browser.
To overcome this, upload your next version of the static file and tell your page to use the new version. This way, the browser will only make a request for the new file and the old file will be deleted from the cache (and also you should delete it from the server).
Tip for development: You should (almost) never have more then 1 file for javascripts and stylesheets.
5. Always put your CSS file in the head tag.
This is actually a fake performance improvement. The whole ideea is to let the browser first load the CSS then, since the css is loaded, the page will appear to load progressively rather then make the user see a white page for X mili/seconds and then *bam* see the whole page. You can think of it like an old-school progress bar without the bar.
6. Always put the javascript at the bottom
You won’t need the javascript unless the document is loaded (or you’re doing preloading). It is a very good ideea to insert your javascripts at the end of the file. If you use a library like jquery, put it in the head but dont forget the $(document).ready(). In both of these cases, stop using javascript inline or if not possible, don’t use it in the entire document. Have a common place where to put the Javascript.
7. Use CSS sprites but dont overuse them!
The ideea here basically a very easy comparison:
Basically if your web application has 10 images to load, made of 8 buttons, 1 background and 1 header, each having, let’s say, 10 kb then this means you will download 100 kbs in total.
The problem here is that, for these 10 items, the browser will make 10 requests. This is very very bad. Instead of doing this, use CSS Sprites.
Your 10 images would become 1 image which should have the exact size(well ok, 0,001 bytes more since you’ll have a 1px delimitation between elements. You will download the same amount of data from the server but all in one request. This is a huge improvment to the performance of your website.
However, if you overuse CSS sprites, you will end up loading images that your user may never see! For instance, if those 10 images were in fact made of 7 menu buttons, 1 for header, 1 for background and one for a nice picture of you in the contact page then, if your application is not likely to provoke users to contact you, loading it in the homepage would be a bad idea overall. Try to group common items in the same image
8. Consider preloading items
Preloading items is a very intelligent technique: For example, if your homepage contains a nice web 2.0 stylish button that says TRY FOR FREE then it might be a good idea to load (either by CSS or javascript/html) all or some of the static files that the user will find in the “TRY IT FOR FREE” area of your website. In a few words, you can load items that you think your visitors will likely access in their next step.
Again, don’t overuse this since studies have shown that with each 100ms loading time, you loose 1% of the traffic of your website. So don’t load your entire site in the homepage.
Google uses this smart technique to load the items in their homepage for their results page since the user is most likely to go there after visiting the homepage.
9 . Use gzip for all your content
This is a very important aspect to take in consideration. The improvement given by GZIP compression is close to 90% faster then the actual speed of your content without it. To use GZIP you can either do it with PHP (or any other scripting language) or with Apache with mod_gzip.
10. Use a CDN for your files
The costs of a CDN are so small nowadays that you should ask yourself, why not use it? It can give you that extra speed you need in your application to keep your users from going away. It is so simple to setup and yet so powerful, that you should do it as soon as your website turns into profit.
11. Minify your CSS and Javascript files
It is common sense to know that, smaller files in size mean smaller bandwidth usage, ultimately giving you an extra speed boost. You can use either Yahoo or X to minify your scripts.