Speed, we all love it and want more of it! Fast computers, faster internet connections and faster internet browsers are all well and good, but what can we do to make a faster web page? Every day, web sites and online stores are getting flashier.  CSS and JavaScript can do a lot of cool stuff, and images can help a site grab your attention.  Recently, Google has begun using page load times to adjust search rankings, so make that one more reason to speed things up a bit. What I am going to talk about today will Smush your images, compress your JavaScript and minif your CSS, even use Sprites to help bring that slow site up to speed!

To start this process you need to make sure that the major design and development of the site is DONE! This is because compressing Javascript and CSS will make it much harder to read and thus to edit.  Also, we will be merging your JS (JavaScript) in to one larger file instead of 5-6 smaller files.  Before we do this, you should BACKUP YOUR FILES!!! I will now give you a few minutes to do that…..

OK, everything is in a safe place, so lets start.

1. Image sprites have been used for years in video games, on old computers and NES games from the past.  Programmers would use the same image over and over again, and as long as the image did not repeat on the X or Y axis, you could have one large image made up of a bunch of smaller images viewed together. The image will always be one large PNG image with a transparent background and cannot repeat. How do you make this image you might ask? well let me show you! Right click on this link Spriteme and bookmark it. after that Thank Spriteme.org for this link and tool. Next, go to your site and then click on that bookmark, now it will take all the images from your CSS files and connect them as one bigger image, then will give you the CSS needed to use the image.  All you have to do is find and replace the CSS code and upload the image to the lib files of your Yahoo! Store.   Voila! That is how you speed things up with a sprite.

2. Smush.it is part of the Yahoo! Network that you can use to take all the images on your site and compress them without losing too much quality.  You don’t need to do this on all your images, like products and such, but all those that make up the main body of the site (like the one we just sprited) and home page images that don’t change often. The fastest way to “smush” all the images on your site is to download a Firefox ad-on called YSlow (it’s an add-on for another add-on called firebug) which you can find here: Firefox, firebug, YSlow.  When you install all 3 you will have a button for YSlow in the lower right.  Click that and you will have a link for “tools.”  Click that link and YSlow will scan your site and give you some options.  One will be “All Smush.it” that you can use to scan and then smush all your images.  It will even give you a zip file to download with all the images! Download and decompress the zip to start replacing your site’s images with the newly compressed versions.

3. This is the hard one: we need to take all the javascript files you have on your site (not the one named JQuery) and save them into one big notepad file (NOT WORD!) you can open any .js file in notepad and just copy and paste to another open notepad session, from there name it something that you can remember like merge.js and keep the .js at the end! once you have that done upload it to your lib files or your site files and add the javascript code to the header with the rest of the JS code, remove all other JS code (unless one is named JQuery) NOW test your site and make sure every thing still runs… Works?.. good!

Next, we need to take that same file and go to Bananascript, a site that will take your JS file and compress it, which will render it illegible to mere humans muahahah but keep track of the html code it gives you because we will need to define a specific character set.  The code it gives you should look like this:

<script type="text/javascript" charset="ISO-8859-1" src="MyScript.js"></script>

That site will even tell you how much you saved, don’t you like a web page on a diet!

4. The last step is to compress the CSS code, what this will do is it will remove all spaces and comment code from the CSS file. Just think that every space that is in that file take time for your computer to render and we will remove that space and comments, once again this will be hard to read so make sure you keep a back up.

Open YSlow again and click on the “tools” part just like we did with the Smush.it images and this time click on the YUI CSS Compressor. That will open a page that has all your CSS on one line and it will show what CSS file it got the code from, just copy and paste into the CSS file in your site or store and make sure to replace the old with the new and that step is done.

After the 4 tasks you see here you should have a nice gain to your site and you do want to make sure that you follow in that order or you might have to undo all that work and test between steps. Keep in mind that you can do one of the 4 steps or 3 but you don’t have to do all 4, just work where you need to. Enjoy!