LE IMMAGINI AFFOSSANO IL TUO SITO: FORMATI, DIMENSIONI E CARICAMENTO DIFFERITO, SPIEGATI

Quando misuro un sito lento, le immagini rappresentano in genere dal 60 all'80 per cento del peso della pagina. Buona notizia: è anche la voce che si corregge più in fretta, spesso senza toccare il resto.

Il problema in un esempio

Una foto prodotto scattata con un dispositivo recente: 4 000 pixel di larghezza, 3,8 MB. Si visualizza in un'anteprima di 300 pixel su mobile. Il telefono scarica i 3,8 MB, li decodifica, poi ne butta via il 99 per cento. Moltiplica per le venti anteprime della pagina: 76 MB per una pagina che dovrebbe pesarne 2. Su un sito di negozio che ho ripreso, le griglie di immagini pesavano 56 MB; oggi pesano 2,2 MB, con una resa identica.

1. La dimensione giusta

Un'immagine va consegnata nella dimensione in cui viene visualizzata, al massimo il doppio per gli schermi ad alta densità. Il browser sa scegliere la versione giusta se gliene proponi diverse (attributo srcset): 480 pixel per un telefono, 960 per un tablet, 1600 per uno schermo grande. WordPress genera queste dimensioni automaticamente al caricamento; resta da vedere se il tema le usa, cosa non sempre vera.

2. Il formato giusto

JPEG resta valido per le foto, PNG serve solo alle immagini con trasparenza o agli screenshot. WebP pesa dal 25 al 35 per cento in meno di JPEG a parità di qualità e funziona ovunque dal 2020. AVIF va ancora oltre, dal 40 al 50 per cento, ma si genera più lentamente. Per un sito classico: WebP ovunque, AVIF sulle grandi immagini di testata se il tuo strumento lo permette. La qualità 80 è invisibile a occhio; oltre, paghi peso per niente.

3. Il caricamento differito

Una pagina prodotto con quaranta immagini ha bisogno solo delle prime quattro al caricamento. Le altre si caricano quando il visitatore scorre. È un attributo (loading="lazy") che WordPress aggiunge da solo dal 2020, tranne sulle immagini inserite da certi page builder o caroselli. Attenzione all'inverso: mai differire l'immagine di testata, quella che conta per il LCP.

4. L'immagine di testata

È quella che Google cronometra. Va servita per prima, nella dimensione giusta, in WebP, con l'attributo di precaricamento, e mai in caricamento differito. Su mobile si serve spesso una versione ritagliata in verticale invece della versione larga ridotta: metà dei pixel, e un'inquadratura che mostra ciò che conta.

5. Le dimensioni dichiarate

Un'immagine senza larghezza e altezza dichiarate fa saltare l'impaginazione al suo arrivo: il testo scende, il pulsante si sposta. È il segnale CLS di Google, e il comportamento più fastidioso per un visitatore che stava per cliccare. Due attributi da aggiungere, e niente si muove più.

6. I video

Un video di testata da 30 MB in loop rovina tutto il resto. Compresso correttamente, pesa da 3 a 5 MB in 1080p; su mobile basta una versione 480p, caricata in differita; al suo posto compare all'istante l'immagine del primo fotogramma. Un video YouTube incorporato carica un player da 500 KB anche se nessuno clicca: un'anteprima che carica il player solo al clic risolve il problema.

Come sapere a che punto sei

Il peso totale della pagina e il numero di immagini sono in l'audit gratuito, in trenta secondi. Oltre 3 MB per una home page c'è lavoro da fare; oltre 10, è la priorità assoluta. Rielaborare una libreria media di mille immagini si fa con uno script in una giornata, non a mano. È la prima azione del il servizio Sito troppo lento.

Domande frequenti