Consigli per ridurre il peso delle pagine Web

Ottimizzare la velocità di caricamento di un sito Web è il metodo più rapido per incrementare visite e la permanenza dell'utente. Nel 2013 il peso di ogni singola pagina web è cresciuto del 37%, con un totale di 1.7 MB e 96 richieste HTTP per accesso, un fatto che tende a scoraggiare l'utente soprattutto in un periodo di affermazione della navigazione mobile. Non solo più pesante è una pagina maggiori sono i tempi d'attesa - bastano 2 secondi perché l'utente si irriti e passi altrove - ma ad aumentare è anche il consumo di banda mensile, sempre limitata nei contratti telefonici. Come migliorare la propria performance, andando quindi incontro alle esigenze del navigatore?

Sono molti gli interventi che un responsabile della programmazione può eseguire per la riduzione del peso di una pagina Web. Alcuni sono basilari quanto la scelta del giusto formato per le fotografie, altri sono invece più complessi e richiedono specifiche competenze sulle codifiche più diffuse. Eccone alcuni.

• Compressione GZIP: stando ad alcune recenti rilevazioni W3Techs, più della metà dei siti non ha attiva alcuna compressione. Normalmente è prevista di default sulle configurazione del proprio web server, ma può essere impostata anche manualmente;
• Caching del browser: si facilitino le operazioni di caching del browser indicando nel codice come il software debba comportarsi per il salvataggio in locale, ovvero specificando i comandi "expires header", "last modified" e tutti gli ETags per l'header HTTP;
• Usare una CDN: le richieste HTTP del browser sono in genere limitate a 4 o 16 connessioni simultanee allo stesso server, questo diventa un collo di bottiglia per rapidità e download. Suddividendo i propri file su server multipli - appunto ricorrendo a un CDN - si moltiplicano enormemente le contemporaneità di scaricamento;
• Rimuovere elementi non più in uso: il web si evolve e spesso widget o plugin diventano obsoleti. Spesso si rimuove il singolo elemento dalla pagina, ma non il suo asset, che continua a essere caricato in fase di download;
• Concatenare CSS e Javascript: l'ideale per la massima rapidità della pagina è ricorrere a un foglio di stile unico, così come a un unico script onnicomprensivo per JavaScript. Qualora si disponesse di file multipli, li si concateni con dei comodi strumenti online come CSS Compress & Minify o JavascriptCompressorRater;
• Usare il corretto formato immagini: si eliminino i formati obsoleti come BMP, TIFF o GIF se non quando strettamente necessari, ad esempio per una scansione di elevatissima qualità. Per le fotografie si prediliga JPG, quando risultano necessarie le trasparenze si opti per PNG. Attenzione anche alle informazioni meta che molti software aggiungono alle immagini - credits di testo, exif e quant'altro - perché aumentano il peso totale del file;
• Ridimensionare le immagini: si eviti di ridimensionare le immagini tramite comando HTML, ovvero definendo altezza e larghezza, perché il file verrà comunque caricato alla massima risoluzione e poi ridotto solo a livello visivo. L'ottimizzazione deve essere fatta scalando la fotografia stessa alla risoluzione desiderata con un software di photoediting: si può ridurre il peso fino al 75% dell'originale;
• Rimuovere font non necessari: si passi al setaccio il proprio foglio di stile, soprattutto se si facesse ampio ricorso ai web-font. È inutile costringere il client a precaricare dei font - anche di diverse centinaia di KB di peso - se poi non vengono inclusi nelle proprie pagine.

Fonte: Sitepoint