Make the largest element on the page load faster on Vercel

perf.cwv.lcp_needs_improvement · effort: about an hour

Why it matters

Largest Contentful Paint is how long visitors wait before the main image or heading shows, and the value is above the good threshold. A few changes to the main image and caching usually bring it into the good range.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

Vercel serves your static files from its edge network. Files that your framework fingerprints (Next.js does this for its built assets) are already cached for a long time.
For your own static assets in a folder such as /assets, add a header rule with a long lifetime, but only if the file names change when their content changes. Mark the hero image with the framework's priority image option or with fetchpriority.

vercel.json

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

Read the documentation (opens in a new tab)

Scan your domain to see whether this applies to you.

Why it matters

The fix

Related