Daniel Groves

How-to: Improve website loading times with free online services

Photo by lrargerich
Photo by lrargerich

Fast loading times are vital for any website, and one of the most effective ways to speed up a website is to minimise the size of all of the files that need to be downloaded, weather they are CSS, JavaScript or images.

Doing this really is a quick and easy process – it isn’t labour intensive in the slightest. The first thing you will want to do is take all of your CSS and JavaScript files and duplicate them. Once you have done this add .min into the extension on all these new files, what was main.css should now read main.min.css and lightbox.js would read lightbox.min.js, for example. Optionally, you could copy the original files into another folder for safe keeping, or you could just leave them.

My CSS Folder
My CSS Folder

Now, if you decide to watch the video where I show you how to do this, I do apologise in advance if you can here my MacBook fan in the background, but backing-up a DVD is very CPU intensive, and so the fan did start to spin up during the MP4 encoding process.

CSS

CSS-Drive CSS compressor loaded with my print.css file
CSS-Drive CSS compressor loaded with my print.css file
  1. Navigation your browser to the CSS-Drive CSS Compressor
  2. Set the compression mode to “Super Compact”
  3. Set the Comments Handling to “Strip ALL comments”
  4. Hit the “Compress-it!” Button
  5. Copy and Paste the output over the top of everything in the appropriate .min.css file
  6. Repeat with other CSS files

If after this you get any problem try fiddling with the settings. It’s probably just mis-interprited your CSS and so different settings may give better results.

To give an idea of how effective this is, and what exactly it does here is my print.css file before compressing. 


body {
	font-family: Helvetica, Vedana, Sans-serif;
	font-size: small;
	line-height: 150%;
	}

#mainNavigation, #footer, #comments form, #comments h3 {
	display: none;
}

h1 {
	padding: 10px 0 0 10px;
	font-family: "Blue Highway";
	font-size: 400%;
	letter-spacing: 1px;
	word-spacing: -0.22em;
	text-transform: lowercase;
	font-weight: normal;
	text-align: center;
	}
h1 span {
	color: #9A140F;
}

a:link {
	color: navy;
}

a:link:after {
	content:  " (" attr(href) ") ";
	font-size: small;
	color: #333;
}

a.footnote-link:link:after {
	content: "" !important;
}

And exactly the same file after compression. 


body{font-family:Helvetica,Vedana,Sans-serif;font-size:small;line-height:150%}#mainNavigation,#footer,#comments form,#comments h3{display:none}h1{padding:10px 0 0 10px;font-family:"Blue Highway";font-size:400%;letter-spacing:1px;word-spacing:-0.22em;text-transform:lowercase;font-weight:normal;text-align:center}h1 span{color:#9A140F}a:link{color:navy}a:link:after{content: "("attr(href) ") ";font-size:small;color:#333}a.footnote-link:link:after{content:""!important}

As you can see the new file isn’t exactly readable, which is why we keep this in a .min.css file. This way it is easy to see which is the compressed version of the CSS for the live server and which is the un-compressed version for development.

Once you have done this you will need to update your links on your live site to point to these new files.

JavaScript

Compressing JavaScript is just as easy as compressing CSS, except we have to use a different website this time.

jscompress.com loaded with some jQuery
jscompress.com loaded with some jQuery

To compress your JavaScript:

  1. Open JS Compress in your browser
  2. Copy and paste your JavaScript into the text area
  3. Ensure you have “Minify (JSMin)” select from the drop-down
  4. Hit the “Compress javaScript” button

This works very much like the CSS compressor. I put the following JavaScript through the compressor:


(function($){

	$(document).ready(function() {

		$('#lastfmButton').click(function() { // Mouse Click

			$('#footer .containor').removeClass('selTwitter');
			$('#footer .containor').removeClass('selRss');
			$('#footer .containor').addClass('selLastfm');

			$('#footer .icons ul').removeClass();
			$('#footer .icons ul').addClass('lastfmSel');
		});

		$('#twitterButton').click(function() { // Mouse Click

			$('#footer .containor').removeClass('selLastfm');
			$('#footer .containor').removeClass('selRss');
			$('#footer .containor').addClass('selTwitter');

			$('#footer .icons ul').removeClass();
			$('#footer .icons ul').addClass('twitterSel');
		});

		$('#rssButton').click(function() { // Mouse Click

			$('#footer .containor').removeClass('selTwitter');
			$('#footer .containor').removeClass('selLastfm');
			$('#footer .containor').addClass('selRss');

			$('#footer .icons ul').removeClass();
			$('#footer .icons ul').addClass('rssSel');
		});

	});

})(jQuery);

This rather spaced and lengthly piece of JavaScript was reduced to this: 


(function($){$(document).ready(function(){$('#lastfmButton').click(function(){$('#footer .containor').removeClass('selTwitter');$('#footer .containor').removeClass('selRss');$('#footer .containor').addClass('selLastfm');$('#footer .icons ul').removeClass();$('#footer .icons ul').addClass('lastfmSel');});$('#twitterButton').click(function(){$('#footer .containor').removeClass('selLastfm');$('#footer .containor').removeClass('selRss');$('#footer .containor').addClass('selTwitter');$('#footer .icons ul').removeClass();$('#footer .icons ul').addClass('twitterSel');});$('#rssButton').click(function(){$('#footer .containor').removeClass('selTwitter');$('#footer .containor').removeClass('selLastfm');$('#footer .containor').addClass('selRss');$('#footer .icons ul').removeClass();$('#footer .icons ul').addClass('rssSel');});});})(jQuery);

So, whats the difference? Well as you can see all of the JavaScript is now on one line. This removes characters which in turn makes the document smaller. You may also notice that all unnecessary spaces have been removed this further reduces the file size of the document.

Just like when we compressed your CSS you now need to copy-and-paste the output of the JavaScript compressor into your new .min.js file. Once you have done this you will also need to update your script tags in your websites head.

Images

Really, we should compress our images properly in the first place, in our graphics application, not not everyone knows how to do this properly, besides, why spend ages doing something in Photoshop that we can do in a few minutes online?

This is where a service by Yahoo! comes in helpful. I think this tool is best described by the team behind it.

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

~ smushit.com

Basically, Smush it takes your images and uses lossless compression to make the file size smaller without sacrificing on quality.

Yahoo Smush.it!
Yahoo Smush.it!

Smush it works, as well, which is not something I expected to be able to say, and the saving on the size of images is truly amazing. Take a look at this image. It is 53KB, and was produced and optimised is Macromedia Fireworks CS3.

Now take a look at this image. This is the output from Smush It after I uploaded the original, above.

Now take a look at these two images. You can barely tell the difference, can you. In fact, if they weren’t side-by-side I doubt you would have noticed the difference at all. Look at this site1. All of these images were optimised with the service, did you notice? No.

So, how do we use this amazing service? Easy as pie.

  1. Navigate to Yahoo! Smush It
  2. Select Uploader
  3. Select “Select File and Smush”
  4. Highlight all of your images and hot “Open” (or “Select” or whatever it says on your Operating System)
  5. Let it work it’s magic and download the results.
  6. Now simply back-up your original images and over-write them with your new one

Told you it’s easy.

Conclusion

So, that it. Three easy ways to make your site faster using free online services. It took me about 10 minutes to do all of the files on my website, so it really doesn’t take long. What are you top-tips for making websites faster?

  1. As of time of writing. You never know, I may redesign by the time your reading this. [↩]