{"id":97,"date":"2019-03-08T08:53:12","date_gmt":"2019-03-08T08:53:12","guid":{"rendered":"https:\/\/www.regexseo.com\/blog\/?p=97"},"modified":"2020-09-18T15:38:40","modified_gmt":"2020-09-18T15:38:40","slug":"how-css-sprites-affect-website-loading-speed-and-seo","status":"publish","type":"post","link":"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/","title":{"rendered":"Do CSS sprites affect loading speed and SEO of a website?"},"content":{"rendered":"\n

There has been a lot of discussion on The Mighty Internet<\/strong> 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<\/a> agencies in Houston, we here at Regex SEO<\/a> have been doing some extensive research and experimentation to determine the pros and cons of using sprites as part of the SEO process<\/a>.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Basically, the SEO crowd is divided into two camps: <\/h3>\n\n\n\n
  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.<\/li>
  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.<\/li><\/ol>\n\n\n\n

    Additionally, more and more people have started using mod_pagespeed to optimize their website\u2019s performance. <\/p>\n\n\n\n

    Mod_pagespeed <\/strong>is a server module that speeds up <\/strong>your website <\/strong>and reduces <\/strong>page load time. <\/strong><\/p>\n\n\n\n

    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 \u201cGoogle PageSpeed Tools\u201d<\/a>.<\/p>\n\n\n\n

    I can see both sides of this argument, but as a Pagespeed Module follower, I decided to run the experiment<\/g> and put an end to this debate once and for all.<\/strong><\/p><\/blockquote>\n\n\n\n

    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 \u201csprited<\/g>\u201d together, while in the second evaluation, the images were separated.

    <\/p>\n\n\n\n

    Test with PageSpeed Module OFF<\/h2>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n

    Large Images<\/strong> average about 24.8% faster to NOT USE sprites! This makes sense, as you shouldn\u2019t put large images in sprites anyway. <\/p>\n\n\n\n

    Patrons of the \u201cno-sprites\u201d party say \u201cHooray!\u201d<\/strong><\/p>\n\n\n\n

    Small Images<\/strong> (such as logos) \u2013 average 39.4% faster to USE sprites. That isn\u2019t brand new info, and this result is to be expected. <\/p>\n\n\n\n

    Followers of the \u201cgo-sprites\u201d theory say \u201cHa! I told you so!\u201d<\/strong>

    <\/p>\n\n\n\n

    Tests with PageSpeed Module ON<\/h2>\n\n\n\n

    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\u2019t have to retrieve external resource anymore:<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    Result \u2013 Larger Images <\/strong>got 66.2%(!) <\/strong>faster!! AND!\u2026testing for Small Images<\/strong> shows\u2013you better sit down\u2013an average of 29.2%<\/strong> faster loading<\/g> speed on your website when NOT USING sprites<\/strong>.<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    Conclusion<\/h2>\n\n\n\n

    If you don\u2019t care about SEO, and you\u2019re 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!<\/strong>


    <\/p>\n\n\n\n

    Thoughts or Comments?<\/h3>\n\n\n\n

    Leave your thoughts in comment<\/g> section below. For more information regarding our web design and SEO services, contact Regex SEO for a free consultation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    There has been a lot of discussion on The Mighty Internet concerning the usage of sprites: Are they beneficial? Do CSS sprites affect […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"\nDo CSS sprites affect loading speed and SEO of a website? - Regex SEO Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Do CSS sprites affect loading speed and SEO of a website? - Regex SEO Blog\" \/>\n<meta property=\"og:description\" content=\"There has been a lot of discussion on The Mighty Internet concerning the usage of sprites: Are they beneficial? Do CSS sprites affect […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/\" \/>\n<meta property=\"og:site_name\" content=\"Regex SEO Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/regexseo\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-08T08:53:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-18T15:38:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2019\/03\/Group-566-1024x718.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/DigitalSpaceman\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Dmitrii Kustov\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\",\"url\":\"https:\/\/www.regexseo.com\/blog\/\",\"name\":\"Regex SEO Blog\",\"description\":\"Your SEO, SEM and SMM Information Source\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.regexseo.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2019\/03\/Group-566.jpg\",\"width\":1304,\"height\":914},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/#webpage\",\"url\":\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/\",\"name\":\"Do CSS sprites affect loading speed and SEO of a website? - Regex SEO Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/#primaryimage\"},\"datePublished\":\"2019-03-08T08:53:12+00:00\",\"dateModified\":\"2020-09-18T15:38:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/59f2c07c3640a93875e0a868567cfeb0\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.regexseo.com\/blog\/how-css-sprites-affect-website-loading-speed-and-seo\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/59f2c07c3640a93875e0a868567cfeb0\",\"name\":\"Dmitrii Kustov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2019\/02\/portrait-1-e1549675655281-150x150.jpg\",\"caption\":\"Dmitrii Kustov\"},\"description\":\"Dmitrii is an entrepreneur and founder of Regex SEO, he has produced websites and run marketing campaigns for companies like John Deere and Dignity Memorial. As the Internet Marketing Director, Dmitrii works with Regex SEO to help businesses big and small grow their online presence.\",\"sameAs\":[\"https:\/\/www.regexseo.com\",\"https:\/\/www.facebook.com\/regexseo\/\",\"https:\/\/www.instagram.com\/regexseo\/\",\"https:\/\/www.linkedin.com\/in\/digitalspaceman\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/DigitalSpaceman\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/97"}],"collection":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":13,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":1706,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/1706"}],"wp:attachment":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}