Site speed and Google ranking - Core Web Vitals explained

Core Web Vitals are three specific metrics of speed and UX that Google directly uses for ranking sites - officially since 2021, with a year-or-two 'grace period'. Every site that isn't in the green zone is losing positions, especially on mobile. Professional optimization is part of our web development service, but you can do quite a bit yourself.

What Core Web Vitals are

Core Web Vitals are 3 specific metrics Google uses to evaluate a site's UX:

• LCP (Largest Contentful Paint) - how fast the largest visible element loads
• INP (Interaction to Next Paint) - how fast the site responds to user action
• CLS (Cumulative Layout Shift) - how much elements 'jump' during loading

Each has 3 zones: green (good), yellow (needs improvement) and red (poor). Goal: all 3 metrics in the green zone for 75% of your site's visits. Google measures real users (Real User Metrics), not just lab tests.

LCP - Largest Contentful Paint

Time from page load to when the largest visible element appears (most often the hero image or large heading).

• Green zone: under 2.5 seconds
• Yellow zone: 2.5-4.0 seconds
• Red zone: over 4.0 seconds

What affects it: hero image size (the biggest culprit), slow server, blocking JavaScript, render-blocking CSS, ineffective caching.

Quick win: optimize the hero image - WebP/AVIF format, srcset for responsive versions, preload tag, fetchpriority='high'. Typically brings LCP from 4.5s to 2.0s.

INP - Interaction to Next Paint

Time from user input (click, tap) to a visible reaction from the site. Replaced FID metric in 2024.

• Green zone: under 200ms
• Yellow zone: 200-500ms
• Red zone: over 500ms

What affects it: heavy JavaScript that 'blocks' the main thread, third-party scripts (Tag Manager, Hotjar, chat widget), unoptimized event handlers.

Quick win: convert all third-party scripts to 'async' or 'defer', delay loading of non-essential ones (load chat widget only after scroll).

CLS - Cumulative Layout Shift

Measure of how much elements 'jump' and move while the page loads. Annoying to the user because they click something they didn't intend.

• Green zone: under 0.1
• Yellow zone: 0.1-0.25
• Red zone: over 0.25

What affects it: images without width/height attributes (browser doesn't know how much space to reserve), fonts that load later (FOUT), ads and embeds that get inserted into layout.

Quick win: add width and height to all <img> tags, use font-display: optional, reserve space for ads before they load.

How to measure

Three free tools I use daily:

1. PageSpeed Insights (pagespeed.web.dev) - gives all 3 metrics for any URL, lab and field data
2. Google Search Console > Core Web Vitals - see real metrics for all your site's pages
3. Chrome DevTools > Lighthouse - local test, good for debugging an individual page

Rule: measure before and after every change. Without measurement, optimization is guessing.

Practical optimization - what first

Priority by impact on most sites:

1. Compress all images to WebP/AVIF format (reduces 60-80% size)
2. Activate browser caching and CDN (Cloudflare has a free plan)
3. Remove unnecessary plugins (every additional JS = slower site)
4. Lazy-load images and iframes below the fold
5. Optimize fonts (preload main, font-display: swap)
6. Minimize CSS and JavaScript (auto-done by modern build tools)
7. Server response time - consider better hosting (Cloudways, Kinsta) if you're below 600ms

Realistic estimate: an average WordPress site with bad hosting and uncompressed images can be optimized in a week - from PageSpeed score 30 to 85+.

Need a performance audit and optimization? See web development service or contact us - we offer a free PageSpeed audit and improvement recommendations.