Calculator
Core Web Vitals budget calculator
Largest Contentful Paint is the sum of four phases and Interaction to Next Paint of three. Enter what you measured for each phase and see where the budget goes.
Budget
Model the path to a passing result
Adjust the four phases of LCP and the three phases of INP to see where the budget is being spent, then change one phase at a time to see what moves the total.
How the phases add up
- LCP = time to first byte + resource load delay + resource load duration + element render delay.
- INP = input delay + processing duration + presentation delay.
Chrome DevTools shows both breakdowns in the Performance panel, so the numbers can come straight from a trace. Time to first byte is often the first phase worth measuring: how to reduce WordPress TTFB walks through finding where it goes.
Is a phase too big to fix alone?
Tell me which phase is spending the budget and on which pages, and I will say what I would look at first.