Why do Core Web Vitals and mobile page speed matter, and how do you fix them?
What LCP, INP, and CLS mean, why mobile is usually the problem, and what to fix first.
Core Web Vitals are Google's three page experience metrics, and they matter because they measure the exact moments a visitor decides to stay or leave. Mobile is usually where a site fails them, because phones have slower processors and worse connections than the laptop your site was designed on.
The three metrics and the thresholds
Google publishes specific targets on web.dev, assessed at the 75th percentile of page loads:
- Largest Contentful Paint (LCP) measures loading. Good is 2.5 seconds or less. This is when the biggest thing on screen, usually the hero image or headline, finishes rendering.
- Interaction to Next Paint (INP) measures responsiveness. Good is 200 milliseconds or less. This is the lag between a tap and something visibly happening.
- Cumulative Layout Shift (CLS) measures visual stability. Good is 0.1 or less. This is the score for content jumping around while the page loads.
The 75th percentile detail matters. Passing means three quarters of real visits hit the target, so your fast test on office wifi proves nothing.
The usual culprits
In practice, three things cause most failures. Oversized hero images, where a 3 MB photo is served to a phone that needed a 200 KB version. Third party scripts, where chat widgets, heatmap tools, ad pixels, and popup builders each add a request and some add blocking JavaScript. And web fonts loaded in a way that blocks rendering or swaps late, which also causes layout shift.
The fixes are unglamorous: compress and correctly size images, serve WebP, lazy load anything below the fold, reserve space for images and embeds with width and height attributes, audit the script list and delete what nobody reads, and self host or preload fonts with a sensible display setting.
Mobile first is a sequence, not a slogan
Mobile first means designing the phone layout first and then expanding it, rather than designing a desktop page and squeezing it. When you start on the small screen you are forced to decide what actually matters, which usually produces a better desktop page too.
One structural advantage worth naming: HubSpot CMS includes hosting and a CDN, so serving assets close to the visitor is not something you have to buy and configure. That removes one variable, though it will not rescue a page carrying 4 MB of images.
Related: Will my website be mobile-friendly?, How much does page speed affect conversion rate?, Does LevelUp Digital build websites on HubSpot CMS?, and our blog post on UX must-haves for HubSpot websites.