Il percorso di rendering critico in un sito web mobile
Il percorso di rendering critico in un sito web è il tempo impiegato dal browser per visualizzare i vari elementi di un sito web. In particolare si definisce come percorso di rendering critico la priorità di caricamento e visualizzazione che ogni elemento del sito web ha rispetto a tutti gli altri.
Ottimizzare quindi il percorso di rendering di un sito web significa assegnare a tutti gli elementi della nostra pagina web un tempo specifico di caricamento al fine di far visualizzare al browser prima gli elementi essenziali alla fruizione della pagina stessa, come i testi, gli stili, e comunque prima gli elementi detti “Above the Fold“, ovvero presenti nella parte di schermo immediatamente visibile, e solo in un secondo momento tutti gli altri in base alla loro importanza.
Prima di approfondire però come ottimizzare il percorso di rendering critico in un sito web, occorre fare un passo indietro e spiegare come i nostri browser ci permettono di visualizzare le pagine web con le immagini, le animazioni, i fonts e tutto il resto.
Il Document Object Model (DOM)
Supponendo di avere una semplice pagina html, vediamo qual’è il lavoro che il nostro browser deve svolgere per visualizzare tale pagina:
Ancora prima che il browser possa visualizzare la nostra pagina deve creare la struttura HTML e CSS; è quindi necessario inviare nel più breve tempo possibile proprio questi elementi. Una volta ricevuti il browser “esplode” tali file e li interpreta nel modo seguente:
- Il browser trasforma i byte HTML in singoli caratteri secondo la codifica assegnata (ad esempio UTF-8);
- Il browser converte le stringhe in token specifici e crea le relazioni tra diversi token (<head>, <body>, ecc);
- I token vengono convertiti in oggetti;
- Il browser crea finalmente il DOM, ovvero crea le relazioni padre-figlio tra i diversi oggetti in una struttura ad albero che verrà poi utilizzata per le future altre pagine.
Quindi ogni volta che richiediamo una pagina web il browser converte la pagina in caratteri, crea i token, crea le relazioni e infine costruisce il DOM. Questa struttura però indica al browser cosa visualizzare, ma non come farlo. Contemporaneamente alla costruzione del DOM il browser crea il CSSOM, ovvero il CSS Object Model che indicherà al browser stesso quali stili dare ai diversi elementi della pagina.
Comprendere come il nostro browser visualizza le pagine web ci servirà poi per ottimizzare proprio quegli elementi, il caricamento degli stessi, definendo un percorso di rendering critico ottimale soprattutto da mobile.
Ottimizzazione del percorso di rendering critico
Per far sì che il caricamento della nostra pagina avvenga nel minor tempo possibile occorre lavorare alla riduzione di tre variabili:
- Il numero di risorse critiche, ovvero tutti gli elementi che possono ostacolare il caricamento della pagina;
- La lunghezza del percorso critico, ovvero la relazione tra una risorsa critica e la sua dimensione in byte;
- Il numero di byte critici, che possiamo diminuire eliminando le risorse non necessarie, oppure spostando il loro caricamento ad una fase successiva, rendendole non critiche.
Una volta individuate le variabili critiche si può passare all’ottimizzazione vera e propria attraverso le seguenti pratiche:
Eliminazione dei Download
Si esegue un inventario delle risorse che stiamo scaricando, in seguito si misurano le prestazioni delle singole risorse e infine si valuta se il valore offerto all’utente dal caricamento di quella risorsa ne giustifica la sua inclusione.
La risorsa meglio ottimizzata è quella che non viene caricata, quindi nello scegliere le risorse da caricare, siano esse librerie, immagini, ecc, occorre valutare se effettivamente quella risorsa sta offrendo un valore aggiunto all’utente.
Ottimizzazione della codifica
Un esempio riportato dalle linee guida di Google, a proposito dell’ottimizzazione del codice, è il seguente:
# Di seguito è riportato un messaggio segreto, composto da un insieme di intestazioni in
# formato chiave-valore, seguito da una nuova riga e dal messaggio criptato.
formato: secret-cipher
data: 25/08/2016
AAAZZBBBBEEEMMM EEETTTAAA
Le prime due righe del documento sono commenti non visualizzati dall’utente. Il terzo rigo è il formato, il quarto la data e il quinto una stringa di caratteri. Come si può ottimizzare tale codice? Sicuramente eliminando i commenti e riscrivendo la codifica della stringa in questo modo:
3A2Z4B3E3M 3E3T3A
In questo modo il codice che prima era composto da 200 caratteri, ora ne ha solo 56, ridotto del 72%. Capite bene quindi come l’ottimizzazione del codice possa effettivamente contribuire a ridurre notevolmente la velocità di caricamento di una pagina web.
Ottimizzazione delle immagini
Questo aspetto è sempre critico, soprattutto nell’era in cui le immagini sono tutto e i siti web ne contengono tantissime. Come si possono ottimizzare le immagini sul web? In primis utilizzando strumenti di generazione adeguati, e poi seguendo alcune indicazioni:
- Sostituisci dove possibile le immagini raster con i vettoriali SVG.
- Rimuovi tutti i metadati dalle immagini
- Pubblica immagini in scala
- Scegli sempre il giusto equilibrio tra peso e qualità
Ottimizzazione dei Caratteri
I caratteri tipografici sono oggi un elemento fondamentale non solo di design, ma anche per offrire agli utenti la migliore esperienza possibile. Tuttavia anche il rendering dei caratteri può comportare un dispendio di risorse, quindi nella scelta del set di caratteri è molto importante seguire alcuni accorgimenti, come ad esempio limitarsi a due tipologie per sito web e limitare l’uso delle varianti degli stessi.
In secondo luogo occorre pubblicare formati di caratteri ottimizzati per ogni browser, ogni carattere deve essere fornito in formato WOFF2, WOFF, EOT e TTF. Assicurati di comprimere i formati EOT e TTF in formato GZIP, poiché non sono compressi per impostazione predefinita.
Infine specifica norme per una memorizzazione ottimale nella cache e per la riconvalida.
Memorizzazione nella cache
L’ultimo punto riguarda la memorizzazione nella cache HTTP e in particolare alcuni accorgimenti:
- Attenzione agli URL: se visualizzi lo stesso contenuto da url differenti questo verrà archiviato più volte.
- Token di convalida (ETag): assicurati che una risorsa non venga caricata più volte se non è cambiata.
- Stabilisci la durata ottimale della cache.
- Riduci la varianza: se una parte specifica di una risorsa cambia rispetto a tutto il resto, valuta di fornire tale parte in un file separato. In questo modo la parte di codice che non cambia verrà memorizzata e sarà ottimizzata per gli accessi futuri.
Siamo andati un po’ oltre il normale articolo, ma è molto importante per un professionista conoscere questi concetti. In un era in cui il mobile è diventato predominante (con più del 70%) anche la velocità di caricamento di un sito web lo è diventata. Sappiamo ad esempio che Google prende molto in considerazione i siti web che si caricano in breve tempo e sappiamo anche quanto siamo poco inclini ad attendere tempi biblici di caricamento per compiere un’azione. Se questa azione poi è un acquisto su un e-commerce allora si comprende maggiormente l’importanza che la velocità di un sito e nello specifico il percorso di rendering critico.
Se avete un sito in WordPress potete utilizzare il plugin gratuito Above The Fold Optimization, che vi consentirà di gestire proprio le risorse del percorso di rendering critico, fateci sapere cosa ne pensate nei commenti.
TI POTREBBE INTERESSARE ANCHE:
27 Febbraio 2017 34 linee guida per la ricerca in un E-Commerce
22 Gennaio 2018 Cosa è il Time to First Byte di un sito web
12 Agosto 2016 User Experience: salvezza o condanna?
14 Gennaio 2017 I trend 2017 nel Web Design
17 Marzo 2019 Anatomia di un Tema WordPress
25 Agosto 2016 Web Design: cos’è? Serve davvero?
