In most of the applications, Icons will appear after a delay of 1 to 2 seconds. This is bad for the User Experience. There are multiple ways to improve the performance of icon rendering.
The streategies are
- Using CDN
- Reduces the network latency in fetching the image. Still there can be a latency for first load or less frequently used images
- Using Sprite and CSS
- All icons are loaded in one image so there will be a delay till the sprite image is loaded for the first time
- SVG embedded into HTML
- SVG can be embedded into HTML. This eliminates the extra fetch for the image.
- In many cases the size of the SVG is smaller comparable to other image formats
- The latency issue is still persist if SVG is loaded as a separate image file
Here is the example I tried to load the Logos and icons in different formats. Embedded SVG is loaded as part of HTML while the other formats loads after a delay.
The source code is at https://github.com/sodaru/icon-performance-demo
Top comments (0)