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

Faster subsequent page loads with quicklink or similar approach #7145

Open
1 task
jroebu14 opened this issue Jul 6, 2020 · 2 comments
Open
1 task

Faster subsequent page loads with quicklink or similar approach #7145

jroebu14 opened this issue Jul 6, 2020 · 2 comments
Labels
cross-team For visibility for both World Service teams (Engage & Media) performance Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features

Comments

@jroebu14
Copy link

jroebu14 commented Jul 6, 2020

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.

@jroebu14 jroebu14 added Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. ws-home ws-articles Tasks for the WS Articles Team ws-media World Service Media labels Jul 6, 2020
@karinathomasbbc karinathomasbbc added cross-team For visibility for both World Service teams (Engage & Media) technical-work Technical debt, support work and building new technical tools and features and removed ws-media World Service Media ws-articles Tasks for the WS Articles Team labels Jul 21, 2020
@joshcoventry joshcoventry added this to the Frontend Web Performance milestone Oct 16, 2020
@andrewscfc
Copy link
Contributor

Reading this, it looks like this also improves clientside rendering performance, not just pre-fetching serverside rendered pages in the viewport.

@andrewscfc
Copy link
Contributor

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:
image

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?
image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cross-team For visibility for both World Service teams (Engage & Media) performance Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features
Projects
None yet
Development

No branches or pull requests

5 participants