Make the largest element on the page load faster on Caddy

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. Turn on compression and give files whose names change with their content a long cache lifetime. Use the long lifetime only for fingerprinted files such as app.3f9c2a.js; for others use a shorter max-age.
2. The long lifetime is set before the file is looked up, so the handle_errors block in the snippet removes it from error pages such as a missing file. It covers files that Caddy serves itself; for files from an application behind reverse_proxy, set Cache-Control in the application.
3. Run caddy reload and check the Cache-Control and Content-Encoding headers with curl -I.

example.com {
	encode zstd gzip
	@static path_regexp static \.(css|js|woff2|avif|webp|png|jpe?g|svg)$
	header @static Cache-Control "public, max-age=31536000, immutable"
	root * /var/www/html
	file_server
	handle_errors {
		header -Cache-Control
		respond "{err.status_code} {err.status_text}"
	}
	# keep the rest of your site configuration here
}

The examples use example.com. Replace it with your own domain.

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