Optimizing HTML, CSS and JavaScript
October 24, 2011We all agree that performances (loading speed, UI responsiveness, etc.) are important for a website. The speed of pages has a big influence on User Experience. Nowadays with the proliferation of mobile devices, performances have a big impact in term of cost too: the price of mobile plans are based on how much MegaBytes are downloaded/uploaded.
Improving website performances is not easy and it is time consuming. We have to remember that a web application has two sides: the server side and the client side. Of course, both must be optimized, but in this post I discuss about some tools to optimize the client side.
The client side of a web application is mainly composed by HTML, CSS, JavaScript and images thus we have to optimize those elements to speed up ours pages. Fortunately, a lot of tools exist and can help us in this long and complex task.
At the moment, Google Page Speed is one of the most complete tool that analyzes a page, finds which are the weak points and suggests how to correct problems.
Optimizing HTML
A good web page separates contents (HTML) from presentation (CSS) and imports JavaScript files at the end of the body tag loading them asynchronously (if it is possible). In addition, the HTML code should be minified: for example, if we are using Django, we can use the spaceless tag in our templates.
Optimizing CSS
Like HTML, also CSS files could be minified and optimized. Useful tools are: YUI Compressor and sCSSors (this is a tool created by me and no longer mantained).
Optimizing JavaScript
JavaScript is the interactivity core of a modern Web application. An optimized JavaScript code enables to speed up the User Interface of our websites. A very interesting tool to improve our scripts is Google Closure Compiler.
Other resources
