Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant