Fontawesome, LiveView, and agonizingly slow load times (fixed with Tailwind’s hero icons)

I was working on a LiveView page that loaded hundreds of points of data. I probably should have paginated the data load, but this is an internal tool, so that sort of thing isn’t particularly important to me for this project.

On first load, boom. 368 records from the database, filtered to exclude a number by default, mounts in under a second. I add a checkbox to reload the data, adding in all the records, phx-update=“replace”, and I get a stopwatch out. 12 seconds to reload the list, now with 435 records. That’s weird. The database returns the data in microseconds, but the update on the page prompted Firefox to advise me to stop loading scripts.

I fire up the profiler, but don’t get very far with that – the data is inconclusive. So I decide to start reducing the test case. A straight inspect of the individual maps with no markup at all update instantaneously. Ok. I start adding back plain divs. Lightning. I start thinking that it may be related to javascript mounting phx-hooks on each of the component divs. I conservatively add a hook back to the component expecting it to break. Nope. Blink and you miss it.

I add my fontawesome icons back to the buttons on the div. Bingo. Very slow. I add all three icons to the component. Very very very slow. I remove them again, and I can say I solved where the problem was. My guess is that the way fontawesome loads in from the hosted kit apparently doesn’t have a “complete” signal until every single icon is loaded, and I imagine that morphdom is simply doing as it’s told, waiting to present the data until it knows it’s loaded.

Easy fix. I’ll use text instead of icons. No biggie. Though, I notice the core components shipping with the latest Phoenix supplies us with tailwind’s hero icons. Why not give those a shot? They’re included in Phoenix, so it’s likely there’s not this bonkers slow loading behavior.

And there’s not. The hero icons load near instantly.

I’m just leaving this short adventure in troubleshooting LiveView load times here in case any other hapless developers trip on their own shoelaces like I have.

4 Likes

How did you include the icons? Icon font, raw svg, svg loading external asset, image, …?

Phoenix currently uses a data url as a mask, which is deduplicated and put on the css by tailwind. Tailwinds prunning also makes sure only icons used are added.

1 Like

I had a similar experience in the past, quite shocking! Anyway, quick plug for iconify_ex | Hex which uses a similar approach as Phoenix’s heroicons (among other methods available) but provides many more icon sets.

4 Likes

Excellent question, and I didn’t explain it explicitly above. In this case I was using the fontawesome svg js include from their CDN. I didn’t test the various scenarios to locally host.

Very cool. Everything moves so quickly in web development, and it’s easy to learn something new from folks who post here. For instance, I’ve just learned about iconify.