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).

CSS: @import at-rule

Tweet

Following my previous post about progressive enhancement, today I would like to discuss the CSS @import at-rule.

The @import at-rule allows us to link external style rules. Basically, using it we can import rules from other stylesheets. The rule must be the first rule of a stylesheet (apart from the @charset at-rule). The @import rule can contain media queries (comma separated) in order to import specific media rules.

The syntax

As I said before, the rule have to be placed at the beginning of a stylesheet. Its syntax is:

@import url comma-separated-media-queries;

where:
url = the path of the stylesheet we want to import;
comma-separated-media-queries = the list of media to which the imported rules will be applied (screen, print, mobile etc). If the target browser doesn't support the related media, the rules won't be applied at all.