The response time of a website plays an important role to consider it a user-friendly website. Whereas, the response time depends upon many factors including the transit bandwidth, the hosting server, and the design of the web page – as well as the graphics, number, type, and weight of elements on the page.
Taking different parameters one at a time, in this post we have discussed how you can speed up your website loading with SVG or (Scalable Vector Graphics). But before this, here is a brief intro with SVG for those who are new to this term and how it brings the real difference.
SVG was first introduced in 1999 by W3C as a standardized format that aims to port the advantage of vector images. In the process, the image can define in two ways:
The SVG can be easily implemented on the web just by adding the code of your icon. All you need to do is to paste it onto your HTML and some extra code to match your taste.
One can use SVG every time they want but they are especially recommended for good icons.
It’s well understood that to download images from the server you need to seek a request via HTTP GET when you enter a webpage. The request can be delayed for many reasons, your computer can have a slow internet connection resulting in a slow load time or the server can be slow.
In the case of SVG, you reduce the number of petitions to the server.
For example - You can get rid of that 0,300ms and make your web load faster using SVG icons. Imagine that you have 10 PNG icons on your page, which results in 10 requests more to the server, an increment of 0.300ms.
Now the icons are not the part of code and are sent via the HTML file. In this manner, you are making only one petition and only one archive downloading to the server.