Written by Marouane RHAFLI in Speed Up Shopify loading Time
Jan 20 th, 2019
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.
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.
[…] Sprites are two-dimensional images which are made up of combining small images (generally footer and payment icons) into one image at defined X and Y coordinates, this will reduce HTTPS requests as well as your website size… Read more How to use CSS sprites To Speed up Shopify loading time? […]
Your email address will not be published. Required fields are marked *
Yes, add me to your mailing list
Welcome to Ecom-gurus!
If you have amazing skills, We have amazing Freelance Jobs Marketplace