You opened PageSpeed Insights or Google Search Console and saw red or amber. Now someone has asked you to improve Core Web Vitals, and you need to know what is wrong, what to fix first and how to brief a developer clearly. This guide is written for marketing managers, growth leads and small-business owners. It is practical and prioritised, and you do not need to be a developer to use it.
Why Core Web Vitals matter for marketing sites (and how to read your scores)
Core Web Vitals are three metrics Google uses to describe how a page feels to real visitors:
- Largest Contentful Paint (LCP) measures loading. It tracks how long the main content, usually the hero image or headline, takes to appear.
- Cumulative Layout Shift (CLS) measures visual stability. It tracks how much the page jumps around while it loads.
- Interaction to Next Paint (INP) measures responsiveness. It tracks how quickly the page reacts visually when someone clicks, taps or types.
Google's documentation sets these thresholds for a "good" experience: LCP of 2.5 seconds or less, CLS of 0.1 or less, and INP of 200 milliseconds or less. They are assessed at the 75th percentile of real page visits. INP replaced First Input Delay (FID) as a Core Web Vital in 2024. Any older advice that focuses on FID is out of date.
Field data vs lab data
You will see two kinds of numbers, and they often disagree:
- Field data comes from real Chrome users through the Chrome UX Report (CrUX). It appears at the top of PageSpeed Insights and in Search Console's Core Web Vitals report. This is the data Google uses for page experience.
- Lab data comes from Lighthouse. It runs a single simulated load on a set device and network. It is useful for debugging, but it cannot measure real interactions well.
The two can differ for several reasons. Your real visitors may use slower phones than the simulation. Cookie banners and personalisation may behave differently for real users. INP depends on what people actually click. A good Lighthouse score combined with a failing field assessment is common, and the field result is the one that counts.
Why marketing sites struggle
Marketing sites collect performance problems over time. Common causes include:
- Hero sliders
- Heavy scroll animations
- Bloated tag managers
- Chat widgets
- A/B testing scripts that hide the page until they run
- Embedded video
- Page builders that load CSS for every possible component
Each item may seem harmless when it is added. Together, they slow the page down.
The business case, stated carefully
Core Web Vitals are part of Google's page experience signals, but they are not a magic ranking lever. Relevant, helpful content still matters far more. The stronger argument is user experience. Slow, jumpy, unresponsive pages frustrate visitors, waste paid traffic and tend to hurt engagement and conversion. Fix them for your users first. Any search benefit is a bonus.
Step 1: Diagnose before you fix — a quick audit workflow
Resist the urge to install an "optimisation" plugin and hope for the best. Spend an hour diagnosing the problem first.
Use the free tools:
- PageSpeed Insights shows field and lab data for a single URL, plus specific diagnostics.
- Search Console's Core Web Vitals report groups URLs with similar issues and shows trends across the whole site.
- Chrome DevTools Performance panel shows exactly what the browser is doing during load and interaction.
- The Web Vitals Chrome extension shows live LCP, CLS and INP values as you browse your own site.
Audit by template, not by page. Most marketing sites are built from a handful of templates:
- Homepage
- Campaign landing page
- Blog post
- Service or product page
Fixing a template fixes every page built on it. Search Console's URL grouping often reflects this already.
Record the culprits for each template. PageSpeed Insights names the LCP element, so note whether it is an image, a background image or a text block. Note which elements shift for CLS. Then click around with the Web Vitals extension running to find slow interactions for INP. Menus, accordions, filters and forms are the usual suspects.
Prioritise by value. Start with the templates that get the most organic traffic and the most ad spend. A slow landing page that receives paid traffic every day costs you more than a slow archive page.
If this feels like a lot to take on, you can request a free website performance audit and we will do the diagnosis for you.
Fixing LCP: get the hero content on screen faster
LCP is usually the most visible failure, and it often has the clearest fixes.
Optimise the hero image. Serve it in a modern format such as WebP or AVIF. Size it for the space it actually fills, not at the original camera resolution. Use a responsive srcset so phones download smaller files than desktops. Add fetchpriority="high" to tell the browser this image matters most.
Never lazy-load the LCP image. Lazy loading is great for images further down the page. On the hero, it delays the most important image on purpose. Many themes and plugins apply it everywhere by default, so check yours. If the hero is set as a CSS background image, the browser discovers it late. In that case, either preload it or switch to a normal <img> element.
Reduce server response time. If the HTML itself arrives slowly, nothing else can start. You have three main levers:
- Page caching
- A content delivery network (CDN)
- Hosting that matches your traffic
On WordPress, use a proper page-caching solution and make sure logged-out visitors are served cached pages. Check that plugins or query strings, such as campaign UTM parameters, are not quietly bypassing the cache.
Remove render-blocking CSS and JavaScript. Ask your developer to:
- Inline the critical CSS needed for the first screen
- Defer non-critical scripts
- Strip out unused CSS
Page builders and multipurpose themes are major sources of unused CSS.
Load fonts deliberately. Preload the one or two font files used above the fold. Set an appropriate font-display value. Self-host fonts where it makes sense, which avoids an extra connection to a third-party server.
Replace hero sliders with a single static hero. Carousels load several large images, need JavaScript to run and frequently become the LCP problem. One strong image and message usually performs better, both technically and commercially.
In our own frontend work, delivering faster load times has been an explicit goal. One example is our revamp of Kotak Mahindra Bank's frontend through the agency VMLY&R. That project delivered pixel-perfect accuracy, a +40% increase in UI engagement and faster load times.
Fixing CLS: stop the page from jumping
Layout shift is the visitor who goes to tap "Book a demo" and hits a newsletter banner instead. The fixes are mostly about reserving space.
Set dimensions on media. Give every image, video and iframe a width and height, or a CSS aspect-ratio. The browser can then hold the right amount of space before the file arrives.
Reserve space for late-arriving content. This applies to:
- Ads
- Embeds
- Cookie banners
- Announcement bars
- Review widgets
Give each one a container with a fixed minimum height. Avoid injecting content above content that is already visible. Cookie banners and promo bars should overlay the page or sit in reserved space, not push everything down.
Prevent font-swap shifts. When a web font replaces a fallback font of a different size, text reflows. Developers can use size-adjust and the related fallback metric overrides (ascent-override, descent-override) to make the fallback match the web font closely.
Animate the right properties. Animating top, height, width or margin forces layout recalculation and can register as shift. Animating transform and opacity avoids both problems. This matters a lot for GSAP and scroll-triggered effects. Rich animation is not the enemy; poorly built animation is. For Winning Link Business Solutions, we built Three.js and GSAP animations with React and Next.js that run at 60fps.
Test every breakpoint. Many layout shifts only appear at mobile widths, where elements wrap differently or banners take up more of the screen. Test on real phones, not just a resized desktop window.
Fixing INP: make every click and tap feel instant
INP is newer and less well understood, so here is a plain-language version. The browser has one main worker, called the main thread. It handles running scripts, calculating layout and responding to taps. If a script keeps that worker busy for a long time (a "long task"), a visitor's click has to wait in the queue. The page feels frozen even though it has loaded.
Audit third-party scripts first. This is where marketing sites usually lose the most. Open your tag manager and list every tag. Common findings include:
- Duplicate analytics
- Abandoned pixels from past campaigns
- Heatmap tools nobody checks
- Multiple chat or popup tools
Remove what you do not use. Delay the rest until after the page becomes idle or until the user first interacts. Most chat widgets do not need to load before a visitor scrolls.
Break up heavy JavaScript. On React and Next.js sites, ask your developer about code splitting, so each page loads only the code it needs. Also ask about hydration, the work the browser does to make server-rendered HTML interactive. Hydration cost is a common cause of poor INP on modern framework sites. Long-running work can also be split into smaller chunks so the browser can respond to clicks in between.
Keep interaction handlers light. When someone opens a menu, expands an accordion or submits a form, show visual feedback right away. Do heavier work, such as analytics calls or validation, afterwards.
Check your navigation. Mega-menus on large corporate and marketing sites are frequent INP hotspots. They often carry heavy markup, complex scripts and tracking on every hover. Navigation is worth careful attention. Through VMLY&R, we rebuilt the header navigation and right-side menu for ICICI Bank to improve UX, responsiveness and interaction speed. The result was a +35% gain in navigation efficiency and a reduced bounce rate.
Keep it fixed: governance for marketing teams
Most sites that improve Core Web Vitals slip back within months. The cause is usually process, not technology.
Set performance budgets. Agree limits for each new campaign or landing page, covering:
- Total page weight
- Number of third-party scripts
- Maximum hero image file size
Put these limits in agency and freelancer briefs.
Use a tag checklist. Before anyone adds a new tool or widget, answer four questions:
- What business question does it answer?
- Who owns it?
- Can it load late?
- When will we review or remove it?
Monitor field data monthly. Check the Core Web Vitals report in Search Console every month. CrUX data covers a rolling 28-day window, so a fix deployed today takes weeks to show fully. Do not panic or roll back after a few days. Validate fixes in the lab first, then confirm them in the field.
Make QA part of every release. Performance regressions are easiest to catch before they reach production. Include a quick PageSpeed check and a mobile layout review in your release checklist. Sustained quality comes from discipline across many releases. In our ongoing frontend support for IDFC First Bank, we maintained enterprise-grade performance standards while shipping 50+ features with zero production bugs.
Define ownership. Agree who owns each area:
- Marketing: tags and content weight
- Developers: templates and code
- Your agency: campaign builds
Without named owners, performance becomes nobody's job.
Get a free website performance audit from Ranbanka
The priority order is simple:
- Diagnose by template.
- Fix LCP on your highest-value pages.
- Stop layout shifts.
- Tame scripts and interactions for INP.
- Put governance in place so the gains last.
Ranbanka Systems builds responsive, cross-browser, performance-optimised frontends. That includes work for enterprise brands through agency partners. For Mahindra Racing, via VMLY&R, we delivered a UI optimised for speed, responsive across all devices and with 99% cross-browser compatibility. You can see more examples in our portfolio. Sonal Rathi, Client Solution Manager at VMLY&R, described our work this way: "Ranbanka Systems excels in frontend development, delivering responsive, user-friendly interfaces that elevate user experience. Their attention to detail, creativity, and timely delivery impressed us."
Our services that support this work include:
- Web Development
- UI/UX Design
- QA and Testing
- Maintenance & Support
Here is what you can expect when you get in touch:
- A free website performance audit
- A response within 24 hours
- An NDA and confidentiality if you need them
- A free initial consultation
We will help you find out what is holding your scores back and give you a clear brief your team can act on.
Ready to start? Request your free website performance audit. You can also contact us to discuss a wider project, or browse more practical guides on our blog.