As a web developer, I am normally more into the back-end stuff: PHP, MVC, performance, page generation time, queries optimization and such stuff. However, it is a good idea not to forget the big picture (which is something that I tend to, by the way): server-side performance and stability are critical, but the client-side interface (JS, DOM Events, etc) plays also a significant part when talking about loading time, server load and overall performance.
In these times where cloud computing has settled and means to stay, it is very likely that our web interface is going to use several toolkits, libraries, widgets, plugins from different frameworks (such as jQuery, Dojo, Mootools), which, if used out of a coherent system, will produce a lot of server calls to download the related resources. Not only this adds up to server load, but it also can increase total load time by several magnitudes, which, in turn, makes the user feel that the entire web application is slow and crappy.
Just a few details we should never forget when optimizing our web interfaces to avoid the effect above (and this goes more as a self-reminder than as a hint):
- Use the right headers so that your image, CSS and JS files are kept in browser’s cache.
- Make sure that gzip compression is active on the server.
- Minify the JS/CSS files before putting them in a production environment.
- Use sprites for GUI pictures.
- Use a dynamic loader that grabs the related resources on-demand and asynchronously.
- Combine JS/CSS files into modules.
There are, of course, many more things you can do to ensure that your application runs smoothly, but the ones above are relatively easy to apply, and produce results in the middle / short term.
Any suggestions? Comments are welcome.