Get In Touch

When I was building The Canadian Home — a real estate platform for UAE property listings — performance wasn’t just a nice-to-have. It was a ranking factor. Google’s Core Web Vitals are three specific metrics that measure how a real user experiences your page. Miss the targets and your rankings suffer. Hit them and you gain a real SEO edge.

What Are Core Web Vitals?

Core Web Vitals are three metrics Google uses to measure real-world user experience on a webpage:

LCP — Largest Contentful Paint
Measures how long it takes for the largest visible element to load. Google’s target: under 2.5 seconds. On The Canadian Home, our hero banner image was the LCP element — optimising it was the first priority.

INP — Interaction to Next Paint
Measures how quickly your page responds when a user clicks or taps. Google’s target: under 200ms. For a Next.js app with dynamic property filters, this meant reducing JavaScript blocking time.

CLS — Cumulative Layout Shift
Measures how much your page layout jumps as it loads. Google’s target: under 0.1. We fixed CLS on The Canadian Home by setting explicit width and height on all images so the browser reserved space before images loaded.

How Core Web Vitals Affect Your SEO Rankings

They’re a tiebreaker. If two pages have similar content and backlinks, the one with better Core Web Vitals scores will rank higher. In competitive markets like UAE real estate, this matters.

They affect mobile rankings more. Google uses mobile-first indexing — it ranks your site based on the mobile version. On The Canadian Home, desktop LCP was 1.8s (good) but mobile was 3.2s (needs improvement) before we optimised.

They influence bounce rate indirectly. A slow or jumpy page causes users to leave immediately. Google sees that high bounce rate and interprets it as a bad result — pushing you further down rankings.

How to check your scores:

For my own portfolio lakshmiunni.com, the Week 1 Lighthouse audit showed desktop performance at 93 but mobile LCP at 5.8s — clearly the next thing to fix.

What I Did to Improve Core Web Vitals on a Real Project

On The Canadian Home (Next.js, UAE property listings), here are the specific changes we made:

1. Next.js Image component
Replaced standard img tags with Next.js Image — which automatically serves WebP format, lazy-loads below-the-fold images, and prevents layout shift by requiring width and height.

2. Reduced JavaScript bundle size
Used dynamic imports (next/dynamic) to split large components so they only load when needed. This improved INP significantly.

3. Explicit image dimensions everywhere
Every image got width and height attributes — this alone dropped CLS from 0.3 to 0.02.

4. LiteSpeed Cache on WordPress projects
LiteSpeed Cache handles browser caching, CSS/JS minification, and lazy loading — all of which directly improve LCP.

Result: 30% improvement in organic traffic over 6 months.

Conclusion

Core Web Vitals aren’t just a technical checklist — they’re a direct reflection of how real users experience your site, and Google rewards you for getting them right.

Want to see how I approached performance on a real project? Read my Case Studies →

Working on something similar? Get in touch →