{
  "id": 10400826,
  "title": "Our preload header downloads four files the page never uses, and one query parameter is why",
  "url": "https://urgent.news/2026/09/28/our-preload-header-downloads-four-files-the-page-never-uses-and-one",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-28T08:19:57.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/daniel_pertu/our-preload-header-downloads-four-files-the-page-never-uses-and-one-query-parameter-is-why-h9"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "CogniPrep's homepage shows a grid of company logos. The first four are above the fold, so next.config.mjs sends a preload hint in a response header, which is the earliest possible moment to start those downloads: before the browser has parsed a single byte of HTML. { source : ' / ' , headers : [ { key : ' Link ' , value : [ ' </logos/hsbc.svg>; rel=preload; as=image ' , ' </logos/barclays.svg>;…",
  "key_points": [
    "Preload header downloads four unused files",
    "Query parameter ?dpl=dpl26dq... causes duplicate requests",
    "Fix involves removing preload or matching deployment ID"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}