[Icons] Explain client side performance

[ThomasLandauer]

Currently, the docs at https://symfony.com/bundles/ux-icons/current/index.html#performance only explain server-side aspects of performance (cache warmup, etc.)

But what about the end user's performance?

If include the same icon 200 times on a page, I will get the entire <svg>...</svg> string included 200 times in the page's source code, right? Those 200 strings cannot be cached.

So in some cases it probably makes more sense to just create an .svg file and include it with <img src="...">, cause this will be cached by the browser.

What's your opinion here? Would you say that (since icon files are usually small) it just doesn't make a difference for most users?

[smnandre]

I will get the entire ... string included 200 times in the page's source code, right?

With gzip this makes no real difference, you don't need to cache something that you don't need to fetch online.

If include the same icon 200 times on a page

Not sure i would look at this first metric first .... especially when that probably mean you have then I suppose 200 times "something" in the page. And that only information is something to look at when we talk optimization, as I see very very very few legit case to show 200 this "something" on a page.

Moreover, if you have 200 times "something" and the text content is not 5/10 times bigger than your svg icon, you may have another problems: thin content, bad accessibility, or fat icons :)

Now.. if someone needed this level of "optimization" SVG symbols and HTML templates are the things to look at.

But i'm not in favor we document it... as it could give an undeserved level of importance. and this is very very advance optimization, when we don't even mention all steps before.

And, in the end, i'm not sure it matters for most people. People using Tailwind have probably twice the markup length (in tags, not content i mean) than someone doing CSS. And no one here seems to have any performance problems.

[Kocal]

Can be interesting to read too: #1800

[ThomasLandauer]

Thanks! I came up with a short explanation in #2787

Since server-side performance is explained at length, I think that the second aspect of performance (client-side) at least should be mentioned at all. For me, when reading this for the first time, the important question was: "Is this (insertion of the same string) really what happens, or did I miss something?"

Any repetition of the same string is not DRY (i.e. might be seen as bad practice), so I think there should be some argument why it isn't so important in this case.

[smnandre]

DRY

Let's stop miss-understanding this acronym. And premature optimization is not something that can be easily solved.

might be seen as bad practice

In HTML if you want to display 20 times the same image, you use 20 times the tag.

Not a bad practice.

[ThomasLandauer]

But in this case, there is a true alternative: When embedding the SVG in CSS (background:url(...)), you can use it 20 times, but it's only transmitted once.

[smnandre]

Of course, there are countless alternatives. However, our goal here isn’t to document every possible way to use SVG icons — it’s to explain how to use UX Icons.

Injecting the same element 200 times into the HTML is definitely not a practice we want to encourage, and i'm not talking about icons here.