Fix LCP in Nginx — Largest Contentful Paint Optimization

LCP measures when the largest visible element loads. For most sites it is a hero image or heading. Nginx can dramatically improve LCP with preload headers, HTTP/2, compression, and resource hints — no code changes required.

1. Preload the LCP resource

server {
    listen 443 ssl http2;
    server_name example.com;

    location / {
        # Preload hint — browser fetches before parsing HTML
        add_header Link "</images/hero.webp>; rel=preload; as=image" always;
        try_files $uri $uri/ /index.html;
    }
}

Also add in HTML for browsers that don't support Link headers:

<link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">
<img src="/images/hero.webp" fetchpriority="high" alt="Hero image">

2. Enable HTTP/2

server {
    # http2 keyword required for multiplexing
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
}

3. Enable brotli compression

# Install: apt install nginx-module-brotli
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    brotli on;
    brotli_comp_level 6;
    brotli_types text/html text/css application/javascript application/json image/svg+xml;

    # Gzip fallback
    gzip on;
    gzip_vary on;
    gzip_types text/html text/css application/javascript application/json;
}

4. Serve WebP images

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

5. Cache static assets aggressively

location ~* \.(jpg|jpeg|png|webp|gif|svg|ico|woff2)$ {
    add_header Cache-Control "public, max-age=31536000, immutable" always;
    etag off;
    expires 1y;
}

6. Early Hints (103)

# Nginx 1.25.1+ supports Early Hints
server {
    http2_push_preload on;

    location / {
        add_header Link "</styles.css>; rel=preload; as=style" always;
        add_header Link "</images/hero.webp>; rel=preload; as=image" always;
    }
}

Verify LCP improvement

# Check your LCP score before and after
# Run PageSpeed Insights: https://pagespeed.web.dev/

# Or use SpeedFixer to get the exact config for your stack
# https://httpfixer.dev/speedfixer/