Speed and pageloads
// June 27th, 2009 // Comments // Development
Loading times are always important so speed and pageloads is high on my list of things to do, not just for this project, but also as part of my further development as a webdesigner.
For this project however I will try some, for me, new things and see how they effect the website’s performance. The first thing to do will be to consider http requests and see how to make them as few as possible. This I plan to do by taking the three categories CSS, Javascript and Images and rework them slightly so that I hopefully will get very few http request.
For javascript, which I will have a few of, I want to bundle the scripts into one, or possibly two http request. This is done by adding the different calls into one combined call that hold all the javascripts required. All javascripts will of course be minified to make them as small as possible and I will carefully look over the plugins to make sure redundant javascript is not added by them. I am considering adding the jQuery library from Google repository, but I’ll have to play with that a bit to see how that work out and what the benefits will be when combined with my other time saving efforts.
For CSS I will use a similar setup, taking advantage of the code written by Rakaz that allow the same combination of files as for javascript files, reducing the CSS files into one single http request. I will use the minified approach here as well and we’ll see how much this will speed things up.
For images I will use sprites, which is essentially one big picture with many images that is used instead of many smaller ones. This will seriously reduce the number of http requests and I will use this throughout the website. The sprite itself will of course be minified as much as possible without reducing the experience. All images are of course plced in the CSS and not in the actual HTML code.
This is all good and it will reduce the number of requests alot, but I can do more. Javscripts that are not essential should be placed at the end of the document which means that altough it att a second javascript http request it should increase speed for the visitors as it is added after the page loads. The actual pageload will be a little higher due to the second http request, but it will feel faster.
