We reviewed 4 ways to increase your website’s loading speed last month, including the use of Scalable Vector Graphics (SVGs) to increase website speed and performance. TM recently executed this for a client and saw incredible results. We’ll share how our developer, Greg Harris, enhanced the client’s website speed and performance by using SVGs.
SVGs & CSS Sprites
Greg manages DIY Auto’s website, which is a one-stop shop and online community for Do-It-Yourself auto enthusiasts. Their website included icons that:
- Became too large for their server to handle
- Affected its loading time
To speed up the loading time and downsize the icons’ page weight, Greg replaced individual icons with SVG Sprites.
What are CSS Sprites?
CSS Sprites are elements that combine multiple vector images and icons into a single image file to increase website performance. Originally used in computer graphics, the “computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.”
“CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. This reduces the overhead of having to fetch multiple images.”
Our Developer’s Point of View
“They essentially become one image but have definitions of where they start and end on the sprite sheet” – Greg Harris
Have you ever downloaded a PowerPoint template that came with a set of icons? That’s essentially how sprite sheets look – just as a single image file! SVGs and their CSS Sprites are contained in the same file, no matter the physical size, which is why SVGs are a great choice for websites that struggle with load speed.
So, why ditch icons?
Fontawesome is a popular library of icons many websites use. However, by using a library of icons, your website will load all 5k icons – not just the ones you want to use. This creates two additional server requests – one for the font and another for the CSS – and can take a hefty amount of time for your website to load. SVGs, on the other hand, produce fewer requests to the server and reduce page weight due to containing all of the images in a single file. And since servers can only accept 2 requests at a time, it’s much faster for the server to reference a single file rather than repeatedly referencing individual image files throughout the code.
SVGs are also able to be animated. You can change the color of the whole thing or only of different parts, allowing designers and developers to create a truly unique set of icons. A base set of icons include arrows, social icons, play button, and much more. You will be able to quickly add project-specific and custom graphics into this type of font library.
TM will implement this element into our base code for future clients’ website builds. We’re even building our own SVG font library using SVG sprites.
Speed Up Your Website
Let TM bring this same value to your website. Have questions or want to learn more about what SVGs can do for your website? Leave a comment below or leave us a detailed message.