Voi siete qui: Home » Web performance » Google Best Practices » Rimozione delle regole CSS inutilizzate
Rimozione delle regole CSS inutilizzate
Panoramica
La rimozione o il caricamento differito delle regole di stile che non sono utilizzate da un documento html consente di evitare il download di byte inutili al browser e di iniziare quindi più velocemente il rendering della pagina a video.
Dettagli
Prima che un browser possa cominciare ad eseguire il rendering di una pagina Web, è necessario scaricare ed analizzare gli eventuali fogli di stile che sono necessari per creare il layout della pagina.
Anche se si tratta di un foglio di stile in un file esterno che viene memorizzato nella cache locale, il rendering è bloccato fino a quando il browser non carica il foglio di stile dal disco.
Inoltre, una volta che il foglio di stile viene caricato, il motore del browser CSS deve valutare, effettuando un parsing, di tutte le regole contenute nel file per vedere se la regola si applica alla pagina corrente.
Spesso molti siti web riutilizzano lo stesso file CSS esterno per tutte le loro pagine, anche se molte delle regole definite in esso non si applicano alla pagina corrente.
Il modo migliore per ridurre al minimo i tempi di latenza causati dal foglio di stile nel download e nel rendering è quello di ridurre le dimensioni del CSS, il modo più ovvio per farlo è quello di rimuovere o caricare in un secondo tempo le regole CSS che non sono effettivamente utilizzate dalla pagina corrente.
Tip: Utilizzando Page Speed per controllare una pagina che richiede un css esterno vengono identificate tutte le regole che non sono utilizzate dalla pagina.
Raccomandazioni
- Rimuovere eventuali blocchi di stile in linea contenenti CSS che non vengono utilizzati dalla pagina corrente.
- Minimizzare il codice css (con gli appositi tool).
- Se il proprio sito utilizza file CSS esterni condivisi tra più pagine bisogna prendere in considerazione la possibilità di dividerli in file più piccoli, contenenti le regole per le pagine specifiche.
- Se una pagina punta ad un file di regole di stile che non sono necessarie durante la fase di avvio, metterle in un CSS separato e reinviare il caricamento del file fino a quando l'evento onload non viene generato.
- Se si utilizza Javascript per generare stili, bisogna essere sicuri che tali funzioni non siano chiamate dalle pagine che non utilizzano tali stili. Questo potrebbe richiedere alcuni refactoring del codice JS.
Articolo originale in lingua inglese
Potrebbe interessarti anche:
About Alessandro
Mi interesso di web editing, seo e rich internet applicationNavigazione
Tag cloud
Sondaggio
Loading ...