webzod
account

Make the largest element on the page load faster on Cloudflare

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

  1. Check that the hostname is proxied (orange cloud) in DNS. Cloudflare already caches common static files (images, css, js, fonts) by file extension, but not html. A Cache Rule under Caching, Cache Rules is only needed to set a longer Edge TTL and Browser TTL for those files (a month is a sensible start for files whose names change when their content does).
  2. For a WordPress site, Cloudflare's Automatic Platform Optimization (an add-on for the Free plan, included with higher plans) caches html safely for logged-out visitors. Do not use Cache Everything on pages that differ per visitor, because it can serve one visitor's page to another.
  3. In Speed, Settings, Content Optimization turn on Early Hints. It only has an effect when your origin sends Link headers with rel=preload or rel=preconnect for the key assets (for example the hero image or main font); the browser then starts loading them while your server is still answering. Polish (image compression and WebP or AVIF conversion, on paid plans) can shrink images that you cannot change at the source.
Cache rule expression (Caching, Cache Rules) 
(http.host eq "example.com" and http.request.uri.path.extension in {"css" "js" "woff2" "avif" "webp" "png" "jpg" "jpeg" "svg"})

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

Read the documentation (opens in a new tab)

Related

Scan your domain to see whether this applies to you.