Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

improve async blocks performances (tabs+accordion) #138

Open
ramboz opened this issue Apr 8, 2023 · 0 comments
Open

improve async blocks performances (tabs+accordion) #138

ramboz opened this issue Apr 8, 2023 · 0 comments

Comments

@ramboz
Copy link
Collaborator

ramboz commented Apr 8, 2023

The page https://main--delta--hlxsites.hlx.page/us/en/skymiles/how-to-earn-miles/skymiles-partners-offers has relatively bad performance compared to the rest of the Franklin pages. The cause seems to be mainly that the async blocks we use (accordion + tabs) await all the content load and decoration before returning from the decorate method.

Ideally, we should refactor the code so that:

  • accordions do not await on their content, since it is not visible
  • tabs only await the visible tab, and not all of them

Furthermore, we can probably explicitly delay the rest of the "hidden" elements decoration by using one of following options:

  • defer the decoration to the end of the event thread via setTimeout, so we offset the load on the main rendering thread for the rest of the phase
  • defer the decoration until the element is actually in the viewport, using an intersection observer
  • defer the decoration until the element gets keyboard focus or has the mouse over it, so we can load and decorate hopefully in time before the user clicks the tab/accordion to avoid a flash of content
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant