fix: yield main thread before navigating #12225
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
By default, SvelteKit preloads the data and code needed to navigate when you touch or hover over a link. As a consequence, it's often the case that navigation can occur immediately following a click event, with no delay for network activity.
Ironically, this means that navigation becomes less responsive, not more, because the browser doesn't get a chance to repaint before the navigation occurs and the page is re-rendered, which can cause dropped frames on slower devices. Because of this, the Interaction to Next Paint (INP) metric suffers, which harms the Core Web Vitals (CWV) score of SvelteKit apps.
This PR adds a tiny pause inside the
click
handler before navigation. The combination ofrequestAnimationFrame
andsetTimeout
allows the browser to repaint, but without creating a user-noticeable delay.No tests because I'm not sure how you would test for this.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm test
and lint the project withpnpm lint
andpnpm check
Changesets
pnpm changeset
and following the prompts. Changesets that add features should beminor
and those that fix bugs should bepatch
. Please prefix changeset messages withfeat:
,fix:
, orchore:
.Edits