WebP, AVIF o JPEG: quale formato usare?

AVIF comprime meglio (foto fino al 50% più leggere di JPEG), WebP è un compromesso eccellente con supporto universale ormai. JPEG resta come fallback. La best practice è servire AVIF se il browser lo supporta, WebP altrimenti, JPEG come ultima risorsa. I plugin di ottimizzazione moderni (ShortPixel, Imagify) gestiscono la negoziazione automatica via header Accept. Per icone piatte e loghi resta SVG, che è vettoriale e leggerissimo.

Quanto pesano le immagini accettabili in WordPress?

Una hero image full-width dovrebbe pesare 100-200 KB in WebP/AVIF, mai oltre 500 KB. Foto prodotto e thumbnail 30-80 KB. La pagina totale dovrebbe stare sotto 1,5 MB su mobile. Carichi originali da 3-5 MB e li lasci processare al plugin: ottimizzazione lossy con qualità 75-85% è impercettibile per l'occhio e dimezza il peso.

Plugin di compressione locale o cloud: cosa cambia?

Compressione locale (EWWW Image Optimizer ad esempio) processa sul server WordPress: gratis ma usa CPU del tuo hosting. Cloud (ShortPixel, Imagify, Smush con piano Pro) processa sui loro server: più potente, qualità migliore, conta crediti mensili (canone annuo nell'ordine di alcune decine di euro per volumi PMI). Per shop con molte immagini e hosting modesto, cloud vince. Per blog piccoli, locale basta.

Il lazy loading nativo del browser è sufficiente?

Per la maggior parte dei casi sì. WordPress da 5.5 aggiunge automaticamente loading='lazy' alle immagini sotto la prima vista. Va integrato per video, iframe (YouTube embed) e background CSS, dove plugin specializzati (a3 Lazy Load, Smush) o le opzioni dei plugin di cache estendono il comportamento. Importante: NON applicare lazy loading alla hero image della prima vista, altrimenti peggiori LCP.

Core Web Vitals e ottimizzazione immagini avanzata in WordPress

I Core Web Vitals sono diventati metrica standard per misurare l'esperienza utente di un sito web. Google li usa nel ranking e gli utenti li percepiscono direttamente: una pagina lenta o che "salta" è una pagina che si abbandona. Per WordPress, dove il 60-80% del peso pagina è di solito immagini, l'ottimizzazione visuale è la leva più impattante.

In questa guida vediamo come misurare i Core Web Vitals e come ottimizzare immagini in modo serio: formati moderni, lazy loading, preload, plugin di compressione.

Le tre metriche

LCP — Largest Contentful Paint

Quanto tempo serve per mostrare l'elemento più grande visibile (di solito hero image o titolo). Target: < 2,5 s.

Cosa lo rallenta:

Hero image pesante o non ottimizzata
Hosting lento (TTFB alto)
CSS render-blocking
Web font che ritardano il rendering

CLS — Cumulative Layout Shift

Quanto la pagina "salta" durante il caricamento (immagini senza dimensioni, banner che spuntano, font che cambiano forma). Target: < 0,1.

Cosa lo causa:

Immagini senza attributi width e height
Pubblicità che si carica e sposta i contenuti
Web font che cambiano dimensione testo
Iframe (YouTube, mappe) senza dimensioni fisse

INP — Interaction to Next Paint

Tempo tra un click/tap e l'aggiornamento dello schermo. Ha sostituito FID nel 2024. Target: < 200 ms.

Cosa lo rallenta:

JavaScript pesante che blocca il main thread
Plugin con script lenti (slider, popup, chat)
Tag manager con troppi script in cascata

Misurare i Core Web Vitals

Tre strumenti complementari:

PageSpeed Insights (pagespeed.web.dev): per pagina singola, dati real-user (CrUX) e lab.
Google Search Console (sezione "Esperienza" → "Core Web Vitals"): aggregato su tutto il sito, tendenze nel tempo.
Chrome DevTools Lighthouse: simulazione locale, utile per debug specifici.

PageSpeed mostra anche suggerimenti specifici (riduci dimensione immagini, elimina render-blocking, riduci il CSS non utilizzato). Affrontali in ordine di impatto stimato.

Ottimizzazione immagini: il flusso ideale

1. Carica originali ben dimensionati

Mai caricare un JPG da 4000px se la massima visualizzazione è 1600px. Ridimensiona prima del caricamento, o lascia che WordPress generi srcset automatico (lo fa di default per le dimensioni registrate dal tema).

2. Plugin di compressione + WebP/AVIF

I quattro più usati:

ShortPixel: cloud, quote mensile gratuita poi a credito. Qualità eccellente.
Imagify: cloud, da WP Rocket team. Tre livelli (normal, aggressive, ultra).
Smush: cloud + locale. Versione gratuita ok, Pro per ottimizzazione massima.
EWWW Image Optimizer: locale (gratis) o cloud (a pagamento). Storico.

Configurazione tipica:

Compressione lossy (qualità 75-85%): impercettibile, dimezza il peso
Generazione automatica WebP per ogni JPG/PNG (servito via <picture> o htaccess)
Eventuale generazione AVIF (più recente, supportato dai plugin Pro)
Bulk optimize iniziale per le immagini esistenti

3. Lazy loading

WordPress 5.5+ aggiunge loading="lazy" alle immagini automaticamente. I plugin di cache estendono a iframe e video.

Importante: la hero image della prima vista NON deve essere lazy-loaded. Aggiungi loading="eager" o (meglio) <link rel="preload"> per accelerare il LCP.

4. Preload del LCP

Nel <head>:

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

Dice al browser di scaricare l'immagine LCP in priorità. Plugin come Perfmatters automatizzano. WP Rocket include funzione "Preload critical images".

5. Dimensioni esplicite

Ogni <img> deve avere width e height. WordPress lo fa automaticamente per immagini caricate via libreria, ma controlla per immagini inserite via HTML diretto o page builder. Senza dimensioni, CLS peggiora.

CSS, JS e font: l'altra metà del lavoro

Le immagini non bastano se altre risorse rallentano.

Eliminare render-blocking CSS

CSS critico inline nell'<head>, il resto caricato in modo asincrono. WP Rocket, LiteSpeed, Perfmatters automatizzano (modalità "Optimize CSS Delivery").

Defer JavaScript

Tutti i <script> non critici devono avere attributo defer o async. Gestito da plugin di cache.

Web font

Serve in formato woff2. Aggiungi:

<link rel="preload" href="font.woff2" as="font" crossorigin>

Usa font-display: swap per evitare che il testo resti invisibile durante caricamento.

Plugin di terze parti

Chat (Tawk.to, Intercom), tag manager pesanti, slider con animazioni complesse: ogni script aggiunto pesa su INP. Audita periodicamente: ogni plugin attivo serve davvero?

Hosting e CDN

L'hosting determina il TTFB (Time To First Byte). Sotto 600 ms è target. Hosting condivisi a basso costo difficilmente lo raggiungono. Hosting WordPress dedicati (SiteGround, Kinsta, WP Engine, Cloudways) hanno TTFB sotto 200 ms.

CDN (Cloudflare, BunnyCDN, KeyCDN) servono asset statici dal server più vicino. Cloudflare ha piano gratuito che basta per la maggior parte dei progetti.

Errori comuni

Hero image con lazy loading: LCP peggiora di 1-2 secondi.
Immagini sovradimensionate (4000px mostrate a 800px): srcset le seleziona, ma originali pesano sul server.
Compressione troppo aggressiva (qualità 50%): immagini sgranate, esperienza peggiore della performance migliorata.
Doppia compressione: 2 plugin attivi insieme corrompono immagini. Solo uno alla volta.
WebP non servito ai browser che lo supportano: verifica con DevTools → Network che le richieste tornino con type image/webp.
Iframe YouTube non lazy: aggiungono 300-500 KB di JS al primo caricamento. Plugin "WP YouTube Lyte" o lazy iframe risolvono.
CSS critico generato a inizio progetto e mai aggiornato: dopo cambi al tema, il critical CSS è obsoleto e può rompere il rendering.

Roadmap pratica per migliorare

Misura baseline con PageSpeed Insights (mobile + desktop)
Installa plugin di compressione, esegui bulk optimize iniziale, attiva WebP
Verifica che la hero image abbia width, height e (idealmente) preload
Attiva plugin di cache con CSS optimization e JS defer
Pulisci plugin inutili (riduci INP)
Considera CDN se utenti distribuiti
Misura di nuovo, confronta, itera

In sintesi

I Core Web Vitals si migliorano con un set di interventi coerenti, non con una sola magic bullet. Le immagini sono di solito la leva con maggior impatto: WebP/AVIF + dimensioni corrette + lazy loading selettivo + preload del LCP portano già miglioramenti misurabili.

Quando ottimizziamo un sito esistente, partiamo dal report PageSpeed e affrontiamo i suggerimenti in ordine di impatto. La prima fase (immagini + cache) di solito porta da "Scarso" a "Buono" sui Core Web Vitals nel 70% dei casi. Il resto è lavoro di affinamento su CSS, JS e font.

Domande frequenti

Sono le tre metriche dei Core Web Vitals di Google. LCP (Largest Contentful Paint) misura quanto ci mette il contenuto principale a comparire (target sotto 2,5 s). CLS (Cumulative Layout Shift) misura quanto la pagina 'salta' durante il caricamento (target sotto 0,1). INP (Interaction to Next Paint) ha sostituito FID nel 2024 e misura la reattività ai click (target sotto 200 ms). Sono parte del ranking Google e influenzano direttamente il posizionamento.