[Documentation] Icon page and search extremely slow and laggy in Safari browsers - improvement possible?

[oliveratgithub]

The SL Icon doc page is extremely laggy to the point, that the search is almost non responsive / hard to use, on Safari Webbrowsers - particularly macOS Ventura and iOS (16).

Is it possible to somewhat improve this doc's page, to make it more snappy again? In 2.0.0-beta70+ it used to be much faster, but a short load time lag was already present. Alas not as bad as since 2.0.0-beta87 incl. beta88.

[claviska]

Hmm, I'm not seeing a lag except a slight delay while the sprite loads (and the sprite was added to avoid thousands of HTTP requests for icons). Is there any chance you can help me find the culprit?

If anyone else can replicate this, I'm open to a PR. However, I really want to keep the icon search since a lot of people seem to use it.

[oliveratgithub]

However, I really want to keep the icon search since a lot of people seem to use it.

Oh yeah, absolutely needed!

---

Quick check on Safari Mobile indicates long loading times for the svg icon resources; up to 12 seconds:

[oliveratgithub]

An online Lighthouse Tests seems to confirm my observations, even on the Chrome Mobile browser:

https://www.webpagetest.org/result/230111_AiDcCX_FVF/

[claviska]

Quick check on Safari Mobile indicates long loading times for the svg icon resources; up to 12 seconds

These are already deferred, though. Not sure how to "fix" it without gaming Lighthouse, which also won't solve the problem.

Any suggestions?

[oliveratgithub]

I had some time to look into this again today, and found some hints – but unsure how to interprete these results or if this points into the right/a helpful direction.

Used the Safari 16.3 built-in Timeline recording on a fresh, uncached page load of shoelace.style/components/icon.

Page load over 2.13 Gigabyte (!) of data?

(also refer to below "sprite.svg")

sprite.svg

• Page seems to load dozens of "sprite.svg" resources, each of 1.09 MB in size -> causing lots and lots of Network requests + CPU usage over the course of about 20 seconds.

Styles Recalculation

• the event Styles Recalculation in `chunk.CPROBC4U.js (line 249) seems to take quite some time (>7 seconds, each)
• the corresponding line 249 in the chunk JS file is referring to the function shown below: function a2(t2)

[claviska]

I do see a bit of a lag in Safari that I'd love to track down and improve on, but what you're seeing there is the result of this dev tools option being checked, effectively disabling all caching:

Can you run that again with this box unchecked? Hopefully it provides a more useful result.

[oliveratgithub]

Can you run that again with this box unchecked? Hopefully it provides a more useful result.

Okay yeah, that does no longer skyrocket the Network requests and resources loaded ^^

I think I spotted the culprit (see below): for me it seems to be caused by the SlTooltip being wrapped around each Icon loaded into the Icon Search?

---

Here are the most interesting results I spotted when Caching is ENabled:

appendChild connectedCallback()

(from chunk.MVSJC4JT.js which contains // src/components/tooltip/tooltip.tsand var SlTooltip = class extends ShoelaceElement)

Styles Recalculated (8.01 s)

(Layout & Rendering)

[claviska]

I'm not sure why Safari had so much trouble with this page, but perhaps dumping 1,000+ tooltips into the DOM on page load isn't a good idea. 😅

Fixed in af70d88 by lazily appending tooltips on mouseover. The result should be invisible to the user and is definitely more performant in Safari.

You can preview it here: https://next.shoelace.style/components/icon

[oliveratgithub]

I'm not sure why Safari had so much trouble with this page, but perhaps dumping 1,000+ tooltips into the DOM on page load isn't a good idea. 😅

Awesome! 👏