bbc
Faster subsequent page loads with quicklink or similar approach
Is your feature request related to a problem? Please describe. quicklink uses Intersection Observer API to detect when links come into the viewport and prefetches linked resources during idle time. Bonus: quicklink weighs less than 1 KB
https://github.com/GoogleChromeLabs/quicklink
More info on prefetching here https://web.dev/link-prefetch/
This might be useful for onward journeys from front pages for a snappier page load on the next page.
Both quicklink and Guess.js use the Network Information API to avoid prefetching if a user is on a slow network or has Save-Data turned on.
A wine company Jabong implemented prefetching with quicklink and achieved 2.7 s faster Time To Interactive on future pages.
Describe the solution you'd like Something like a HOC or React hook that implements quicklink or if we needed something more custom then a Psammead component that uses a similar Intersection Observer and prefetch approach.
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.
Testing notes [Tester to complete]
Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc
- [ ] This feature is expected to need manual testing.
Additional context Add any other context or screenshots about the feature request here.
Reading this, it looks like this also improves clientside rendering performance, not just pre-fetching serverside rendered pages in the viewport.
We'd need to consider the data cost of downloading pages in the background for users while we continue to serverside render. If we enabled this on front pages on mobile for example we'd download the main hero article before the user potentially clicked it:
It could decrease onward journey load times but at a data cost. Clientside rendering would decrease loads times and decrease data usage.
I wonder if it could be worth enabling on recommendations or most read?
This could increase the number of successful onward journeys in low data environments as the article loads in the background.
We'd also need to monitor the effect this would have on service running costs; we would receive requests for assets that are never rendered. Hopefully the CDN would soak this up at little extra cost but I'm unsure? Also we'd need to confirm whether analytics code would fire for the pre-fetched pages corrupting our data on onward journeys.