Web Development: optimise JavaScript and CSS

Tweet

Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.

I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).

RTT

First of all, we should consider what's the round-trip time.
RTT is the time it takes for a client request to reach the server and get an answer from the server itself. It doesn't include the data transfer time.
The RTT is usually measured in milliseconds.
In order to produce an efficient web page, we should try to reduce RTT and thus reduce the number of HTTP requests and responses.
Already confused? Don't worry, just keep in mind that we have to reduce RTT.

JavaScript external files

In our projects, we are used to link and include JavaScript external files. We do it by placing a link inside the head of our document. It is a good practise, because a modular approach is always good: we can reuse components, code, functions and so without writing them more than once; and when we need to improve the code, we just need to change it once.
This can lead to a high number of external files. And that's not good for RTT. Infact, loading a lot of files, produces a lot of HTTP requests and responses. This is definitely not a matter of kilobytes: what matters here is the number of times the client is making a request to the server, waiting for the proper reply.
Reducing the number of JavaScript files will reduce RTT. I will suggest to use 2 or 3 files: one with basic functions, and 1 or 2 with advanced functions (only to be loaded in some special page).

CSS stylesheets

What we saw for JavaScript files, is completely valid for external CSS stylesheets. I know that we like to create different stylesheets for different media type or even target browser. However, we should not overdo it; we should avoid not necessary HTTP requests.
We then should consider the fact that many web gurus are saying the @import rules are to be avoided as well. A nested CSS stylesheets situation is decisively not good in term of RTT.

The correct loading order

As for the correct order for loading external resources, I've noticed that it is better to place CSS stylesheets before JavaScript files. In the head of our document, we should place links to all the stylesheets and afterwards, the links to the JS files.
I've seen charts which explain how the RTT is reduced by one third, using the above method. And that's not bad at all.
If you have specific scripts in the head of the document, remember to put them after the links to external files.
To summarise: put external scripts after external stylesheets; put inline script after all the other resources.

I hope you liked the article. If you want, please share your experience.