SEO Intermediate

Page Speed and Core Web Vitals

1 months ago

108 views 45 min read

Table of Contents

Introduction

Page speed is a confirmed ranking factor, and Core Web Vitals are Google's metrics for measuring user experience. This lesson covers how to measure, understand, and improve these critical performance metrics.

Understanding Core Web Vitals

Core Web Vitals are three specific metrics that Google uses to evaluate page experience:

The Three Core Web Vitals

LCP (Largest Contentful Paint): Loading performance - how fast the main content loads. Target: under 2.5 seconds.
INP (Interaction to Next Paint): Interactivity - how fast the page responds to user input. Target: under 200 milliseconds.
CLS (Cumulative Layout Shift): Visual stability - how much the page layout shifts during loading. Target: under 0.1.

Measuring Performance

Use these tools to measure and monitor Core Web Vitals:

Lab Data Tools (Simulated)

Google PageSpeed Insights: Quick analysis with recommendations
Lighthouse: Detailed audits in Chrome DevTools
WebPageTest: Advanced testing with filmstrip view

Field Data Tools (Real Users)

Chrome UX Report (CrUX): Real-world data from Chrome users
Search Console: Core Web Vitals report for your site
web-vitals library: Measure CWV on your own site

Optimizing Largest Contentful Paint (LCP)

LCP measures how quickly the largest visible element loads:

Common LCP Elements

Hero images
Large text blocks
Video poster images
Background images with CSS

LCP Optimization Techniques

Optimize server response time: Use caching, CDN, fast hosting
Preload critical resources: <link rel="preload"> for hero images
Compress images: Use WebP format, proper sizing
Remove render-blocking resources: Defer non-critical CSS/JS
Use efficient caching: Set proper cache headers

Preloading LCP Image

<head>
    <link rel="preload" as="image" href="/hero-image.webp"
          fetchpriority="high">
</head>

Optimizing Interaction to Next Paint (INP)

INP measures responsiveness to user interactions:

INP Optimization Techniques

Break up long tasks: Split JavaScript into smaller chunks
Optimize event handlers: Keep them fast and efficient
Use web workers: Offload heavy computation
Reduce JavaScript: Remove unused code
Debounce rapid events: Limit scroll/resize handlers

Breaking Up Long Tasks

// Bad: Long blocking task
function processData(items) {
    items.forEach(item => heavyOperation(item));
}

// Good: Yielding to main thread
async function processData(items) {
    for (const item of items) {
        heavyOperation(item);
        // Yield to allow browser to handle interactions
        await new Promise(r => setTimeout(r, 0));
    }
}

Optimizing Cumulative Layout Shift (CLS)

CLS measures unexpected layout movements:

Common Causes of Layout Shift

Images without dimensions
Ads, embeds, and iframes without reserved space
Dynamically injected content
Web fonts causing FOIT/FOUT
Actions waiting for network response

CLS Optimization Techniques

Set image dimensions: Always include width and height attributes
Reserve space for ads: Use min-height for ad containers
Avoid inserting content above existing content
Use font-display: swap: With preloaded fonts
Use CSS aspect-ratio: For responsive containers

Preventing Image Layout Shift

<!-- Always specify dimensions -->
<img src="photo.jpg" width="800" height="600" alt="...">

<!-- Or use aspect-ratio in CSS -->
<style>
.image-container {
    aspect-ratio: 16 / 9;
    width: 100%;
}
</style>

Additional Speed Optimizations

Server-Side Optimizations

Enable GZIP/Brotli compression
Use a Content Delivery Network (CDN)
Implement browser caching
Optimize database queries

Front-End Optimizations

Minify CSS, JavaScript, and HTML
Remove unused CSS and JavaScript
Lazy load below-the-fold images
Use modern image formats (WebP, AVIF)

Practical Exercise

Hands-On Task: Optimize Core Web Vitals

Run PageSpeed Insights on your homepage
Note your current LCP, INP, and CLS scores
Identify the LCP element and optimize its loading
Find and fix any elements causing layout shift
Re-test and document improvements

Summary

Core Web Vitals (LCP, INP, CLS) are key ranking factors
Use both lab and field data to measure performance
Preload critical resources to improve LCP
Break up long JavaScript tasks to improve INP
Reserve space for dynamic content to prevent CLS