Website Optimisation
I’ve altered my already small homesite to run that bit faster by optimising both my JavaScript and CSS files, and also allowing Google to host the jQuery file.
jQuery
After reading 3 Reasons Why You Should Let Google host jQuery, I decided to do so, although I went for the easier link styling of:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
in order to do so.
JavaScript
Since I have created my own JavaScript file with various functions and what not, I also decided to optimise this file. Using the JavaScript Compressor it cut down my original file size of 4.36KB to 2KB, which is a nice reduction. Sure it makes the file unreadable, but any changes that I need to make in the future will be done on the main file, and then I’ll just re-optimise it.
CSS
For this I used CSS Optimiser, and the file size went from 5.06KB down to 3.70KB. Another worthwhile change I feel. Again this makes the file unreadable, but again any changes required will be made on a readable file and I’ll re-optimise it.
However, I did find a bug with CSS Optimiser, but have been unable to report it as their bug report page wouldn’t load for me. The bug revolves around background positions for CSS Sprites. When it creates the code for a background position, it leaves out the -position part and simply adds something like background:-38px -0px; which obviously doesn’t work. So I had to change these by hand to background-position. An annoying issue for sure but one I can live with.
I think it’s well worth taking this time to make these small optimisations, as we all know how annoying it can be for a website to have a slow load time.
Hi Ian, I’m a long time listener, first time caller. Great show.
While optimising JavaScript is always beneficial in a production environment, I find the easiest (read: lazy) way of keeping CSS compact is to simply keep each definition on one line. E.g.
a { background #abcdef; font-weight: bold; }
b { color: red; }
c { left: 50px; position: absolute; top: 50px; }
Hopefully I’m not alone in thinking that this isn’t unreadable as long as you keep your attributes in alphabetical order (I know, I’m reeeaaally anal that way). Compressing the above has minimal benefit to download size whilst removing the additional step of using a 3rd party optimiser which may – as you have found – do something unexpected with your code.
Hi Jon, many thanks for your comment and readership!
I know what you mean, although I personally am not a fan of the one line CSS definitions, because I usually miss things out when reading through them again and sometimes the lines can get far too long for my liking. But that’s just a personal thing.
I completely understand the keeping them in alphabetical order though!
And yes you’re right about the 3rd party optimiser potentially then causing problems (as I’ve shown) but I tested it locally to iron out anything and that was the only thing that wasn’t working. But since my site is so small, it makes it a much easier task.
Now you’ve got me thinking of a new blog post “Styling CSS Styles” – all about people’s different methods of writing their CSS definitions…
good idea i think…