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

Optimizations issues #82

Closed
viliusle opened this issue Jul 30, 2021 · 3 comments
Closed

Optimizations issues #82

viliusle opened this issue Jul 30, 2021 · 3 comments

Comments

@viliusle
Copy link
Collaborator

viliusle commented Jul 30, 2021

This lib will builds huge list of tobi__slider elements on page load. During this time, JS blocks everything else like user input, page rendering and so on.

  • if we have lots of elements, that need lightbox effect, block time increase
  • if user is on mobile, (JS processing is slower) block time increase a lot
  • if using multiple inline HTML blocks with lots of text and DOM elements inside - block time increase
  • if all of above - we have a big problem.

And now google penalize sites for being slow. So this should be fixed.

What can be done? On load create only basic DOM elements, like container, buttons. Only when user does click, do heavy work to display something using lightbox effect.

Dom-tree

@viliusle
Copy link
Collaborator Author

viliusle commented Jul 30, 2021

I still need to do more test to make sure that creating lots of DOM elements is a problem. Problem could be somewhere else of course.

p.s. confirmed. Adding lots of created sliders into DOM take most JS processing time.

@viliusle viliusle changed the title Optimizations Optimizations issues Jul 30, 2021
@viliusle
Copy link
Collaborator Author

viliusle commented Aug 2, 2021

Another improvement idea: don't do anything if there are 0 targets to show modal window from.

viliusle added a commit that referenced this issue Aug 5, 2021
@viliusle
Copy link
Collaborator Author

viliusle commented Aug 5, 2021

Issue was with creating multiple empty iframes on page load. Even src is empty, this process is very slow. I fixed it by creating iframes only when user clicks on target element (only when needed.)

@viliusle viliusle closed this as completed Aug 5, 2021
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