One way to improve the performance of your website – regardless of language – is to reduce the amount of data sent across the network. Even though many users now have broadband connections, there are still many parts of the world – including areas of the UK – where bandwidth is constrained, not to mention the emergence of mobile connections.
Minimising plain text files
Your browser does not care about most of the whitespace contained within plain text files such as CSS and JavaScript. Stripping out this unnecessary data can considerably reduce file sizes.
Take for example the following CSS rule, which will cause links to become red and bold when the pointer hovers over them:
a:hover
{
font-weight: bold;
color: #f00;
}
The same rule can be expressed in a single line:
a:hover {font-weight:bold;color:#f00}
The saving on this single rule is 15 bytes (assuming 1 character = 1 byte), or approximately 30%.
Software exists which will automatically minimise CSS and JavaScript files, the one I recommend and use is YUI Compressor. Most popular libraries will also offer a minimised version for use in production environments (sometimes referred to as ‘compressed’ versions, but I avoid that terminology as file compression is a different thing altogether). For example, jQuery 1.11.0 has the following file sizes:
- Standard: 283KB
- Minimised: 96KB
A saving of 187KB, or approximately 66%. Since jQuery may well be the largest library on your site, reducing its size can have a significant impact on performance.
Selective library components
If a library offers optional components or a customised build, take advantage. For example, the full jQuery UI library weighs in at around 208KB. However, on one site I was only using a small subset of all the features. Creating a customised build with only these options reduced the size to 61KB – a saving of 147KB (70%).
Minify (https://code.google.com/p/minify/) is a good solution for compressing CSS and JS on the fly. Have used this for years and with gzip it helps reduce request sizes.
That’s an interesting approach, although as CSS and JS files tend to be static I prefer to minify them as part of the deployment process as opposed to on the fly. It’s always useful to know about other options though – thanks! 🙂
Pingback: Reducing the number of requests | PHP Developer