SVG Sprite Resource Loading Performance

Question

I have recently switched all of my icons on my site to SVG icons/images. I am serving all of the SVGs from one sprite file. I am using Chrome Dev Tools Performance to try to optimize loading of resources. I was very surprised to see that the loading of this SVG file is taking 10.61 total seconds. The 'network transfer' is taking 141.71ms and the 'resource loading' is taking 10.47s. From looking at this graph it appears the resource loading is also blocking quite a few other things. Full disclosure is that during this testing I am throttling the CPU to optimize for worst case performance.

However I do not understand how such a small file would take 10.47s to load the resource?

SVG File Details:
Size uncompressed: 51,183 bytes
File Path: /web_root/images/svg/all.svg
File Layout (about 20 or so symbols in the file):

<svg  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
      <style>
         g { display: none }
         g:target { display: inline }
      </style>

      <symbol viewBox="0 0 512 512" id='twitter_solid' class='solid'>
         <g>
             .......
         </g>
      </symbol>

      <symbol>.....</symbol>
      ....
      <symbol>.....</symbol>

   </defs>
</svg>

The way I am using this in the HTML code/markup is as follows:

<svg><use xlink:href="/images/svg/all.svg#twitter_solid"></use></svg>

Am I doing something wrong with this sprite? Am I creating it the wrong way? Am I using/injecting it the incorrect way in the HTML markup? This file is so small and has so few icons/symbols, I can't believe it would take this long to 'resource load' even on a throttled CPU, unless I am doing something very incorrect.

Any advice would be greatly appreciated! Thanks in advance!

Sprites make more sense in an http/1 world. As soon as you have [http/2](https://en.wikipedia.org/wiki/HTTP/2) or 3 you want to not use sprites so that the browser only fetches what it needs which will also help with the parsing time — Dominik, Nov 26 '20 at 20:50
Also make sure you use something like [svgomg](https://jakearchibald.github.io/svgomg/) to optimize your svgs. — Dominik, Nov 26 '20 at 20:51
I have heard of SVGOMG, and plan on optimizing images through that. But from what I have shown, can you see anything I have done wrong that would make this resource loading time extremely inefficient? — RJW, Nov 27 '20 at 03:37
Unwrap the groups from the symbols and give the group the id of the symbol. In your CSS you have `g:target` but you are targeting the symbol. Please open this in view-source: https://assets.codepen.io/222579/view-target_1.svg. If you are doing this you will use the sprite as an image not as an use element: `` — enxaneta, Nov 27 '20 at 08:24
Please read about [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/) — enxaneta, Nov 27 '20 at 08:27
@enxaneta ok great. Thanks, I will be looking at this today! — RJW, Nov 27 '20 at 17:12
@enxaneta I looked into your solution, and this does make sense. However with this it looks like every single viewBox will build upon the dimension of all the previous elements. Also it seems like there will be one viewBox at the — RJW, Nov 28 '20 at 01:23
@enxaneta So the main problem I see with this is that I can no longer style my icons through css. I had some css that would alter certain paths, etc, upon hover and other actions. From reading it seems it kind of is possible through css filters, but this seems like a hack. Is this really the only way? — RJW, Nov 28 '20 at 04:34
If you need to style the icons through css use [inline SVG](https://css-tricks.com/lodge/svg/07-using-svg-inline-svg/) — enxaneta, Nov 28 '20 at 06:51

SVG Sprite Resource Loading Performance

0 Answers0