Updated April 2026

Core Web Vitals for Sysadmins — Server-Side Fixes for LCP, CLS, INP

Quick Answer

Server-side fixes for Core Web Vitals: enable HTTP/2 and brotli compression (helps LCP), set proper Cache-Control on all assets (helps LCP and CLS), add preload headers for critical resources (helps LCP), and set font-display: swap in CSS (helps CLS). INP is mostly client-side.

Core Web Vitals measure real user experience. Most guides focus on JavaScript changes. This guide covers what sysadmins and DevOps engineers can fix at the server and CDN layer.

Get your full PageSpeed audit fix → SpeedFixer

The three metrics — what you can control server-side

Metric	What it measures	Server-side impact
LCP	Largest Contentful Paint — load speed	High — compression, caching, preload headers
CLS	Cumulative Layout Shift — visual stability	Medium — cache headers prevent resource flicker
INP	Interaction to Next Paint — responsiveness	Low — mostly JavaScript execution time

LCP fixes — server side

# Nginx — enable HTTP/2 + compression + preload
server {
    listen 443 ssl http2;

    # Brotli compression
    brotli on;
    brotli_comp_level 6;
    brotli_types text/html text/css application/javascript;

    # Gzip fallback
    gzip on;
    gzip_vary on;

    location / {
        # Preload LCP resource
        add_header Link "</images/hero.webp>; rel=preload; as=image" always;
    }

    # Cache static assets
    location ~* \.(js|css|woff2|webp|jpg|png)$ {
        add_header Cache-Control "public, max-age=31536000, immutable" always;
        expires 1y;
    }
}

LCP fixes — Cloudflare

# 1. Enable Brotli: Dashboard → Speed → Optimization → Brotli: ON
# 2. Enable HTTP/2: Dashboard → Network → HTTP/2: ON
# 3. Enable HTTP/3 (QUIC): Dashboard → Network → HTTP/3: ON
# 4. Polish (image optimization): Dashboard → Speed → Optimization → Polish: Lossless
# 5. Early Hints: Dashboard → Speed → Optimization → Early Hints: ON

CLS fixes — server side

CLS is mainly caused by images without dimensions, late-loading fonts, and ads. Server config can help by ensuring resources load fast and consistently.

# Serve fonts with immutable cache — prevents layout shift on repeat visits
location ~* \.(woff2|woff|ttf|eot)$ {
    add_header Cache-Control "public, max-age=31536000, immutable" always;
    add_header Access-Control-Allow-Origin "*" always;
}

INP fixes — server side (limited)

INP is almost entirely JavaScript execution. Server config can only reduce resource load time, not execution time. The one server-side lever: offload third-party scripts.

# Partytown — offload GA4, Meta Pixel to Web Worker
# Reduces main thread blocking from analytics scripts
# Implement in your HTML build, not Nginx config

Measure before and after

# Field data — real users (takes weeks to update)
# https://search.google.com/search-console/ → Core Web Vitals

# Lab data — instant
# https://pagespeed.web.dev/
# https://httpfixer.dev/speedfixer/ → stack-specific fix blocks

Get your PageSpeed fix per stack → SpeedFixer