Speed Up Your Website With Sprite Sheets Made With Quick Sprites

If you use Google's Page Speed tool to gauge the health of your site's home page or other pages within your site or blog -- there is an online version, as well as a web browser plug-in -- then you have probably noticed the tip which suggests that you implement sprite sheets with your web pages.

For those of you who are not familiar with sprite sheets, basically, a sprite sheet -- or sprite image -- is an image file which contains a lot of smaller images. In other words, it is a collection of images which exist on a page -- or pages -- on your website. This image file -- or sprite sheet -- is used in conjunction with a CSS file. Among other things, the CSS file contains div classes which are associated with each image that is contained in the sprite sheet. Each class specifies where its associated image is located in the sprite image.

Exactly why is Google's Page Speed suggesting that website designers utilize sprite sheets?

Well, let's suppose that you have twenty small images on a particular page of your website or blog. What that means is that each time that one single visitor goes to that page on your site, their web browser must make twenty individual requests for those images to be downloaded to their computer. Furthermore, your server must then respond to each of those twenty requests, by sending each image back to that web browser. That is just for one person. It is a lot of data packets traveling in both directions.

Now, imagine if you have five, ten or more people visiting that same page with twenty images simultaneously. Do the math and you will quickly determine that that is a lot of requests for your server to be handling at the same time. Depending on the speed of your server, the OS that you use, and other factors, the potential exists that having so many individual http requests being made for those twenty images will eventually bog down your server.

A bogged down web server means that it will be slower in responding to http requests, which in turn means that the web page will load a lot slower for the end user. If the page loads too slowly, the user just might get bored and move on to the next website, leaving you in the dust.

On the other hand, if a web designer or blog owner utilizes sprite sheets on his site, that means that the web server will only have to respond one time by sending one image file, instead of twenty individual images. Obviously, this creates a lot lighter load on the server, which means that it can attend to other http requests a lot more quickly.

If you are familiar with Google's Page Speed tool, then you will know that its purpose is to help you to speed up the load time of your pages, by offering as many useful suggestions as it possibly can. Of course, it is up to you to try to implement those suggestions to the best of your knowledge, skill and resources.

Why is speeding up page load time so important?

As it turns out, just trying to keep your visitors on your site by quickly serving your pages to them is just one of the reasons. You should also know that Google has made it publicly known that page load time is one of the many parameters that they use to determine a site's PageRank.

PageRank in turn may possibly affect the position that your pages acquire in Google's SERP's, or Search Engine Results Pages. If your site is not listed on the first page of search results for the given topic; and even worse, if it is not even listed in the first three pages of search results, you might as well forget it; because unless they are keenly interested in a subject, and have a lot of time on their hands, the vast majority of people will not drill deeper into Search Engine Results Pages in order to find what they are looking for. In short, your site will never see the light of day by most people.

To reiterate, slow-loading pages will drive away your visitors. Slow-loading pages will affect your PageRank. Slow-loading pages may affect your site's position on Search Engine Results Pages. Finally, Google will penalize slow-loading sites. Is that enough reasons for you to do your best to improve the load time of your pages?

Well, after learning more about the advantage of using sprite images about six weeks ago, I set about finding a way to easily create sprite sheets online, being as I didn't have a clue regarding how to manually create them myself using Photoshop and BBEdit. While I did find an online service or two, I wasn't very successful at getting them to work for me.

Being a dedicated Macintosh user since 1990, I reasoned that surely some innovative Macintosh software developer must have undertaken the task of creating such an app for us Macintosh users. Sure enough, I discovered that Simone Tellini offers just such a web design utility -- called Quick Sprites -- on Apple's App Store website, as well as on other Macintosh software distribution sites such as MacUpdate.

Currently standing at version 1.3 in the App Store, I consider $9.00 a very fair price for this useful tool. Not only does Quick Sprites make creating sprite sheets extremely easy, but it saves me a load of time as well. The learning curve for this app is minimal, even for an old guy like me. In fact, I couldn't create sprite sheets without it. To date, I have created a total of seventeen sprite images for our Endtime Prophecy Net website and blog.

Let us return to the subject of Google's Page Speed tool. If you want to know exactly how effective of a tool Quick Sprites really is, then consider the following.

To say the least, our Endtime Prophecy Net home page is very graphic intensive. In addition to a 26-frame slideshow at the top of the page, and other smaller icons scattered throughout the page, there are close to 150 topsites vote buttons on the lower half of the page as well.

No matter how much I improved the HTML code on the page, I couldn't increase the Google Page Speed score beyond 78/100 due to having so many images on the page. However, after using Simon Tellini's Quick Sprites app to make a sprite sheet for the page, and making a few other HTML and graphic improvements as well, the Google Page Speed score shot up to 87/100 to 89/100. That is an eleven per cent improvement. It may interest you to know that there are some major sites on the web which have a score much lower than that, even in the 60's range.

So these are my personal experiences thus far with using Mr. Tellini's Quick Sprites. I can definitely see a measurable improvement, and page load time is snappier. Hopefully, with time, this increase in page load time will result in Google rewarding us with an even higher PageRank. We shall see.

Of course, please understand that every situation, and ever page, is different, and that your mileage may vary. Please also keep in mind that I also use other SEO strategies in order to improve load time, such as compression, image optimization, internal and external caching, external js files, etc.

Let me conclude this commentary and product review by saying a quick word about the developer, Simone Tellini. To date, Simone has been very responsive to my email support-related questions and messages. Also, he has a good command of the English language, which makes communicating with him very easy. In contrast, I don't speak a word of Italian.

While I normally don't do product reviews, I hope that you will have learned something about the mechanics behind, and the reasons for using sprite sheets on your website. I also hope that this short review will help other Macintosh-based web designers to determine whether or not Quick Sprites may be a valuable tool in their arsenal of web design tools. Thanks for listening . . . or reading.