Ottimizzare LCP: immagini, font e tempo di risposta del server — Guida Operativa

Il tuo sito carica, ma il contenuto principale appare con lentezza. Il punteggio LCP (Largest Contentful Paint) è alto e Google ti penalizza nei risultati di ricerca. Più di 4 secondi e perdi oltre il 50% dei visitatori. Noi, di Meteora Web, lo vediamo ogni giorno: un'immagine hero non ottimizzata, un font caricato da Google Fonts senza fukui, un server che risponde in 1.5 secondi. Ecco come risolvere su tre fronti concreti: immagini, font e tempo di risposta del server.

Cos'è LCP e perché sono questi tre i colli di bottiglia

LCP misura il tempo impiegato dall'elemento più grande visibile nella viewport a rendersi. Di solito è un'immagine, un video poster, un blocco di testo o un'immagine di sfondo. I fattori che lo influenzano sono tre: il caricamento della risorsa (immagine o font), il tempo di risposta del server (TTFB) e il rendering bloccante di JavaScript/CSS. Concentriamoci sui primi due: immagini e font sono risorse pesanti, il server è il fondamento. Un ritardo su uno solo di questi triplica il LCP.

Immagini: il colpevole più frequente

Abbiamo preso in carico un e-commerce di abbigliamento con immagini da 3 MB ciascuna. LCP era 5.2 secondi. Dopo ottimizzazione, 1.8 secondi. Ecco come.

Comprimi e scegli il formato giusto

Usa WebP con fallback JPEG/PNG. Il risparmio medio è del 30-40% rispetto a JPEG. Se il tuo server supporta AVIF, ancora meglio: fino al 50% in meno. Converti in blocco con strumenti come `cwebp` o plugin WordPress (ShortPixel, Imagify).

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="600" loading="lazy">
</picture>

Precarica l'immagine LCP

Il browser deve scoprire l'immagine. Se è in CSS o in un tag <img> nascosto, scatta il preload scanner. Ma per sicurezza, dichiara una preload esplicita.

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero.webp 1x, /hero-2x.webp 2x" fetchpriority="high">

Attenzione: usa fetchpriority="high" solo sull'immagine LCP, non su tutte. Altrimenti vanifichi il beneficio.

Dimensioni esplicite e ratio

Specifica sempre width e height nell'<img> o nel CSS del background. Così il browser riserva lo spazio prima del download, evitando layout shift (CLS) e accelerando LCP.

Font: il colpevole invisibile

I font, specie quelli di Google Fonts, vengono scaricati dopo il CSS. Se il font è quello dell'hero text, blocca il rendering. Soluzione: self-host e font-display: swap.

Self-hosting dei font

Scarica i font da Google Fonts e caricali dal tuo server. Elimini la latenza di DNS e connessione aggiuntiva. Usa @font-face con font-display: swap per mostrare testo con fallback mentre il font carica.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  font-weight: 1 999;
}

Precarica i font critici

Aggiungi un preload per i font del testo LCP.

<link rel="preload" as="font" href="/fonts/inter-var.woff2" type="font/woff2" crossorigin>

Subsetting e variabili

Usa solo i caratteri necessari (subset). Se usi font variabili, carichi un solo file invece di dozzine di pesi. Riduci drasticamente il peso: da 200 KB a 20 KB.

Tempo di risposta del server (TTFB)

LCP inizia solo dopo che il server risponde. Un TTFB alto (oltre 500 ms) è un macigno. Noi lavoriamo con hosting su VPS con caching e CDN.

Hosting e configurazione

Passa a un VPS o hosting ottimizzato per WordPress (Kinsta, WP Engine o un VPS con Litespeed + Redis). Configura caching lato server (FastCGI, Redis) e CDN (Cloudflare, BunnyCDN).

Caching delle pagine

Per WordPress, usa WP Rocket, Litespeed Cache o Flying Press. Attiva caching delle pagine e minify HTML/CSS/JS.

Edge Workers per risposte immediate

Con Cloudflare Workers puoi servire una pagina statica dal bordo senza contattare il server. Per siti dinamici, valuta SSG (static site generation) o un layer di cache edge.

# Regole di cache per server Nginx
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
}

Misurare e monitorare

Usa Lighthouse (Chrome DevTools) per un'analisi locale, PageSpeed Insights per la diagnostica di campo e CrUX per dati reali. Noi inseriamo sempre un monitoraggio con RUM (Real User Monitoring) via GA4 o tool dedicati come SpeedVitals.

In sintesi — cosa fare adesso

1. Identifica l'elemento LCP: usa Lighthouse o l'element picker in DevTools. È quasi sempre un'immagine o un testo lead.
2. Ottimizza l'immagine: riduci il peso del 60% con WebP/AVIF, dimensioni esatte, preload con fetchpriority="high".
3. Self-hosta i font con font-display: swap e preload. Taglia i subset.
4. Riduci il TTFB: attiva caching lato server, usa un CDN, verifica DNS e database.
5. Testa con PageSpeed Insights prima e dopo. Obiettivo: LCP sotto 2.5 secondi.

Noi, di Meteora Web, lo facciamo da otto anni. Se il tuo sito non passa il test, partiamo da lì.