Come velocizzare il tuo sito web. Terza puntata, CSS e Javascript
Continua la nostra rubrica dedicata alla velocità dei siti web, la prima e la seconda puntata forniscono le informazioni preliminari per poter modificare il codice delle proprie pagine, insieme a elementi del webserver, e avere un notevole vantaggio nelle prestazioni e nell'indicizzazione del proprio sito web.
Inserire i CSS in alto
Mentre facevamo ricerca su performance in Yahoo!, abbiamo scoperto che spostare le stylesheet in testa ai documenti permette a queste di essere caricate più rapidamente. Questo perché posizionare le stylesheet in testa permette alla pagina di essere renderizzata progressivamente.
Gli ingegneri dei front-end che si occupano di performance vogliono che le pagine siano caricate progressivamente; vogliamo che il browser mostri qualsiasi contenuto il prima possibile. Questo è particolarmente importante per pagine con molti contenuti e per utenti con connessioni lente. L'importanza di dare all'utente dei feedback visuali, come indicatori d'avanzamento, è stata molto ben ricercata e documentata. Nel nostro caso la pagina HTML è allo stesso tempo l'indicatore di avanzamento! Quando il browser carica la pagina progressivamente l'header, la barra di navigazione, il logo in alto, etc servono tutti come feedback visuale per l'utente che aspetta il caricamento della pagina. Questo migliora l'esperienza complessiva dell'utente.
Il problema con l'inserire i CSS vicino alla fine del documento è che questo proibisce la lettura progressiva in molti browser, incluso Internet Explorer. Questi browser bloccano il rendering per evitare di ridisegnare elementi della pagine se le stylesheet cambiano. L'utente è così rimane bloccato con una pagina bianca.
Lo standard HTML dice chiaramente che le stylesheet devono essere incluse in alto nella pagina: “Diversamente dai link A, dovrebbero apparire soltanto nella sezione HEAD del documento, altrimenti potrebbe essere inclusi qualsiasi numero di volte” Neanche le alternative, schermo in bianco e nero o contenuti privi di stile, possono evitare il rischio. La soluzione ottimale è seguire la specifica HTML e caricare le stylesheet nella sezione HEAD.
