GoogleChromeLabs / GoogleChromeLabs/quicklink

Lower the number of network requests (spoiler: possible solutions provided)

Open
#215 0 comments 6 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.