Parlavo giorni fa dell'importanza di ottimizzare le immagini per il web, sia per l'esperienza utente sia per la SEO (crawler dei motori di ricerca Google, Bing, ecc e di conseguenza il posizionamento, la "crescita" del sito web in generale).
Per quanto riguarda le dimensioni dell'mmagine, occorre fare attenzione al formato (jpg, png), la risoluzione (1080 è più che sufficiente, parliamo di immagini per scopo "estetico" nella pagina, salvo che uno non voglia fare il download di una wallpaper in 4k, allora lo si reindirizza su quello solo se interessato). Ricordiamo che 200-300 KB circa è la dimensione massima consigliata per un'immagine ad esempio presente nella Homepage.
Caso di studio: un sito web lentissimo a caricare (livello "disastroso"), dopo 30 secondi il caricamento della pagina non è ancora completo al 100%, giusto per capire, il valore LCP si intende critico oltre i 2.5 secondi. Aveva anche problemi di indicizzazione: ovviamente, le risorse per il crawler (bot di Google che passa a verificare le varie pagine web) non devono essere sprecate per siti web poco ottimizzati. Risultati:
- homepage di circa 20 MB, tempi di caricamento biblici
- tre immagini dell'ordine di 9-10 MB (come già detto, 200-300 KB è il massimo consigliato!!)
- richieste al server: 522 (numero assurdo!!) e attivi non so quanti plugin inutilizzati
Con un semplice ritocco delle immagini, queste pasano da 9,5 MB a circa 1 MB per il solo cambio formato, poi perde ancora il 50% del peso grazie ad imagecompressor, senza perdita visiva di qualità; la risoluzione era comunque troppo grande, esagerata, 3840x2160 quando un 1080 sarebbe più che sufficiente! Quindi volendo, ancora margine di miglioramento. La dimensione della pagina e quindi il caricamento, ne traggono imemdiato beneficio, grazie ad un intervento piccolo. Lavorando poi su plugin, richieste JavaScript/CSS ed eventuale accorpamento, codice asincrono ecc, si ottimizzano le altre parti. L'aspetto fondamentale comunque resta l'ottimizzazione delle immagini e questo caso di studio ne è proprio l'esempio!
Approfondimenti:
Core Web Vitals
Problema indicizzazione pagine
Kingsta - ottimizzare immagini per il web
