Howtoweb.it

Migliorare i tempi di Rendering ottimizzando i selettori css

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.

Come migliorare le performance del proprio sito con SmartOptimizer

Sui tempi di caricamento delle pagine web si è discusso molto, l’argomento è senza dubbio importante sia per favorire la navigazione degli utenti sia per facilitare l’indicizazzione del sito.

In un mondo ideale tutti i siti dovrebbero pesare meno di 100kb complessivi, ottimizzare markup, css,  javascript e immagini, ridurre al minimo le richieste al server e molto altro ancora. Nel mondo reale i contesti sono variegati e talvolta non è possibile ottimizzare tutto l’ottimizzabile oppure anche le migliori procedure non danno i frutti sperati.

E’ quindi necessario muovere il proprio sguardo oltre le tecnologia lato client e cercare ulteriori soluzioni  nel lato server. Un normale ostacolo a questo pensiero è rappresentato dal fatto che non sempre abbiamo pieno accesso al server e ciò rende difficile settare il proprio spazio web in modo congruo.

Una semplice soluzione a questo problema è rappresentata da SmartOptimizer, progetto di Ali FarHadi, il miglioramento delle performance è reso possibile dall’impostazione personalizzata della compressione gzip sul server, il salvataggio della cache dei files e  la compressione e la concatenazione di script.

Per l’utilizzo è necessario possedere un server Apache con il modulo mod_rewrite abilitato (è il modulo di Apache che permette la definizione di regole da un file .htaccess) e php versione 4.3.0 o superiori.

Nel dettaglio la soluzione consiste in una cartella contenente alcuni files php e un file .htaccess. Gli scripts php si occupano della compressione di css e javascript, del salvataggio della cache e delle opzioni custom da impostare sul server, il tutto viene elaborato e rimandato al file .htaccess che permette l’impostazione di nuove regole nello spazio web.

L’utilizzo è molto semplice, una volta scaricata la cartella e il file .htaccess basta caricarli nel proprio spazio web e verificarne il funzionamento. Volendo è possibile utilizzare il file config.php per settare le diverse opzioni di ottimizzazione in base al contesto trattato.

Per eventuali dubbi su utilizzo ed installazione consiglio la pagina di documentazione e download sul sito di Ali FarHadi.

Un ulteriore consiglio per i test sull’ottimizzazione delle vostre pagine web è quello di utilizzare page speed sul vostro browser per meglio analizzare come vengono risolte le richieste al server e su quali contesti lavorare per miglirare i tempi di caricamento e rendering.