Performance

How to Improve Core Web Vitals: LCP and CLS Fixes with HTML, CSS and Nginx

Published October 27, 2026 · 6 min read

On this page

Prerequisites
Step-by-Step Guide
Conclusion

Core Web Vitals measure real user experience: how fast the main content appears (LCP), how stable the layout is (CLS) and how quickly the page responds (INP). This guide applies low-risk fixes you can ship today.

Prerequisites

Access to your site's HTML, CSS and web server configuration
Chrome with DevTools, or Node.js 18+ for the Lighthouse command line

Step-by-Step Guide

Step 1: Measure a baseline

npx lighthouse https://your-site.example --only-categories=performance --output=html --output-path=./before.html

Replace the address with your own site. Targets: LCP of 2.5 s or less, CLS of 0.1 or less, INP of 200 ms or less.

Step 2: Prioritize the hero image

<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">
<img src="/img/hero.webp" alt="Product overview" width="1200" height="630" fetchpriority="high">

Step 3: Lazy-load everything below the fold

<img src="/img/photo.webp" alt="Team at work" width="800" height="533" loading="lazy" decoding="async">

Never lazy-load the hero image; it would delay LCP.

Step 4: Prevent layout shift

Always set width and height on media and reserve space for embeds and ads.

.embed { aspect-ratio: 16 / 9; width: 100%; }
@font-face {
  font-family: "Body";
  src: url("/fonts/body.woff2") format("woff2");
  font-display: swap;
}

Step 5: Defer non-critical JavaScript

<script src="/js/app.js" defer></script>

Step 6: Compress and cache on Nginx

gzip on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript image/svg+xml;

location ~* \.(css|js|webp|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

sudo nginx -t
sudo systemctl reload nginx

Use long caching only for files with versioned names such as app.3f2a1.js.

Step 7: Re-test

npx lighthouse https://your-site.example --only-categories=performance --output=html --output-path=./after.html

Conclusion

Prioritized hero media, reserved space, deferred scripts and compression address the most common causes of slow pages. Retest after each release and watch real-user data in Google Search Console.