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.
What is SVG or Scalable Vector Graphics?
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:
- Bitmap photos and videos formats use the grid approach.
- Vector graphics use maths to calculate the final render.
If you are thinking a photograph can also be represented by vectors, the answer is Yes. The major reasons to use vector is:
- The bitmap format for photos and videos is the right choice because it has other advantages such as a more affordable way of processing, a better realistic look, modifying data, and a very good relationship representing complex forms with subtle color transitions such as clouds or skin tones.
- The vector is used to describe simple and complex geometric images, where there are normally not many transitions of colors and then can be scalable to big sizes.
How to use SVG on the web?
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.
When to use SVG?
One can use SVG every time they want but they are especially recommended for good icons.
How SVG can speed up your website loading?
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.
