IconVault logoIconVault
Sign in

Web Vitals Budget - Free Online Tool | IconVault

Plan your LCP, INP and CLS budgets: allocate page weight, pick a connection speed and get instant estimates. Free.

All tools

Web Vitals Budget

LCP, INP and CLS budget planner with estimates

5 of 5 free uses left
Total page weight1200 KB

Connection speed

Resource allocation (normalized to 100%)

JavaScript30%
Images40%
CSS8%
Fonts7%
HTML5%
Other10%

Layout-shift risks (CLS)

Images without width/height

LCP

Good

Largest Contentful Paint

1.02s

target <= 2.5s

INP

Good

Interaction to Next Paint

72ms

target <= 200ms

CLS

Good

Cumulative Layout Shift

0.090

target <= 0.1

Budget breakdown

JavaScript: 360 KB
Images: 480 KB
CSS: 96 KB
Fonts: 84 KB
HTML: 60 KB
Other: 120 KB

Full page transfer on Fast 4G: about 0.80s. LCP assumes the hero element depends on HTML, CSS, fonts, 60% of JS and 35% of images. INP scales with JavaScript parse and execution cost. These are planning estimates, not lab measurements.

About this tool

IconVault's Web Vitals Budget helps you plan page performance before you ship. Set your total page weight, pick a connection speed from Slow 4G to fiber, then split the bytes across JavaScript, images, CSS, fonts, HTML and other with allocation sliders. The tool is completely free and runs fully in your browser.

You get instant LCP, INP and CLS estimates with Google's Good / Needs improvement / Poor verdicts, a visual budget breakdown, and a one-click report you can paste into a PR or performance doc. Use it to decide how much JavaScript you can afford or whether that hero image fits the budget.

Frequently asked questions

Popular searches

web vitals budgetcore web vitals calculatorlcp budget calculatorinp budgetcls calculatorpage weight budgetperformance budget toolweb performance budget calculatorlcp inp cls explainedhow to budget web vitalslargest contentful paint budgetinteraction to next paint budgetcumulative layout shift calculatorwebsite speed budget plannerpage speed budget toolcore web vitals thresholdswhat is a good lcp scorehow to improve inp scorereduce cls scoreweb vitals checkerperformance budget examplepage weight vs speedhow many kb should a webpage bejavascript budget performanceimage weight budget webslow 4g page load time calculatorlcp estimate calculatorinp estimatecls score calculatorweb vitals report generatorfrontend performance planningsite speed optimization toolgoogle page experience metricspagespeed budgetweb vitals for developersperformance budget templatelcp under 2.5 seconds howinp under 200mscls under 0.1core web vitals 2026website performance metrics toolpage load time estimatorbandwidth page weight calculator4g page load calculatorweb performance audit toolfrontend speed budgetoptimize lcp inp clsweb vitals dashboardsite performance planner freepage experience signals

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →