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

Natively lazyload certain web components like tabs etc. #6208

Closed
summercms opened this issue Dec 10, 2020 · 0 comments
Closed

Natively lazyload certain web components like tabs etc. #6208

summercms opened this issue Dec 10, 2020 · 0 comments

Comments

@summercms
Copy link

summercms commented Dec 10, 2020

Something we have done in our cms, was adding lazyloading to tabs, which increased performance for all themes and plugins.

It would be kind of nice if that was rolled out to tabs in a web standardized form.

An example from our cms:

Let's say a user is on a using a 2G/GPRS network connection and the data is coming very slowly to their device:

  • First - The tab list loads

image

  • Second - You see a blue loading spinner for the tab content

image

  • Third - The tab content gets loaded.

image

Please note, when a user is using a fast internet connection all these sequences would take milliseconds.

Developers would just need to add an attribute to turn on Native lazy loading for the desired web component, with various options such as: lazy and eager see here: https://html.spec.whatwg.org/#lazy-loading-attributes

Also related to this comment: #3752 (comment)

Follows on from the discussion started here: openui/open-ui#238

CMS code pr for the lazyloading: octobercms/october#4658

Discussion about removing the FOIT (Flash of Invisible Text) when a user loads a web page using a fragment url to one of the tabs directly: octobercms/october#5393

@summercms summercms changed the title Lazyload certain web components like tabs etc. Natively lazyload certain web components like tabs etc. Dec 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant