CSS import ed i tempi di caricamento

Conseguenze dei metodi di inclusione dei CSS in una pagina web, ed i soliti problemi con Internet Explorer.

I fogli di stile possono essere inclusi in una pagina web usando principalmente due metodi: link e @import. L’obiettivo di questo post è analizzare le conseguenze dell’utilizzo delle due tecniche.

Il risultato in sintesi? Non usare il CSS @import per migliorare la velocità delle pagine ed evitare problemi con Internet Explorer.

Nonostante infatti possano sembrare differenti solo semanticamente, in realtà usare link o @import cambia considerevolmente i tempi di caricamento di una pagina. La scoperta è stata pubblicata qualche tempo fa sul blog di Steve Souders, un dipendente Google che si occupa di web performance e open source.

Metodi di inclusione CSS

Link multipli

Il metodo più diffuso, che non crea problemi, è il seguente:

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />

Guardando i tempi di caricamento, è possibile notare come i CSS vengano letti in parallelo su tutti i browser:

La prima breve barra dall’alto corrisponde al documento HTML, le altre due sono i CSS che vengono caricati simultaneamente.

Link e @import

I problemi arrivano quando insieme ad un CSS incluso con link, viene usato @import:

<link rel="stylesheet" type="text/css" href="style1.css" />
<style type="text/css">
@import url("style2.css");
</style>

In questo caso, su Internet Explorer (tutte le versioni, IE8 compreso), il CSS incluso con @import viene caricato solo dopo aver completato il primo file. Questo allunga considerevolmente i tempi di caricamento della pagina:

Lo stesso succede quando il secondo foglio di stile viene importato all’interno del primo:

<link rel="stylesheet" type="text/css" href="style1.css" />

e all’interno di style1.css:

@import url("style2.css");

In questo caso però il caricamento in sequenza succede su tutti i browser.

CSS @import multipli

Gli esempi mostrati dovrebbero già bastare per preferire l’inclusione dei CSS utilizzando solo link, ma c’è un altro caso interessante: quello con @import multipli.

Su tutti i browser diversi da IE, questa tecnica non presenta problemi, e funziona in maniera analoga alla prima mostrata (link multipli). I guai arrivano proprio su Explorer, dove gli elementi vengono caricati in maniera del tutto casuale, senza rispettare l’ordine dichiarato.

Prendendo infatti un esempio con i seguenti file, tra cui un JavaScript:

<style type="text/css">
@import url("style1.css");
@import url("style2.css");
@import url("style3.css");
@import url("style4.css");
@import url("style5.css");
@import url("style6.css");
</style>
<script type="text/javascript" src="script.js"></script>

Il grafico risultante è questo, dove la seconda barra corrisponde al file .js:

Il file script.js viene caricato senza rispettare l’ordine dichiarato, e questo potrebbe portare a problemi di rendering della pagina. Il problema in questione si verifica su tutte le versione di Internet Explorer.

È bene che casi come quelli elencati siano noti, perché potrebbe essere veramente difficile indagare sui problemi di una pagina web dove gli elementi vengono caricati senza rispettare le precedenze.

In molti casi le pagine web hanno elementi più pesanti dei CSS (immagini, framework JavaScript), ma se volete ottimizzare il vostro sito tenete presente anche queste indicazioni. Non è un mistero che Google abbia iniziato a considerare anche la velocità di caricamento tra i parametri del suo algoritmo: anche la soluzione scelta per importare CSS è un fattore da valutare.