GoogleChromeLabs / GoogleChromeLabs/quicklink
Lower the number of network requests (spoiler: possible solutions provided)
- Dominant language
- JavaScript
- Stars
- 11.3k
- Forks
- 429
- PR merge metrics
- No merged PRs in 30d
Description
### Problem
**We're trying to lower the number of network requests that hit our servers.**
Initially, we thought that using the `throttle` option would be useful. Yes, that option preserves our CDN and servers, but QuickLink becomes useless for users who scroll down fast, because it continues to fetch links that already exited the viewport, but still in the queue of the throttled requests.
### Solution
We'd like to:
- **Prefetch only links that entered the viewport by more than `x`% of their area**, e.g. if a link is 400 pixels high, prefetch it only when it entered the viewport by at least 100 pixels. This is achievable passing a `threshold` to the `IntersectionObserver`. We've tried it, tested it and opened a pull request, see #214
- **Prefetch only links that stayed inside the viewport for a given time**, e.g. when users scroll the page fast, avoid prefetching the links that quickly exits the viewport. There are different ways to do that. We initially thought of using `throttle` but removing the URLs from the `throttle` queue when links exited the viewport. In the end, we opted to the following solution: assign a timer of `y` milliseconds to each link, prefetch it when the timer expires, cancel the timer when they exit the viewport. We've tried it, tested it and opened a pull request, see #213 || #217
### Additional context
We've covered both pull requests with a test of the individual option and, additionally, I've created a repo to test 3 options (`throttle`, `threshold` and `delay`) together. Everything works as expected, without side effects. It's currently on a private repository, but no problems to publish it.
(in this issue and pull requests, "we" means me and my workmate @albertonarda)
Contributor guide
Assessment
This issue has not been assessed yet.