Make the largest element on the page load faster on Netlify

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

1. Netlify serves your files from its CDN, but by default asks browsers to revalidate them. For assets whose names change with their content, add a header rule with a long lifetime in _headers. Do not use it for files that keep their name when they change.
2. Optimise the hero image (size, AVIF or WebP) before the build, and use fetchpriority="high" on it.

/assets/*
  Cache-Control: public, max-age=31536000, immutable

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Core Web Vitals check
• Make the largest element on the page load faster
• Stop the page layout from jumping while it loads
• Stop the page layout from jumping while it loads
• Make the page respond faster to clicks and taps
• Make the page respond faster to clicks and taps
• Reduce the JavaScript that blocks the page while it loads
• Reduce the JavaScript that blocks the page while it loads
• Collect real-user speed data for your site