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

[Segment Cache] Prioritize hovered links #74672

Merged
merged 1 commit into from
Jan 14, 2025

Conversation

acdlite
Copy link
Contributor

@acdlite acdlite commented Jan 8, 2025

This adds a new internal priority level to the prefetch queue for links that are hovered or touched. The idea is that if a user hovers over a link, they're much more likely to click on it.

The elevated priority is added on mouseenter/touchstart. It is not removed on mouseleave/touchend, because even though the user left the link without navigating to it, the link is still more likely to be navigated to than a link that was never hovered at all.

Because the prefetch queue is last-in-first-out, the highest priority link is whichever link was most recently hovered.

@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
buildDuration 22.1s 20.3s N/A
buildDurationCached 19.2s 16.6s N/A
nodeModulesSize 418 MB 418 MB ⚠️ +375 kB
nextStartRea..uration (ms) 549ms 532ms N/A
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
5306-HASH.js gzip 53.4 kB 53.8 kB ⚠️ +447 B
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 34.1 kB 34.1 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 53.4 kB 53.8 kB ⚠️ +447 B
Legacy Client Bundles (polyfills)
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
index.html gzip 523 B 523 B
link.html gzip 538 B 537 B N/A
withRouter.html gzip 519 B 520 B N/A
Overall change 523 B 523 B
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 207 kB 207 kB ⚠️ +248 B
Overall change 207 kB 207 kB ⚠️ +248 B
Middleware size
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
middleware-b..fest.js gzip 669 B 667 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes Overall increase ⚠️
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 365 kB 366 kB ⚠️ +579 B
app-page-exp..prod.js gzip 129 kB 130 kB ⚠️ +318 B
app-page-tur..prod.js gzip 142 kB 143 kB ⚠️ +316 B
app-page-tur..prod.js gzip 138 kB 139 kB ⚠️ +321 B
app-page.run...dev.js gzip 354 kB 354 kB ⚠️ +539 B
app-page.run..prod.js gzip 126 kB 126 kB ⚠️ +319 B
app-route-ex...dev.js gzip 37.5 kB 37.5 kB
app-route-ex..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.4 kB 25.4 kB
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.7 kB 21.7 kB
pages.runtim...dev.js gzip 27.5 kB 27.5 kB
pages.runtim..prod.js gzip 21.7 kB 21.7 kB
server.runti..prod.js gzip 916 kB 916 kB
Overall change 2.45 MB 2.45 MB ⚠️ +2.39 kB
build cache Overall increase ⚠️
vercel/next.js canary acdlite/next.js segment-cache-prioritize-on-hover Change
0.pack gzip 2.09 MB 2.09 MB ⚠️ +1.32 kB
index.pack gzip 74.7 kB 74.6 kB N/A
Overall change 2.09 MB 2.09 MB ⚠️ +1.32 kB
Diff details
Diff for 5306-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 9fdf122

@acdlite acdlite force-pushed the segment-cache-prioritize-on-hover branch 2 times, most recently from fb4c490 to 9fdf122 Compare January 9, 2025 15:30
@acdlite acdlite requested review from ztanner and lubieowoce January 9, 2025 18:44
// task. This is essentially the same as canceling the task and scheduling
// a new one, except it reuses the original object.
//
// The primary use case is to increase the priority of a Link-initated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// The primary use case is to increase the priority of a Link-initated
// The primary use case is to increase the priority of a Link-initiated

@@ -247,6 +250,7 @@ function onNavigationIntent(element: HTMLAnchorElement | SVGAElement) {
}
// Prefetch the link on hover/touchstart.
if (instance !== undefined) {
instance.wasHoveredOrTouched = true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does/should this encompass keyboard focus as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so, maybe. I'll add to the project tracker.

This adds a new internal priority level to the prefetch queue for links
that are hovered or touched. The idea is that if a user hovers over a
link, they're much more likely to click on it.

The elevated priority is added on mouseenter/touchstart. It is _not_
removed on mouseleave/touchend, because even though the user left the
link without navigating to it, the link is still more likely to be
navigated to than a link that was never hovered at all.

Because the prefetch queue is last-in-first-out, the highest priority
link is whichever link was most recently hovered.
@acdlite acdlite force-pushed the segment-cache-prioritize-on-hover branch from 9fdf122 to 6baac79 Compare January 14, 2025 17:33
@acdlite acdlite merged commit 39c7ade into vercel:canary Jan 14, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants