Core Web Vitals for SaaS: A Developer's Fix List

Most advice on Core Web Vitals for SaaS sites stops at "compress your images". That is a start, but the reasons SaaS marketing pages fail these metrics are more specific: a giant hero video, three analytics and chat scripts loading before anything else, a cookie banner that pushes the page down, a pricing toggle that freezes for a moment on a phone. This is the fix list I work through on a SaaS site, in the order that usually gets the biggest improvement for the least effort.

What Core Web Vitals measure, and the thresholds

Core Web Vitals are three metrics Google uses to describe real-user page experience. According to Google Search Central, the targets are:

• Largest Contentful Paint (LCP): within 2.5 seconds. How long until the biggest element in the viewport, usually the hero headline or image, has rendered.
• Interaction to Next Paint (INP): under 200 milliseconds. How quickly the page visibly responds after someone clicks, taps or types. INP replaced First Input Delay as a Core Web Vital in March 2024, so older guides that only talk about FID are out of date.
• Cumulative Layout Shift (CLS): below 0.1. How much the layout jumps around while it loads.

Two details matter here. First, these are measured on real visitors' devices (field data), not just in a Lighthouse run on your laptop. Second, a page passes when at least 75% of visits meet the target, so the experience of your slower visitors counts.

Core Web Vitals for SaaS: why they matter

There are two reasons, and it is worth being precise about both.

Search. Google describes Core Web Vitals as part of page experience, which it says aligns with what its core ranking systems aim to reward. It does not say good scores will outrank better content, and they will not. Treat them as a factor that helps when everything else is equal, not a shortcut.

Conversion. This is the bigger reason. The best-documented evidence comes from outside SaaS, so read it as direction rather than a forecast for your site. In a study commissioned by Google and run by 55 and Deloitte across 37 brand sites, a 0.1-second improvement in mobile site speed was associated with more visitors progressing through the funnel, including a 21.6% improvement in lead-generation visitors reaching the form submission page. And in a one-month A/B test, Rakuten 24 found that the page optimized for Core Web Vitals had a 33.13% higher conversion rate than the original. Your numbers will be different, but a SaaS landing page is also a funnel ending in a form, so the mechanism is the same.

Step 1: measure before you change anything

1. Run your key pages (home, pricing, top landing pages) through PageSpeed Insights. Look at the field data section first. If there is not enough traffic for field data, use the lab results as a guide.
2. Check the Core Web Vitals report in Google Search Console to see which groups of URLs fail and on which metric.
3. Note the LCP element PageSpeed Insights identifies. Most LCP work starts there.
4. Write the numbers down. Without a before measurement you cannot prove an after.

Step 2: fix LCP, usually the hero

On SaaS home pages, the LCP element is almost always the hero: a big headline, a product screenshot, or a background video. The usual culprits and fixes:

The hero image or screenshot loads late

Serve it in a modern format at the size it is displayed, and tell the browser it is important. In Next.js, the Image component handles resizing and formats. Note that as of Next.js 16, the old priority prop is deprecated in favour of preload, and the Next.js docs say that in most cases you should use loading="eager" or fetchPriority="high" on the LCP image instead. Never lazy-load the hero.

The hero is a video

Autoplay video is one of the most expensive things you can put above the fold. Use a lightweight poster image as the LCP element and load the video after, or replace it with a short looping clip that is heavily compressed. Ask honestly whether the video sells the product better than a sharp screenshot and one strong headline.

Text waits for a web font

If the headline is the LCP element, a slow font download delays it. Self-host fonts and limit the number of weights. In Next.js, next/font self-hosts font files automatically.

The server is slow to respond

If time to first byte is high, everything else waits. Marketing pages rarely need to be rendered on every request: render them statically or cache them at the edge.

Step 3: fix INP, usually JavaScript

INP problems come from the main thread being busy when a visitor tries to interact. On SaaS sites the usual sources are:

• Third-party scripts. Chat widgets, analytics, A/B testing tools, heatmaps, ad pixels. Audit the list, remove what nobody looks at, and load the rest after the page is interactive or on user intent (for example, load the chat widget when someone clicks "Chat").
• Too much client-side JavaScript. A marketing page does not need to ship like an app. With React Server Components in the Next.js App Router, most of a marketing page can render on the server and send no component JavaScript to the browser. Keep client components for the parts that are actually interactive.
• Heavy interaction handlers. Pricing toggles, tabbed feature sections and calculators that re-render large parts of the page on every click. Keep the state local to the component that changes and avoid recalculating everything.

Step 4: fix CLS, usually banners and media

• Images and embeds without dimensions. Always set width and height (or an aspect ratio) so the browser reserves the space.
• Cookie and announcement banners that push content down after load. Overlay them, or reserve their space from the first paint.
• Font swaps that change text size. Use matched fallback fonts; next/font does this for you.
• Late-loading elements such as a logo carousel or a review widget injected above existing content.

Step 5: protect the gains

Core Web Vitals regress quietly. A new marketing tool gets added, a hero video comes back, and six months later the scores are worse than before. Three habits prevent that:

1. Keep a short list of approved third-party scripts and agree on who can add to it.
2. Re-check the key pages in PageSpeed Insights after every significant release.
3. Watch the Search Console Core Web Vitals report monthly.

If your site has deeper problems than a fix list can solve, such as a theme that ships megabytes of unused code, it may be time for a rebuild. Our SaaS website redesign checklist helps you decide, and this breakdown of SaaS website cost shows what that typically involves.

FAQ

Is a 100 Lighthouse score necessary?

No. Lighthouse is a lab test on a simulated device. What matters for Google's page experience assessment is field data from real visitors. A page can pass Core Web Vitals without a perfect Lighthouse score.

Do Core Web Vitals apply to my logged-in app?

Search impact applies only to pages Google indexes, so mainly your marketing site. But the same metrics describe how your app feels to users, especially INP on data-heavy dashboards.

How long until improvements show up?

Field data in PageSpeed Insights and Search Console is based on a rolling window of recent real-user visits, so improvements appear gradually rather than the day you deploy.

Can you fix this without rebuilding the site?

Often, yes. Removing scripts, fixing the hero and reserving space for banners can be done on most stacks. A rebuild makes sense when the underlying framework or theme is the bottleneck.

Find out what is slowing your site down

Our Performance Engine package rebuilds slow SaaS marketing and landing pages and benchmarks the speed before and after. Not sure where your problems are? Send us your URL for a free Loom video audit: the issues on your pages, ranked by impact, plus a fixed-price proposal. Get your free video audit.