« The Summer of MasterMind! | Main | New GalaxyGoo skillset: Caché ObjectScript »

Increase your website performance

As most readers will know a browser allows only so many parallel connections to a server. This means that if an HTML-page contains a lot of included JS/CSS-files and images and such, it will not load them all at once, but a bunch at a time and then the next bunch etc. This maximum is typically 2. It isn't hard to imagine that as more files need to be loaded in to display a page correctly, it can take longer to load it in when there's a queue instead of loading in all files simultaneously. This becomes even more apparent when you take into consideration all the Ajax/widget toolkits that are popping up all over the place, which can require quite a few JS & CSS files to load in and process before rendering a page.

Today I came across an article explaining a fairly basic but sweet idea to help increase your website performance. Simply use subdomains to load in files! Apparently a browser doesn't check for IP when loading in files but only the domain. So a file originating from a subdomain is seen as originating from a different server then from the toplevel domain, and isn't put into the queue for the toplevel domain. This means that you can set up subdomains which point to the same host as the toplevel domain and your site will still load in faster! And as an additional bonus, if your site becomes so big or popular it warrants splitting across servers, you can point the subdomains to different servers and your site's code will still work without a change! If you don't assign subdomains to files in a 'random' fashion ofcourse like the code used in the article. This technique will most certainly be used in a site my girlfriend and I are slowly developing, and I am sure it will find its way into the GalaxyGoo code as well.

Please keep in mind that as with anything, this is not some sort of holy grail. Do think about proper site/file-structure when setting up/developing a site before applying this idea.

Comments

the yahoo performance (YSlow) plugin for firebug is great for highlighting this type of stuff. Plus if you watch a page loading at an asset level then whilst images, css etc are able to load in parallel, JS blocks the rest of the downloads until it's fully loaded, so ideally keep the JS files to a minimum and oddly enough keep them loading at the bottom of the page (according to yahoo) more info at http://developer.yahoo.com/performance/