Getting a static site to green Core Web Vitals

12 September 2026 · 2 min read

My personal site is about as simple as a site gets: a few hundred kilobytes of HTML, one stylesheet and almost no JavaScript. Even so, the first field-data report showed an LCP of 3.1 s on mobile. This post is a short log of what helped and what did not.

Start with field data, not lab scores

Lab tools are great for finding problems, but the number that matters is the 75th percentile of real visits. A fast laptop on fibre will happily report a perfect score for a page that is slow on a mid-range phone over a congested mobile network. Collect the data first, then optimise for the slowest quartile.

What moved LCP

Preloading the hero image with fetchpriority="high" removed roughly 600 ms. The browser simply discovered the image earlier.
Serving AVIF with a WebP fallback cut the image payload by about 55% compared with the original JPEG.
Dropping a web font. System fonts render immediately and removed a whole class of layout shifts.

What moved CLS

Almost everything came down to missing dimensions. Adding width and height attributes to every image, and aspect-ratio to embeds, brought CLS from 0.14 to effectively zero.

What did not matter

Minifying already tiny HTML, inlining the stylesheet on a connection that is reused anyway, and switching HTTP/2 prioritisation settings made no measurable difference. They are fun to tweak and easy to over-credit.

Takeaway

Find the single largest element, make sure the browser learns about it early, reserve space for everything that loads late, and stop there. After the changes the 75th percentile LCP sits at 1.8 s.