Non usare @import

L’ utilizzo della regola @import per caricare file CSS aggiuntivi e’ una cattiva pratica che ha influenze negative sulle prestazioni del nostro sito web. Cio’ che dimostrermo e’ che invece di usare @import e’ meglio usare LINK.

LINK contro @import

Ci sono due modi per includere un foglio di stile in una pagina web. Possiamo usare il tag LINK

<link rel='stylesheet' href='a.css' >

o la regola @import:

<style>
@import url(' a.css' );
</style>

E’ preferibile usare LINK per semplicita’ – non dobbiamo ricordarci di piazzare @import all’ inizio del blocco degli stili, poiche’ altrimenti non funzionerebbe -ma evitare la regola @import ha un impatto anche sulla performance della pagina.

@import @import

Vediamo i vari modi in cui LINK e @import possono essere usati. Nei seguenti esempi avremo due fogli di stile: a.css e b.css. Ogni foglio di stile e’ configurato per essere scaricato in due secondi, per notare meglio le differenze nelle prestazioni.

Il primo esempio usa la regola @import per inserire i due file CSS. In questo, chiamato @import @import, il documento HTML contiene il seguente codice:

<style>
@import url(' a.css' );
@import url(' b.css' );
</style>

Se usiamo sempre @import in questa maniera, non troviamo problemi di prestazioni, come possiamo vedere qui sotto. I due fogli di stile vengono scaricati in parallelo (Figura 1). La piccola barra precedente si riferisce alla richiesta del file HTML.

Il problema sorge quando @import viene incluso all’ interno di un altro foglio di stile o usato in contemporanea a LINK.

LINK @import

L’ esempio LINK @import usa LINK per a.css e @import per b.css:

<link rel='stylesheet' type='text/css' href='a.css' >
<style>
@import url(' b.css' );
</style>

In Internet Explorer (testato sulle versioni 6, 7 e 8), questo causa lo scaricamento seriale dei fogli di stile come mostrato in Figura 2. Scaricare risorse in parallelo e’ la chiave per ottenere prestazioni maggiori. Come vediamo qui, questo comportamento in IE richiede un tempo di download maggiore:

LINK con @import

Nell’ esempio LINK con @import, a.css viene scaricato usando LINK e b.css usando @import all’ interno di a.css:
nel documento HTML:

<link rel='stylesheet' type='text/css' href='a.css' >

a.css:

@import url(' b.css' );

Anche questa combinazione non permette il download in parallelo, ma stavolta in nessun browser, non solo in IE. Se ci fermiamo a riflettere, non e’ una grossa sorpresa: il browser deve scaricare il primo file ed esaminarlo. A questo punto il browser vede la regola @import e inizia a scaricare il secondo file CSS.

LINK blocca @import

Una leggera variante dell’ esempio precedente con risultati sorprendenti in IE: LINK viene usato per a.css e per una file aggiuntivo chiamato proxy.css. proxy.css e’ configurato per contenere la regola @import per caricare b.css.
Nel documento HTML:

<link rel='stylesheet' type='text/css' href='a.css' >
<link rel='stylesheet' type='text/css' href='proxy.css' >

in proxy.css:

@import url(' b.css' );

Il risultato in IE, LINK blocca @import, e’ visibile in Figura 4. La prima richiesta e’ il documento HTML; la seconda richiesta e’ a.css (2 secondi): la terza (piccola) richiesta e’ proxy.css; la quarta richiesta e’ b.css (2 secondi). Sorprendentemente, IE non inizia a scaricare b.css finche’ a.css non e’ completamente scaricato. In tutti gli altri browser, il problema non esiste: il risultato e’ una pagina scaricata piu’ velocemente (Figura 5).

Vari @import

L’ esempio Vari @import dimostra che usandoi @import in IE causa lo scaricamento dei file in un ordine diverso da quello specificato. Questo esempio ha 6 fogli di stile (ognuno viene scaricato in 2 secondi) seguiti da uno script (4 secondi per il download).

<style>
@import url(' a.css' );
@import url(' b.css' );
@import url(' c.css' );
@import url(' d.css' );
@import url(' e.css' );
@import url(' f.css' );
</style>
<script src=' one.js' type='text/javascript' ></script>

Guardando la Figura 6, la barra piu’ lunga e’ lo script da 4 secondi. Anche se posizionato in fondo alla lista, IE lo scarica per primo. Se lo script ha del codice che dipende da uno stile importato (per esempio getElementsByClassName, ecc.), possiamo incontare problemi.

LINK con @import – Vari LINK

Questi due esempi includono 4 fogli di stile nel documento HTML. LINK con @imports usa LINK per caricare proxy.css; proxy.css quindi usa @import per caricare 4 fogli di stile. Vari LINK ha 4 LINK nel documento per inserire i 4 file (raccomandato). Le richieste HTTP sono mostrate nelle Figure 7 e 8.

Se guardiamo LINK con @import, il primo problema che sorge e’ che i nostri 4 file non iniziano ad essere sacaricati finche’ non viene analizzato proxy.css.Questo accade in tutti i browser. Dall’ altra parte, Vari LINK inizia a scaricare i fogli immediatamente.

Il secondo problema e’ che IE cambia l’ ordine del download. Aggiungiamo uno script da 10 secondi (la barra piu’ lunga) in fondo alla pagina. In tutti gli altri browser i fogli che usano la regola @import (dal file proxy.css) vengono scaricati prima e lo script alla fine, nell’ ordine specificato. In IE lo script viene scaricato prima di @import, come mostrato in Figura 7. Questo fa si che i fogli di stile impieghino piu’ tempo ad essere scaricati poiche’ lo script occupa per 10 secondi una delle due possibili connessioni HTTP disponibili in IE 6 e 7. IE non mostra nulla fino a che i fogli di stile non sono tutti presenti in memoria: usando @import in questa maniera la pagina restera’ vuota per almeno 12 secondi. Usare LINK al posto di @import preserva l’ ordine impostato dallo sviluppatore come mostrato in Figura 8. In questo modo la pagina verra’ generata in 4 secondi.

LINK LINK

E’ piu’ semplice e sicuro utilizzare LINK per i nostri fogli di stile:

<link rel='stylesheet' type='text/css' href='a.css' >
<link rel='stylesheet' type='text/css' href='b.css' >

Usare LINK assicura che i fogli di stile verranno scaricati in parallelo in tutti i browser: l’ esempio LINK LINK lo dimostra (Figura 9). Usare LINK garantisce anche l’ ordine impostato dallo sviluppatore.

Questo problema e’ imputabile ad IE. E’ particolarmente noioso che i file vengano scaricati in un ordine differente. Tutti i browser dovrebbero avere un po’ di lungimiranza e dovrebbero implementare un sistema che guardi a tutti i file CSS, con particolare attenzione alle regole @import che possono essere usate. Fino a che io browser non si comporteranno in questa maniera, e’ consigliabile usare LINK ed evitare @import.

I tempi di scaricamento sono volutamente esagerati, per renderci conto meglio di quanto accade. Ma persone con connessioni lente potrebbero avere esperienze non molto diverse da quelle illustrate. Le conclusioni sono:

• usare @import in un foglio di stile aumenta il tempo di download della pagina;
• usare @import in IE causa il cambiamento dell’ ordine di download. Questo puo’ causare un aumento esponenziale dei tempi di visualizzazione della pagina.

---

Articolo originale don’t use @import scritto da Steve Souders, esperto in prestazioni pagine web presso Google Inc. Tradotto con il consenso dell’ autore, thank you so much Steve! http://www.stevesouders.com/blog/2009/04/09/dont-use-import/