A wildly underused website speed optimization

When optimizing a website, SVGs have become a popular format due to its small file size. But there's another compelling reason to use SVGs — reducing HTTP requests. For example, it’s not too uncommon for PNG icons to still be used on webpages. What’s the big deal if both the PNG and SVG are about the same in file size? Overlooking the other benefits to inline SVG, such as the ability to dynamically style and avoid pixelation when user zooms in 200%. There’s still one big difference between the SVG and PNG icons in this situation. Let’s say you have 10 icons on the webpage, with PNG files you’re making 10 HTTP requests and 0 with inline SVG. A high number of requests is a common issue that speed tests identify as a cause of slower load times. A counterpoint to inline SVG is that it won't benefit from getting cached. Therefore if these icons are loaded on a second webpage, your browser already has PNGs, but has to fetch the same exact inline SVG code again and again. External resources are clearly better after the first load. The workaround? Well, what if instead of inlining the SVG in HTML, we did so in CSS? Your CSS file is cached just like the PNGs, right?! To place inline SVG in your CSS we have to use what’s called a Data URI. SVG to CSS converter: https://www.svgbackgrounds.com/tools/svg-to-css/?utm_source=youtube&utm_medium=video&utm_campaign=speed-optimization SVG Freebies: https://YesVG.com