Our preload header downloads four files the page never uses, and one query parameter is why

CogniPrep's homepage displays a grid of company logos, with the first four positioned above the fold. During the page load, a preload hint is included in the response header, initiating downloads before the browser parses any HTML. However, this header results in four unnecessary file downloads that the page later disregards. This issue was discovered by opening the Network tab to capture a screenshot for another post.

The waterfall shows each logo being fetched twice, six milliseconds apart, with identical byte counts. The preloaded versions lack a query string, while the actual page requests do not include them. The query parameter "?dpl=dpl_26dq..." is generated by Vercel, a deployment ID, to prevent clients with older builds from mixing assets with newer ones.

Despite being a beneficial feature, this query parameter is applied to all static asset URLs, including those emitted by the framework, but not the Link header generated manually in next.config.mjs. As preload hints are matched by URL, query strings cause duplicate requests, as the browser perceives /logos/hsbc.svg and /logos/hsbc.svg?dpl=dpl_26dq... as separate resources.

This discrepancy occurs when asset URLs are rewritten between the configuration and markup, such as through content hashes, CDN cache-busting parameters, or image optimisers. The warning message indicates that the preloaded resource was never used within a few seconds of the window's load event. The console displays this warning four times, emphasizing the need to ensure intentional preloading with appropriate "as" values.

The preload warning arises when the URL the preload is written for does not match the URL requested by the page. In this case, the framework correctly generates preload links for eager images, while the Link header includes the deployment ID, making it redundant and causing extra duplicate requests. Deleting the preload or modifying the deployment ID to match the framework's approach is the remedy.

The fix involves deleting the header and relying on the eager or priority props on the images to manage asset URLs, streamlining the process and eliminating duplicate requests.