There has been a lot of discussion on The Mighty Internet concerning the usage of sprites: Are they beneficial? Do CSS sprites affect SEO positively or negatively? Should I use sprites at all? As one of the top SEO and web design agencies in Houston, we here at Regex SEO have been doing some extensive research and experimentation to determine the pros and cons of using sprites as part of the SEO process.
Basically, the SEO crowd is divided into two camps:
- Some say that the benefit of using sprites is too good to pass up. As the number of server requests go down, page load times decrease as well, which has a positive effect on Search Engine Ranking.
- Others disagree, saying sprites are painful to work with, particularly when someone needs to modify the content of sprite files. They also take away the possibility of using <alt> tags and image names, both of which certainly boost rankings.
Additionally, more and more people have started using mod_pagespeed to optimize their website’s performance.
Mod_pagespeed is a server module that speeds up your website and reduces page load time.
I can see both sides of this argument, but as a Pagespeed Module follower, I decided to run the
experimentand put an end to this debate once and for all.
I used two sets of 16 jpeg and png images (one set of 500x400px and a second set of 50x50px) while running tests in Google Chrome; first, evaluations were done with images “
Test with PageSpeed Module OFF
Large Images average about 24.8% faster to NOT USE sprites! This makes sense, as you shouldn’t put large images in sprites anyway.
Patrons of the “no-sprites” party say “Hooray!”
Small Images (such as logos) – average 39.4% faster to USE sprites. That isn’t brand new info, and this result is to be expected.
Followers of the “go-sprites” theory say “Ha! I told you so!”
Tests with PageSpeed Module ON
Now we get into what happens when applying mod_pagespeed while using sprites, which gives us some pretty interesting results: mod_pagespeed with proper settings will inline all small images, making a huge impact on website loading time since it doesn’t have to retrieve external resource anymore:
Result – Larger Images got 66.2%(!) faster!! AND!…testing for Small Images shows–you better sit down–an average of 29.2%
If you don’t care about SEO, and you’re not using mod_pagespeed, results show that using sprites for smaller images is generally a good idea. Otherwise, considering how CSS sprites affect SEO with mod_pagespeed, the answer is obvious; no more sprites!
Thoughts or Comments?
Leave your thoughts in