Search Engine Optimization

Do CSS sprites affect loading speed and SEO of a website?

By Dmitrii Kustov on March 8, 2019

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:

  1. 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.
  2. 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.

It also automatically applies the best web performance practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. To find out more about what Pagespeed Module is, check the article I wrote for Wikipedia, called “Google PageSpeed Tools”.

I can see both sides of this argument, but as a Pagespeed Module follower, I decided to run the experiment and 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 “sprited” together, while in the second evaluation, the images were separated.

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% faster loading speed on your website when NOT USING sprites.



Conclusion

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 comment section below. For more information regarding our web design and SEO services, contact Regex SEO for a free consultation.

Dmitrii Kustov
Internet Marketing Director at Regex SEO


Write a Comment