Core Web Vitals Budget Calculator
Performance budgets only work when they are concrete. This calculator turns the three Core Web Vitals thresholds into real numbers for a page of your size and complexity.
How this tool works
Core Web Vitals measures three things on a real visit: how long the largest element takes to appear, how long the first interaction takes to respond, and how much the page shifts while it loads. They are field metrics, measured on real users rather than in a lab, and a score that is good in a lab says very little about what your visitors experience.This calculator turns the three thresholds into the milliseconds and the byte budget a page can actually spend, which is the number a developer can act on. It shows how much main-thread time is available before the first interaction becomes sluggish, how much the layout has to hold still, and how large an image can be before it delays the largest contentful paint. The budgets are derived from the thresholds, so a page that meets them meets the metric.
When to use it
- Set performance budgets for a project before it is built
- Check whether a page has enough time budget for the JavaScript it ships
- Understand what the Core Web Vitals thresholds mean in milliseconds
- Decide how large an image can be before it starts costing paint time
Frequently asked questions
What are the current Core Web Vitals thresholds?
Largest Contentful Paint at 2.5 seconds, Interaction to Next Paint at 200 milliseconds, and Cumulative Layout Shift at 0.1, each measured at the 75th percentile of real page loads.
Do the thresholds apply to every page?
They are assessed per page group, and the thresholds are per page. A site can pass overall and still have slow individual pages.
What is the difference between lab and field data?
Lab data is measured on a controlled device and is reproducible. Field data is measured on real visits across real devices and networks, and it is the field data that Google uses.
Can a page pass the thresholds on desktop and fail on mobile?
Yes, and it is common. Mobile devices are slower and the thresholds are the same, so the gap between them is where most of the work is.
What is the biggest cause of a poor Interaction to Next Paint?
Long tasks on the main thread, usually from a third party script that blocks while it parses or executes.
How do layout shifts get fixed?
By reserving space for anything that will appear later: set the size of images, video and ad slots in the CSS, and do not insert content above what the user is already reading.