Core Web Vitals: How to Check and Improve Your Website Speed

Your website might look great, but if it's slow, Google knows. And Google cares.

Core Web Vitals measure real user experience on your site. They affect your search rankings and your conversion rates. Here's how to check yours and fix problems.

What Are Core Web Vitals?

Core Web Vitals are three metrics measuring user experience:

LCP (Largest Contentful Paint)

What it measures: How fast the main content loads.

Target: Under 2.5 seconds

LCP tracks when the largest content element (usually a hero image or heading) becomes visible. It's about perceived load speed.

INP (Interaction to Next Paint)

What it measures: How responsive your site is to user interactions.

Target: Under 200 milliseconds

INP replaced FID in 2024. It measures the delay between a user action (click, tap, key press) and the visual response. Sluggish sites frustrate users.

CLS (Cumulative Layout Shift)

What it measures: Visual stability during loading.

Target: Under 0.1

CLS tracks unexpected layout shifts. You know when you're about to tap a button and something loads above it, pushing the button down? That's layout shift. Users hate it.

Why Core Web Vitals Matter

Search Rankings

Google confirmed Core Web Vitals are a ranking factor. Not the most important one, but meaningful. All else equal, faster sites rank higher.

User Experience

Slow sites have higher bounce rates and lower conversions. Users expect fast. If your competitor's site loads instantly and yours takes 5 seconds, you lose.

Conversion Rates

Studies consistently show faster sites convert better. Even small improvements matter. One second faster can mean measurably more leads or sales.

How to Check Your Core Web Vitals

Google PageSpeed Insights

The primary tool. Go to pagespeed.web.dev, enter your URL, and get:

• Real user data (from Chrome users who visited your site)
• Lab data (simulated tests)
• Specific issues and recommendations

The field data (real users) matters most. Lab data helps diagnose issues.

Google Search Console

If you have Search Console set up:

• Go to Experience > Core Web Vitals
• See which pages pass, need improvement, or fail
• Click through for specific issues

Search Console shows site-wide patterns, not just individual pages.

Chrome DevTools

• Open your site in Chrome
• Press F12 to open DevTools
• Go to Lighthouse tab
• Run a performance audit

More technical but gives detailed recommendations.

GTmetrix

Popular alternative to PageSpeed Insights. More visual waterfall charts showing exactly what loads when.

Fixing LCP (Largest Contentful Paint)

If your LCP is too slow, the main content is taking too long to appear.

Optimise Images

Images are the most common LCP culprit.

• Compress images: Use TinyPNG, ShortPixel, or similar
• Use modern formats: WebP is smaller than JPEG/PNG with similar quality
• Size appropriately: Don't serve 3000px images to 800px containers
• Add dimensions: Include width and height attributes

Implement Lazy Loading

Load images only when they're about to enter the viewport. Add loading="lazy" to image tags (except for above-the-fold images).

Upgrade Your Hosting

Cheap shared hosting is slow. Moving to quality hosting (like Cloudways, WP Engine, or Kinsta) often dramatically improves LCP.

Use a CDN

A Content Delivery Network serves your content from servers closer to your users. Cloudflare has a free tier that helps.

Minimise Render-Blocking Resources

CSS and JavaScript that block rendering delay LCP.

• Inline critical CSS
• Defer non-critical JavaScript
• Remove unused CSS and JS

This gets technical. Developer help may be needed.

Fixing INP (Interaction to Next Paint)

If your INP is too slow, interactions feel sluggish.

Reduce JavaScript Execution Time

• Remove unused JavaScript
• Split large JS files into smaller chunks
• Defer non-critical scripts

Break Up Long Tasks

JavaScript tasks over 50ms block responsiveness. Break them into smaller chunks.

Optimise Event Handlers

• Remove unnecessary event listeners
• Use passive listeners where appropriate
• Avoid heavy processing in response to user actions

INP issues are often caused by third-party scripts (analytics, chat widgets, advertising). Audit what's loading.

Fixing CLS (Cumulative Layout Shift)

If your CLS is too high, things are moving around during load.

Set Image and Video Dimensions

Always include width and height attributes:

<img src="image.jpg" width="800" height="600" alt="Description">

Or use CSS aspect-ratio:

img { aspect-ratio: 4 / 3; }

This reserves space before the image loads.

Reserve Space for Ads and Embeds

If you show ads, social embeds, or other dynamic content, reserve their space in CSS before they load.

Avoid Inserting Content Above Existing Content

Banners, notifications, or content that loads and pushes things down causes CLS. Load them in reserved space or after user interaction.

Use CSS Transform for Animations

Animations using top, left, width, or height can cause layout shifts. Use transform and opacity instead.

Watch Web Fonts

Font loading can cause text to shift. Use font-display: swap and preload important fonts.

Quick Win Checklist

Before diving into complex fixes, try these quick wins:

☐ Compress all images (use TinyPNG or ShortPixel)

☐ Add width and height to all images

☐ Upgrade to quality hosting

☐ Enable a CDN (Cloudflare free tier)

☐ Remove unused plugins/scripts

☐ Lazy load below-the-fold images

☐ Defer non-critical JavaScript

☐ Check for layout-shifting ads or embeds

These often get you most of the way to passing scores.

Platform-Specific Guidance

WordPress

• Use a lightweight theme (not bloated multipurpose themes)
• Install a caching plugin (WP Rocket, LiteSpeed Cache)
• Use an image optimisation plugin (ShortPixel, Smush)
• Audit your plugins. Remove what you don't need.

Shopify

• Use Shopify's built-in image optimisation
• Minimise apps (each adds JavaScript)
• Choose a well-coded theme
• Consider Shopify's CDN benefits

Custom Sites

• Implement proper build processes (minification, compression)
• Use modern image formats with fallbacks
• Implement lazy loading
• Audit third-party scripts

When to Get Professional Help

Some optimisations are straightforward. Others require development expertise:

DIY-friendly:

• Image compression
• Adding image dimensions
• Removing unused plugins
• Upgrading hosting

Usually needs a developer:

• JavaScript optimisation
• Render-blocking fixes
• Complex CLS issues
• Server-side optimisation

If you've done the basics and still fail Core Web Vitals, professional help is usually worth it.

Need help fixing your Core Web Vitals? Get in touch and we'll audit your site and tell you exactly what's slowing it down.