Assicurare la massima performance del Responsive Web Design (RWD): qualche consiglio da Akamai

Da Milano – Una delle tematiche più calde nel mondo del web design è quella del Responsive Web Design (RWD): attualmente, realizzare siti web significa infatti dover fare i conti con un panorama sempre più frammentato di browser e dispositivi, dove la parola d’ordine è una sola, fruibilità.
Tuttavia, proprio perché caratterizzate da un design per così dire dinamico, le pagine web responsive risultano essere più complesse delle tradizionali pagine web mobile e, spesso, più lente a caricarsi. Come gli utenti ben sanno, non c’è nulla di più frustrante di un sito lento: non per niente i tempi di caricamento possono fare la differenza nel determinare il successo di un business online.
Guy Podjarny, CTO Web Experience, Akamai Technologies, ci svela qualche trucco per ottenere la migliore performance dal RWD:

Evitare di scaricare immagini nascoste, utilizzando una tecnica di upload basata su JavaScript o CSS. I siti responsive adottano una serie di regole per nascondere le immagini. Tuttavia, ciò non impedisce al browser di scaricarle comunque (e inutilmente, dato che l’utente non le vedrà): sebbene i siti pensati per schermi di dimensioni ridotte contengano poche immagini, essi potrebbero essere ugualmente pesanti proprio a causa delle immagini nascoste.
Utilizzare la tecnica “Responsive Image” per scaricare immagini ridimensionate in base allo schermo. I siti responsive solitamente riproducono la stessa immagine su tutti gli schermi, ma utilizzano un percentile per far sì che essa si adatti alla dimensione del display. Questa tecnica, nota come ‘immagine fluida’, dà ottimi risultati da un punto di vista visivo ma genera un eccesso di dati scaricati. Una soluzione migliore consiste nel creare più versioni di una stessa immagine, opportunamente ridimensionate sul server, e scaricare quella più prossima alle capacità del display, utilizzando un loader intelligente di immagini (come quello discusso a punto precedente). Se l’immagine viene ridimensionata sul server, il carico inviato allo schermo sarà minore e, di conseguenza, la pagina risulterà più veloce.
Caricare JavaScript solo quando necessario. Spesso, i siti responsive includono componenti JavaScript che non vengono utilizzate sugli schermi di dimensioni più ridotte (es. twitter stream, mappe, agenti di live chat etc.). Nascondere l’output di queste immagini non impedisce però al browser di scaricarle ed eseguire lo script. Pur non essendo troppo pesanti, gli script hanno però un impatto byte-for-byte sul tempo di caricamento delle pagine e possono rendere le pagine più vulnerabili. Per questo è consigliabile raggrupparli in un unico script inline, che aggiunga gli script alla pagina solo se necessario, evitando così l’insorgere di rallentamenti e altre problematiche.
Utilizzare RESS – Responsive + Server Side – per ottimizzare il sito per alcuni client. Sebbene il responsive design sia un ottimo strumento per garantire la fruibilità di un sito su ogni dispositivo, molte volte esso genera download eccessivi. Come abbiamo visto, lo smart loading può risolvere parte del problema, ma nel caso di HTML e CSS eccessivi, questo escamotage potrebbe non essere sufficientemente efficace. In questi casi, l’unica via percorribile è l’introduzione di un componente lato server che identifichi i client conosciuti, adeguandovi l’HTML di conseguenza.
Introdurre il test di performance nel processo di garanzia di qualità. E’ uno step fondamentale se il vostro obiettivo è quello di migliorare le prestazioni del vostro sito: tool come WebPageTest possono tornare molto utili. Un semplice punto di partenza consiste nel misurare la performance di una determinata pagina 20-30 volte al giorno, segnare il tempo di caricamento medio e individuare le variazioni rispetto ad esso, in modo da tenerne sotto controllo la performance ed evitarne il peggioramento nel tempo.