When using speed tools like Gtmetrix, you certainly came across “The following images served from shopify.com should be combined into as few images as possible using CSS sprites.

In this article we’ll show the advantage of using CSS sprites and how to fix this speed problem.

What is the advantage of using CSS sprites?

Imagine you have 5 images being used in your homepage (like the footer payments icons) and the browser has to download them individually. If they were combined into just one image (showing all the 5 payments icons), you could reduce the page speed loading time.

payments icon

Instead of downloading 5 images, your browser would now only have to download one image.
Moreover, if your payments icons are enabled from Shopify theme editor, you can also remove their Schema, HTML and their CSS codes, your website will be lighter and by consequence faster.

Note : The footer icons are usually in PNG format, try to use a JPG format to make the image smaller in term of size.

This is how CSS sprites optimizes the speed.

Related Posts

  • Minifying codes is literally used to describe the method of removing white spaces between characters, line codes, developer comments, repeated scripts and other unnecessary characters from the source code. This reduces the size of the file and helps to load the website faster. Minifying is applied to almost all the…
    Tags: css, website, speed, codes, will, shopify
  • Google announced in July 2018 a new ranking algorithm designed for mobile search. Google called it the “Speed Update,” so the online stores that delivers the slowest experience to users will be drastically impacted by this update. Beyond speed optimization is now one of the most important factors in SEO,…
    Tags: shopify, css, speed, website, reduce, images, theme, time, codes, loading
  • Images are one of the most important components of every online store and website., and they constitute in most of cases more than 50% of a website file size, especially for e-commerce stores. image optimization is then important to give more speed to your Shopify store, but how to do…
    Tags: images, image, shopify, time, size, speed, website