pannello di controllo




Sei qui: Homepage » HTML, web design » CSS @import ed i tempi di caricamento

5 maggio 2010 - Autore:

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 @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

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.

@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.

E’ 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 il modo in cui vengono inclusi i fogli di stile è un fattore da valutare.

9 Commenti a “ CSS @import ed i tempi di caricamento ”

  1. Se proprio si vuole esagerare, si può adottare un meccanismo che attraverso mod_rewrite e un file PHP richiami tutti i CSS in un colpo solo in questo modo:

  2. molto interesante questa cosa, non ne sapevo nulla dei tempi di caricamento dei css e il diverso comportamento dei browser.
    Come sempre IE fa sempre la differenza (in negativo)..

    @Giovanni:
    ti è stato troncato il codice che volevi incollare nel commento

  3. Ma dai, chi l’avrebbe mai detto… Grazie della segnalazione, ignoravo completamente questo problema.

  4. Tom per caso tu sai come “forzare” la priorità di caricamento di determinati moduli ed elementi html? o non è possibile?

  5. @Emanuele che cosa intendi? Le considerazioni di questo post comunque riguardano il comportamento dei vari browser con i CSS, e non c’è modo di modificarlo.

  6. Intendo ad esempio (io sono su blogger) caricare prima un o un widget di un altro, assegnando un livello di priorità manualmente anzichè lasciare che il browser decida quali elementi caricare prima e quali dopo.. non so se mi sono spiegato (ps sì non è propriamente riferito a quest’articolo ma non sapevo dove altro chiederti)

  7. @Emanuele se si parla di HTML, l’ordine degli elementi nel codice è quello che stabilisce la priorità. Se poi si parla di widget o parti della pagina che devono essere caricate da siti esterni, lì sei per forza vincolato ai tempi di risposta di questi siti. E’ il motivo per cui in genere cerco di limitare al minimo widget di Facebook, Last.fm, Delicious, ecc…

  8. Ah capito.. ti rignrazio per le risposte :)

Scrivi un commento


Menu secondario

feed

categorie

archivio

twitter e blog personale

Twitter

TomStardust Diary - Il mio blog personale