When our team was building The Canadian Home — a property listing platform serving the Canadian real estate market — one thing became clear fast: page performance wasn’t optional. It was a ranking factor that directly affected how many buyers actually saw the listings.
I’m a Front-End Developer based in Abu Dhabi, UAE, and real estate platforms are one of the most performance-sensitive web categories out there. Whether it’s a platform in Canada or here in the UAE — DAMAC, Emaar, Bayut, or Property Finder — the performance challenges are identical. Slow LCP kills rankings. High CLS kills trust. Poor INP kills conversions.
In this post, I’ll break down exactly what Core Web Vitals are, how they affect search rankings for real estate platforms, and the specific technical work I contributed to — including migrating the platform from React to Next.js and implementing a full Technical SEO foundation.
What Are Core Web Vitals?
Core Web Vitals are three metrics Google uses to measure real-world user experience on a webpage. Since 2021, they’ve been an official Google ranking factor — meaning they directly affect where your pages appear in search results.
LCP — Largest Contentful Paint
Measures how long it takes for the largest visible element to load. For real estate sites, this is almost always the hero image or the first property photo. Google’s target: under 2.5 seconds. On The Canadian Home, the hero banner image was the LCP element — optimising it was the first priority.
INP — Interaction to Next Paint
Replaced FID in March 2024. Measures how quickly your page responds when a user clicks or taps — filtering properties by price, bedroom count, or location. Google’s target: under 200ms. For an 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 — when images pop in and push content down. On property listing pages with multiple images loading at once, CLS is a serious problem. Google’s target: under 0.1.
Why Core Web Vitals Matter More for Real Estate Sites
Real estate is one of the most competitive search categories on the internet. In the UAE alone, platforms like Bayut, Property Finder, and Dubizzle compete for the same high-intent keywords — “apartments for rent in Dubai”, “villas for sale in Abu Dhabi”, “off-plan projects UAE.”
They’re a tiebreaker. If two real estate pages have similar content and backlinks, the one with better Core Web Vitals scores will rank higher. In UAE real estate search, even one position difference can mean thousands of monthly visits.
They affect mobile rankings more. Google uses mobile-first indexing — it ranks your site based on the mobile version. UAE has one of the highest smartphone usage rates in the world. Most property searches happen on mobile. A desktop-optimised site that performs poorly on mobile will rank lower regardless of its content quality.
They influence bounce rate indirectly. A slow or jumpy property listing page causes users to leave immediately. Google interprets that high bounce rate as a poor result — pushing you further down rankings. Slow site → high bounce → lower rankings → less traffic. It compounds.
How to check your scores:
- Google Search Console → Core Web Vitals report (real user field data — what Google actually uses for rankings)
- PageSpeed Insights → pagespeed.web.dev (combines field data + lab data)
- Lighthouse in Chrome DevTools → F12 → Lighthouse tab (lab data — best for diagnosing and fixing issues)
For my own portfolio lakshmiunni.com, my Week 1 Lighthouse audit showed desktop performance at 93 but mobile LCP at 5.8s — the exact same mobile performance gap I see on most real estate sites. (Note: Lighthouse gives lab data — Google uses real user field data from Search Console for actual rankings, but Lighthouse is the best tool for diagnosing and fixing issues.) It’s always the next thing to fix.
My Contribution: React to Next.js Migration
The Canadian Home was originally built as a React single-page application (SPA). While React is excellent for interactive UIs, SPAs have a fundamental SEO problem — Google has to render JavaScript before it can read the content. This means slower indexing and weaker rankings.
As part of my role, I contributed to migrating the platform to Next.js, which solved this at the framework level:
- Server-Side Rendering (SSR) — pages are pre-rendered on the server, so Google can read the content immediately without executing JavaScript first
- Static Generation (SSG) — property listing pages that don’t change frequently are generated at build time, making them load almost instantly
- Automatic code splitting — Next.js only sends the JavaScript needed for the current page, reducing bundle size significantly
- Built-in image optimisation — the Next.js Image component handles WebP conversion, lazy loading, and layout shift prevention automatically
The migration from React SPA to Next.js made the site properly crawlable and indexable by Google — a foundational requirement before any other SEO work can take effect.
My Contribution: Core Web Vitals Fixes
1. Next.js Image component for all property images
Replaced standard <img> tags with the Next.js <Image> component. This automatically serves WebP format (significantly smaller file size than JPG), lazy-loads below-the-fold property images, and prevents layout shift by requiring explicit width and height attributes.
2. Dynamic imports to reduce JavaScript blocking
Used next/dynamic to split large components — the property map, filter panel, and mortgage calculator — so they only load when needed. This reduced the initial JavaScript bundle size and improved INP on pages with complex interactive filters.
3. Explicit dimensions on every image
Every property image, thumbnail, agent photo, and icon received explicit width and height attributes in the HTML. This tells the browser how much space to reserve before the image loads — eliminating the layout shift that was pushing content around as the page loaded.
4. Preloading the hero/LCP image
Added a <link rel="preload" as="image"> tag for the hero banner so the browser fetches it immediately — before it discovers it inside the CSS or HTML. This reduces LCP by ensuring the most important image starts loading as early as possible.
My Contribution: Technical SEO Foundation
Core Web Vitals are only part of the SEO picture. As part of my responsibilities on the project, I implemented a complete Technical SEO foundation for The Canadian Home:
Sitemap.xml
Generated a dynamic XML sitemap covering all property listing pages, location pages, and static pages. Submitted to Google Search Console so Google could discover and index every page efficiently.
robots.txt
Configured robots.txt to allow Googlebot to crawl all public pages while blocking admin routes, API endpoints, and duplicate content paths that could dilute ranking signals.
Meta tags per page
Added unique SEO title and meta description for every page type — homepage, listing pages, location pages, and property detail pages. Used Next.js Head component to manage these dynamically based on the property data.
Alt text on all images
Added descriptive alt text to every property image, agent photo, and UI element. This serves two purposes: accessibility for screen readers and keyword signals for Google Image Search — both important for a property platform.
Image loading strategy
Set loading="eager" on above-the-fold images (hero, first property card) and loading="lazy" on everything below the fold. This prioritises what the user sees first and defers everything else — improving both LCP and overall page load performance.
Clean URL structure
Implemented SEO-friendly URLs for all category and location pages — /listing/house-for-rent/ontario/ — making it easy for Google to crawl, understand, and rank each page. Dynamic filter parameters handle user search experience without creating duplicate content issues.
Applying This to UAE Real Estate Platforms
The same principles apply directly to any UAE property platform. Whether you’re building or optimising a site for a developer in Downtown Dubai, a boutique broker in Abu Dhabi, or a proptech startup in Dubai Internet City — the performance and SEO bottlenecks are the same:
- Hero property images loading slowly → fix LCP with preload + Next.js Image
- Filter panels blocking interaction → fix INP with dynamic imports
- Property thumbnails jumping on load → fix CLS with explicit dimensions
- Pages not indexed by Google → fix with SSR migration + sitemap + robots.txt
- Missing meta tags → fix with dynamic Head components per listing
If you’re a UAE real estate company or agency looking to improve your organic search rankings, Core Web Vitals combined with a solid Technical SEO foundation is one of the highest-ROI investments you can make right now.
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. For high-competition markets like UAE real estate, the difference between a good and poor Core Web Vitals score can directly impact your organic visibility.
Working on The Canadian Home taught me that performance and SEO aren’t separate disciplines — they’re the same thing viewed from different angles. Fast sites rank better. Well-structured sites get indexed better. And both together compound into real organic growth.
Want to see the full technical breakdown? Read the Case Study →
Working on a UAE real estate platform and want to improve performance or SEO? Get in touch →
Skills demonstrated in this project: Next.js · React · Technical SEO · Core Web Vitals · Web Performance · Google Search Console · sitemap.xml · robots.txt · Image Optimisation · Front-End Development