I used svg-sprite to bundle all of our SVGs as CSS sprites to avoid multiple requests affecting the speed data. Testing our findings in-appįor our experiment, we’ll try to load all of these files at once and see how significant this delta is. Now let’s see what this means in the context of web performance. Here’s what difference looked like between the size of bundles post-compression (I used the tool brotli-size-cli):Īs we can see, the difference in size is much greater. If your CDN uses the best available compression, the difference in size would be even smaller.
Note: based on my observations, the Cloudflare CDN uses Brotli level 3 compression by default, which is inferior compared to the maximum level 11 compression, but is still good enough for testing the final file sizes. In this section, I’ll check the size of minified and unminified bundles when served via the Cloudflare CDN. We should, therefore, compare the before-and-after file sizes post-compression. Both compression algorithms are able to significantly reduce the size of the static asset. The more efficient brotli algorithm is already used by 30 percent of websites, according to W3 Techs. Most static assets and HTML pages on the internet are delivered using GZIP compression. You may have noticed that we’re missing a key step above: compression. The savings between unminified and minified bundles amounted to: Here, SVGO reduced the file size to 880kB, saving around 420kB, or 31.5 percent. An HD vector map of the world from amCharts is around 1.3MB in size. World map (HD)įinally, let’s try a single large SVG file. In this case, SVGO saved around 24.2 percent on average and cumulatively, 824kB, or 23.7 percent. The compression ratio is less stellar when compared to Flagkit, but that’s expected because the SVG files in this bundle are much larger. Illlustrations is a beautiful SVG illustrations pack designed by Vijay Verma in Adobe Illustrator.ĭistribution of compression percentages in Illlustrations Let’s do a similar analysis on something bigger. If we were to use all of FlagKit’s icons in our app, we would save slightly less than half a megabyte with SVGO. Cumulatively, for all the files, it saved around 446kB, or 56 percent. On average, SVGO reduced the file size by 54.8 percent. As we said earlier, SVGO is very effective against files exported with this tool.Īfter running SVGO on all the icons in the set, here’s what the distribution of compression percentages looked like: Distribution of compression percentages for Flagkit Flagkitįlagkit is an SVG icon-set of country flags created with Sketch.
If you’re interested, you can view the raw data of my analysis. To put it to the test, I tried SVGO on various SVG bundles and compared their file sizes before and after minifying under the standard defaults of SVGO. It’s especially effective against vector files created with tools like Sketch and Adobe Illustrator that have very precise values, spaces, long names, and comments. In some cases, it might reduce the file size by a low single-digit percentage, and in some cases, the figure might be as high as 90 percent. The number of bytes saved by SVGO is largely dependent on the file it is minifying and how it was created. The question we need to ask is: does SVGO actually make a visible impact on performance? Let’s look at the details. This is precisely why Lighthouse prioritizes metrics like first meaningful paint (FMP), first contentful paint (FCP), and largest contentful paint (LCP), instead of the size of static assets and number of requests. However, as much it helps to reduce the page weight, what ultimately matters is whether or not it can make a visible difference in performance. SVGO is a well-maintained project that, in most cases, will remove all of the unnecessary characters that it safely can. For reference, React is used in 7 million repositories. It works by “safely removing editor metadata, comments, hidden elements, default or non-optimal values.” Looking at the Github Dependency numbers, SVGO is a pretty widely used tool being used in 4.6 million repositories. SVG Optimizer (SVGO) is a popular open-source tool that is used to minify SVG files. Shubham Jain Follow Fullstack engineer primarily interested in web development, UI design, and sharing what I have learned.
0 kommentar(er)
