Improving Mobile Page Speed by 200% Using SVG and Nano
March 09, 2019 · Thomas Yip
Software Development Director · Web Design · Everything SVG · Compressing SVG
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
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.
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
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.
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.
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
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.
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:
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.
Thomas Yip
Software Development Director
As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.
