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

[verlok]

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 Added threshold option to reduce impact on CDNs and servers #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 Added delay option to reduce impact on CDNs and servers #213 || Added delay option to reduce impact on CDNs and servers [alternative without data-attributes] #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)