LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page (usually a hero image or large heading) to load. Google's threshold is under 2.5 seconds for a "good" score. Most Dubai business sites fail this on mobile.
The most common LCP problems: hero images that are not preloaded, images in formats that load slowly (JPEG/PNG instead of WebP/AVIF), and server response times above 600ms. Preloading the LCP image element with a link rel="preload" tag is often the single fastest win.
INP: Interaction to Next Paint
INP replaced FID (First Input Delay) as the Core Web Vital measuring interactivity. It measures how quickly the page responds to all user interactions, not just the first. Google's threshold is under 200ms.
INP problems are almost always caused by heavy JavaScript: long tasks that block the main thread, third-party scripts running at the wrong time, or inefficient event handlers. In React and Next.js applications, unnecessary re-renders and unoptimised state management are common INP culprits.
CLS: Cumulative Layout Shift
CLS measures how much the page layout shifts as it loads. When elements move unexpectedly, users misclick and experience frustration. Google's threshold is under 0.1. Common causes: images without explicit dimensions, ads or embeds without reserved space, and fonts loading after the page is already rendered.
For Dubai sites, the most frequent CLS source is Google Ads and third-party widgets. Defining explicit width and height on all images and reserving space for ad slots eliminates most CLS problems.