Add data-sveltekit-preload-data="tap" to HTML body for SvelteKit applications

[carsonmccue]

In Sveltekit, the preload function is used to load data on the server side before the page is rendered. This can help improve the performance and user experience of the application by reducing the amount of time it takes for data to be displayed on the screen. However, it also results in unused data and excessive electricity consumption.

When you use the data-sveltekit-preload-data="tap" attribute on the HTML body, it tells Sveltekit to only load the data for that link when it is tapped or clicked by the user. This is in contrast to using data-sveltekit-preload-data="hover", which would load the data when the user starts to hover over it. The hover value will result in false positives for navigation and extra data being loaded.

Because Sveltekit is growing in usage, we should edit the HTML body attribute to data-sveltekit-preload-data="tap". I am not sure how we would go about implementing this because there is no contribution guide.

Sveltekit preloading documentation: https://kit.svelte.dev/docs/link-options
Potential code: document.documentElement.setAttribute("data-sveltekit-preload-data", "tap")

If you have any questions, please let me know. If I do not hear back soon, I will try to search through the existing codebase and find where adding this is appropriate.