Web Page Speed - How Does Your Site Rank? Pt 1

It seems like lately many of my existing clients and some new clients have come to me worried about their page speed; I have had many emails referencing Google's Page Speed Online test page specifically.  Yes, it is true that one of the factors on how your site ranks in Google is page speed, but it is only one factor of well over 100 factors. Some of the basics for making your page speed faster include caching, image sprites, and compressed files.  I did a test on my own website to see how various factors affected my page speed according to Google's Page Speed Online: http://pagespeed.googlelabs.com/.

Starting Out: 82/100
I am beginning with a score of 82/100. Not bad, but not great. I had no High Priority suggestions, but I did have both Medium Priority and Low Priority. I am going to begin my testing by creating some image sprites.  Image sprites are images that have many sub-images in them.  For example, the Facebook buttons such as "like" "share" "send" etc, all use a sprite so that the little icon that is displayed changes based on what the button is for.  All of those little icons, the thumbs up, the check mark, the text bubble, etc, are all part of the same image (see Facebook image sprite to the right). Before creating my image sprites, there were 9 images on my home page.

After Image Sprites: 90/100
Wow, what a difference! After creating and implementing the image sprites, I was down to 2 images. The page is loading much faster because the browser doesn't have to look for a bunch of different files, and the server doesn't have to serve up so many files. Combining CSS and JavaScript files into less files is typically what I would do next.  However, since my site does not have a lot of features (no mini cart, no scrolling images, no customer registration) that require the use of JavaScript, I don't have many external files.  I simply have one CSS file on my home page.  When I look at my results in Google, I have no Medium Priority suggestions anymore; my only suggestions are Low Priority page speed suggestions.

Minifying CSS: 90/100
Ok, so my CSS wasn't overly full and minifying it didn't do much for me as far as page speed.  Minifying CSS takes out all of the fluff.  Any spaces, line breaks, comments, and pretty much anything that isn't strictly CSS must go.  Because of this, I would only suggest doing this if you are done making changes to your CSS (I keep a back up on my computer so that it is easy to edit and re-minify if needed) because it is awfully hard to find the code you need and make changes on it if your entire CSS file consists of a single line. The minifyier that I had used was CSS min.

In part 2 of this post I will go over how to leverage caching or compressing your website by modifying your .htaccess file on the server.