March 09, 2019 · Web Designing

Improving Mobile Page Speed by 200% Using SVG and Nano

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation to your revenue.

Optimizing images is crucial for performance

Average bytes per page by content type on average website
Average bytes per page by content type on average website

Depending on who you ask, images constitute 68% of an average website, if there is such a thing as an average website. In terms of performance and speed, optimising images is the lowest hanging fruit, and it makes sense for this post to focus on optimising images.

Serving an image in three sizes using SRCSET has generally been accepted as the norm, but since our website and blog contains mainly illustrations, meaning most of our images can be replaced with vector-based images using SVG, the big question is, can SVG improve page load time, and if so, by what margin?

To answer these questions, we fired up multiple tests and analyzed the surprising results:

Page with low image count

As a start, we analyzed one of our highly trafficked page at Best way to embed SVG, for which there are only 9 images, including some logos.

Waterfall timing chart for SVG, PNG @ 1X and PNG @ 2X
Waterfall timing chart for SVG, PNG @ 1X and PNG @ 2X

Based on images alone, using SVG requires 0.7s while PNG @ 1X requires slightly more than 1.0s, about 43% slower. PNG @ 2X comes in at more than 2.1s and is a whopping 200% slower on mobile devices with high resolution screens.

Payload percentages by content type

Payload percentages by content type
Payload percentages by content type

When comparing by content type, the total bytes for SVG images are 109.8KB, and it constitutes 44.3% of the total payload.

On desktop, using PNG @ 1X, the total bytes for images increased to 336.4KB, more than 300% increase. Now, images constitute 70.8% of the entire payload.

On mobile where bandwidth is metered, using PNG @2X, the total bytes for images increased to a whopping 810KB, taking up 85.4% of the payload, almost 800% increase when compared to SVG images.

No wonder, because of the increase in payload, using SVG images is much faster, where PNG @1X is 43% slower, and PNG @ 2X is 200% slower.

Additional savings for SVG with GZip transfer encoding

Like all good web citizens, we enabled GZip transfer encoding on our server, therefore the bytes listed above is actually the transferred bytes, where the total bytes may be higher.

Transfer size vs actual size
Transfer size vs actual size

SVG is a format that compresses especially well with GZip, therefore saving much bandwidth, compared to PNG where GZip does not help much, since it is already a compressed image format.

In addition, all our svg are created using Vecta, and exported with its built in Nano compressor which can compress 22% better than the competition, making the SVG super lightweight, even when fonts are embedded.

Page with higher image count

How about a page with a higher image count? For this, we selected our benefits page, where there are 15 images, an increase by 50% compared to the previous page.

Waterfall timing chart for SVG, PNG @ 1X and PNG @ 2X
Waterfall timing chart for SVG, PNG @ 1X and PNG @ 2X

Irrespective of image count, the page with SVG images is still the fastest at 0.75s, with PNG @1X, it takes about 1.0s, about 33% slower. For PNG @2X, loading time is 1.5s, again 200% slower when compared against SVG.

Payload percentages by content type

Payload percentages by content type
Payload percentages by content type

Looking by content type, PNG sizes surely increase with higher resolution, from 26.8% using SVG to 67.2% using PNG @2X.

This increase in payload reduces the performance of a page, and SVG wins again due to its low payload and bandwidth.

Analyzing a page by Google

At the start of this post, we mentioned Google's benchmark which says, ideally you have to load a page within 3 seconds

Unfortunately, the page itself, takes nearly 6s to load. These sort of pages are ideally suited for SVG, with its simple graphics, so we created equivalent SVG to replace these samples.

Sample image from google's page in JPG converted to SVG
Sample image from google's page in JPG converted to SVG

It's strange that the page uses JPG, where it should have used PNG, but when converted to SVG, its payload reduces drastically as below:

JPG vs SVG payload for the Google page
JPG vs SVG payload for the Google page

The original payload for images alone amounted to over 2.2MB, while if using SVG the total payload is only 307KB. This is before GZip compression, where we expect at least another 60% reduction to only 122KB.

That's a gigantic 94% reduction. You could surely see the amount of bandwidth that is being saved and the improvement in page speed due to this reduction, ensuring the page could load in under 3s.

Conclusion

Obviously, not every page can have their images converted to SVG, but for those that can be converted, image payload reduces drastically, by 300% for PNG @1X and 800% for PNG @2X, saving you storage and bandwidth cost on your servers.

In addition, page speed improves by more than 30% for desktop (PNG @1X) and 200% for mobile (PNG @ 2X), possibly dropping under the magic number of 3s.

Not only that, because of these performance gains, your search engine ranking improves, bounce rate reduces, and possibly having a significant improvement to your bottom line.

Have you got a similar experience of using SVG to improve your page performance? Comment below and share with us! Thanks for reading.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

January 14, 2019 · Web Designing

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter...

December 12, 2018 · Web Designing

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · Web Designing

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.