Migliorare i tempi di Rendering ottimizzando i selettori css

css_rendering_performance

Ottimizzare un sito web per migliorane i tempi di caricamento è una pratica ormai comune, ma questo rappresenta solo una parte del lavoro necessario per ridurre i tempi di attesa per l’utente.

Bisogna infatti ricordare, che le risorse che compongo una pagina web, oltre ad essere richieste al server e poi ricevute sulla macchina dell’utente devono in seguito essere renderizzate nel browser.

Di questo compito si occupa il motore di rendering del browser che andrà ad applicare i fogli di stile alla pagina caricata. Questa operazione di fatto utilizza le risorse macchina dell’utente e può essere rallentata dalla scarsa disponibilità di ram al momento del rendering, oltre a ciò i tempi variano a seconda della complessità del sito e del software utilizzato.

Diventa quindi utile capire come ottimizzare i tempi di rendering della pagina attraverso una più attenta compilazione dei fogli di stile.

Come vengono letti i selettori css

Il motore di rendering legge i selettori css da destra verso sinistra, partendo dal primo selettore cerca un riscontro nella pagina HTML se non rintraccia l’elemento specifico passa al selettore successivo fino a che non rintraccia l’elemento su cui applicare la regola.

Prendiamo per esempio

#menu li a{...}

Il motore di rendering cercherà prima di tutto il selettore a (il primo selettore viene definito “chiave” o “key”), dopo cercherà il genitore li fino a che non trova riscontro nell’elemento menu.

Sulla base di quanto detto possiamo definire delle metodologie per ottimizzare i tempi di rendering dei fogli di stile

Eliminare le regole non necessarie

Se esistono regole che non vengono applicate ad alcun elemento è meglio eliminarle, anche se la regola non viene applicata il motore effettua comunque una ricerca dell’elemento gravando sui tempi di rendering. Oltre a questo non bisognerebbe mai tenere codice superfluo nei files, questo aumenta inutilmente il peso del file e rende più complesso il mantenimento e la compilazione.

Non utilizzare il selettore universale *

Il selettore universale * seleziona tutti gli elementi presenti sulla pagina, è normalmente utilizzato per le regole di formattazione.

*{margin:0;padding:0;}

Considerato che non tutti gli elementi html hanno un valore di default per margine e padding e che difficilmente si utilizzano tutti gli elementi HTML in una singola pagina, sarebbe utile specificare in altro modo questa regola evitando una così vasta ricerca al motore di rendering.

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

Questa regola formatta margine e padding per intestazioni, paragrafi, form, elementi del form e liste con maggiore specificità e minore dispendio di risorse.

Limitare la discendenza

Specificare una discendenza prolissa per una regola può essere utile in alcuni contesti per gestire la gerarchia delle regole, ma nella norma è possibile evitarlo.

Prendiamo per esempio

body #content #menu li a{...}

Essendo #menu un id, quindi un elemento univoco sulla pagina è possibile semplificare la regola in questo modo

#menu li a{...}

Ottimizzando così i tempi di ricerca dell’elemento da parte del motore di rendering

Evitare espressioni ricorsive

Quando si utilizzano classi e id si specificano implicitamente un gruppo di tag o un tag specifico rendendo così superflua una definizione del selettore tag

ad esempio

div#menu{...}
li.selected{...}

sono chiaramente ricorsivi e possono essere ottimizzati come segue

#menu{...}
.selected{...}

Limitare l’utilizzo di :hover all’elemento <a>

E’ noto come l’utilizzo della pseudoclasse :hover su elementi diversi da <a> non sia supportato da Internet Explorer in assenza di un doctype strict e causa notevoli rallentamenti anche in presenza di questo specifico doctype.

Una valida alternativa è rappresentata dalla trasformazione dell’elemento <a> in elemento di blocco per una più semplice gestione da css.

a{display:block;width:100px;height:100px;padding:5px;background:#000;}
a:hover{background:#c00;}

Specificare…sempre!

Ottimizzare il rendering del css è più una metodologia che non una serie di soluzioni standard, i selettori hanno specificità diversa e questo riduce o aumenta i tempi di rcerca del motore di rendering della pagina.

Per esempio gli ID sono elementi univoci e in quanto tali hanno tempi di ricerca più ridotti di tutti gli altri selettori.

Le classi rappresentano gruppi di elementi, sono meno performanti degli ID ma più dei selettori tag.

I tag sono selettori meno specifici perchè si riferiscono a tutti i tag di quel tipo presenti sulla pagina.

I selettori fratello (+) o figlio (-) sono meno vantaggiosi di una classe o un id ma più vantaggiosi di un selettore tag perchè riducono la ricerca del motore a due elementi (il selettore e l’eventuale padre o fratello).

Sulla base di quanto detto potremmo pensare di rivedere per esempio la nostra regola di formattazione vista in precedenza da così:

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

a così

.format{margin:0;padding:0;}

Modificando così la regola la ricerca viene limitata ad un gruppo più ristretto di elementi e la lunghezza della regola nel css viene ridotta.

Non a caso rintracciamo soluzioni analoghe in script molto utilizzati come ad esempio jquery ui che utilizza una classe .ui-helper-reset per la formattazione degli elementi.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli. Contrassegna il permalink.

3 risposte a Migliorare i tempi di Rendering ottimizzando i selettori css

  1. Laura scrive:

    raccomandazioni direi indispensabili! vedo certi fogli di stile quando si candidano per l’iwd award che c’è da mettersi le mani nei capelli ahha
    questa la ripropongo domani, così ti tornano anche un po’ di visite visto che ti eri fermato. grazie!!

  2. Acid scrive:

    Molto interessante, veramente!
    .l’ho segnalato anche sul mio sito ^_^

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>