Are you using SVG icons in TALL stack apps?
Hi all,
Are you using SVG icons in TALL stack apps?
I believe using SVG icons (like Hero Icons) is slowing down my TALL stack app. The payload increases a lot for large pages that refresh content, like a calendar. But also, for small components that should be snappy! They may have 4 icons in them and just increase the payload by a lot.
Why the heck do we want so many extra characters with every Livewire refresh? One day I'm going to refactor back to font-icons. This way all that will be sent is something like <i class="fa fa-close w-5 h-5"/>
OR: am I supposed to be adding wire:ignore to all SVG icons?
I know that font-icons require loading extra assets that may not get used. Increases initial load of an app if the asset is not cached by the browser. Okay, but I have a business application, I'm not really worried about an extra second of load time for the very first load. Public website, yes, I'd want it fast, but none of the pages that use Livewire I think need a super-fast first ever load.
Hey Chris!
For production I think that caching the icons and using a CDN might help with the heavy lifting.
For Livewire specifically, not 100% sure but using wire:ignore might help!
Curious to hear what other people have to say as well!
"CDN might help" ... not with SVG when using something like the Blade UI Kit, or Hero Icons package. They insert the svg code into the view.
The good part is that it's not loading another asset, the bad is that it's bloating the views and that's bad for Livewire that has Serve Side Rendering and has to send it in a background AJAX request (when I want it to be quick).
The user is usually waiting for the app to respond.
I feel like Livewire efficiency courses need to be created as I can see this getting out of hand very easily when Devs not paying attention to it.
"CDN might help" ... not with SVG when using something like the Blade UI Kit, or Hero Icons package. They insert the svg code into the view.
The good part is that it's not loading another asset, the bad is that it's bloating the views and that's bad for Livewire that has Serve Side Rendering and has to send it in a background AJAX request (when I want it to be quick).
The user is usually waiting for the app to respond.
I feel like Livewire efficiency courses need to be created as I can see this getting out of hand very easily when Devs not paying attention to it.
For example, if you install a Datatable Livewire component from GitHub, I bet that the whole table is sent on each request. If someone wants to see 50 records on a page, then adjusts one bit of the table, which could be maybe toggling a flag, the entire table is resent.
It doesn't work with API, just SSR, so much more info is sent back to the browser. Adding Tailwind (inline classes) and SVG icons, it just makes it larger... every request!
So, I wonder if TALL stack is self-damaging, perhaps inefficient by design... or am I doing something wrong?