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

Time in view before prefetching #23

Open
cornelg7 opened this issue Aug 17, 2022 · 3 comments
Open

Time in view before prefetching #23

cornelg7 opened this issue Aug 17, 2022 · 3 comments

Comments

@cornelg7
Copy link

One way to solve the many prefetch calls on a page and still have a fast experience would be to add the possibility to pass a time argument to the prefetch attribute. It could look like this prefetch?: 'visible' | 'hover' | 'time'.

  • prefetch 'time' with time 0 would just be prefetch 'visible'
  • prefetch 'time' with time 1000 would wait for the element to be in view for 1 second before prefetching

Also, after testing a page, you can see what links are hotter (are accessed more) than others and set them a lower prefetch time than the links that are not clicked as much.

Good idea yay or nay?

@onmax
Copy link

onmax commented Aug 17, 2022

I like this idea, and I took some time to improve it a bit with more options. Let me know what you think!

For the shake of simplicity and flexibility I would allow two options:

  • prefetchOn: Defines the action that user needs to do in order to prefetch the link. The possible values are:
    • visible: Show when link is visible in the screen. It will default value
    • hocus: Combination of hover + focus
  • prefetchAfter: Defines the delay in ms before the prefetch actually starts. Default value undefined

This would be as global config, but I think it would be useful if we allow to overwrite this parameter individually in each link with data attributes optinally. In the code can look like:

<a href="./link.html" data-prefetch-on="hocus" />
<a href="./link.html" data-prefetch-after="500" />

<!-- Combining them -->
<a href="./link.html" data-prefetch-on="visible" data-prefetch-after="200" />

In summary

  • New global conf called prefetchOn: 'visible' | 'hocus'.
  • New global conf called prefetchAfter: number: Amount of ms it should wait after the prefetch is triggered.
  • New data-attributes called data-prefetch-on= 'visible' | 'hocus'
  • New data-attributes called data-prefetch-after

@DarrinTisdale
Copy link

bitmoji

I'm really interested in this approach, and after seeing the work done, I'd like to help in some way.

BTW I have some ideas on prefetching that would extend the functionality, making it work for certain types of use cases. I don't think the discussion belongs here, so I will detail it in a separate post, something akin to a feature request.

@ekwoka
Copy link
Contributor

ekwoka commented Aug 23, 2022

Looks good, could probably include configs for opting in prefetching on specific links as well as opting out.

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

4 participants