Core Web Vitals and Performance Optimization
What the three metrics measure, what they did on three of our own rebuilds, and where the load time usually goes.
Google's Core Web Vitals are three measurements of how a page feels to use: how fast the main content paints (Largest Contentful Paint), how quickly the page responds to a tap or click (Interaction to Next Paint, which replaced First Input Delay in 2024), and how much the layout jumps while loading (Cumulative Layout Shift). They are a ranking signal, but the more useful way to read them is as a description of the first five seconds a visitor spends with you.
What the numbers look like on real sites
We measure every rebuild with the same instrument on the same day, before and after. So instead of industry averages, here is what the metrics did on three of our own projects.
- Florida Green Improvements: homepage largest contentful paint on mobile from 11.62s to 3.46s, homepage weight from 29,834 KiB to 1,839 KiB, mobile performance score 59 to 90.
- Prodani Miami: largest contentful paint from 768ms to 352ms and product-page layout shift from 0.075 to 0.012, over five interleaved runs per page with the cache disabled.
- Zahav Medspa: a Google performance score of 99/100 on desktop with a layout shift of zero, re-runnable by anyone against zahavmedspa.com.
Each of those has a case study on this site with the method written down, including the figures that moved the wrong way.
Where the time usually goes
Across those rebuilds, the same few causes accounted for most of the gap.
- Media served at upload size. One 5.6MB hero video re-encoded to 375KB was three quarters of Prodani's homepage saving on its own.
- Scripts and stylesheets loading before the page can paint. Anything the first screen does not need belongs after it.
- Fonts fetched from a third party on the critical path. Self-hosted, subsetted files, with the hero face preloaded and nothing else.
- Nothing reserving space for content that arrives late, which is what layout shift measures. Fixed-size slots for images, video and anything that types itself in.
How to check your own site
Run PageSpeed Insights at least twice on a warmed-up page and treat a single run as noise. Mobile is where the problems show, because mobile is where the throttling is. If you have field data, read that first; the lab score is a proxy.
If your site is slow, the fix is rarely one trick. It is measuring, cutting what the first screen does not need, then measuring again. That is also what the case studies above are.