Percorso di rendering critico: cos'è e come ottimizzarlo

Quando parliamo di fornire agli utenti un'esperienza web ultraveloce, spesso ci concentriamo esclusivamente su ciò che noi, come proprietari di siti web e sviluppatori web, dovremmo fare.

Ma la verità è:

Offrire un'esperienza web veloce richiede anche molto lavoro da parte del browser.

Riceve i nostri file HTML, CSS e JavaScript e adotta passaggi specifici per convertirli in pixel sullo schermo.

Il segreto per accelerare le tue prestazioni sta nel capire cosa succede tra la ricezione delle risorse e la loro elaborazione per trasformarle in pixel renderizzati.

Questo processo è noto anche come percorso di rendering critico (CRP) .

E in questo articolo imparerai tutto ciò che devi sapere su CRP e come ottimizzarlo per un rendering più veloce.

• Che cos'è il percorso di rendering critico?
• Spiegazione della sequenza del percorso di rendering critico
• Come ottimizzare il percorso di rendering critico del tuo sito
• 3 plugin di WordPress per ottimizzare il tuo CRP
• Elenco di controllo per l'ottimizzazione CRP

Cominciamo!

Che cos'è il percorso di rendering critico?

Il percorso di rendering critico si riferisce alla sequenza di passaggi che un browser Web esegue per convertire il codice HTML, CSS e JavaScript in una rappresentazione visiva sullo schermo di un utente.

Implica una serie di processi, come la costruzione del Document Object Model (DOM), la generazione del CSS Object Model (CSSOM) e la combinazione di entrambi per creare il Render Tree. Il Render Tree viene quindi utilizzato per calcolare il layout e dipingere i pixel sullo schermo dell'utente.

L'ottimizzazione del percorso di rendering critico, d'altra parte, si riferisce alla riduzione del tempo impiegato dal browser web per eseguire ogni fase della sequenza dando priorità al contenuto rilevante per l'azione corrente dell'utente.

Per assicurarti che i tuoi sforzi di ottimizzazione colpiscano nel segno, devi avere una comprensione approfondita di ogni fase della sequenza. Quindi i prossimi due paragrafi sono essenziali e consigliamo vivamente di leggerli prima di agire.

Spiegazione della sequenza del percorso di rendering critico

Ecco una rapida panoramica dei passaggi eseguiti dal browser durante il rendering di una pagina:

1. Il browser scarica e analizza il markup HTML e crea il DOM.
2. Successivamente, scarica ed elabora il markup CSS e costruisce il CSS Object Model (CSSOM).
3. Quindi, combina i nodi necessari dal DOM e dal CSSOM per creare il Render Tree, una struttura ad albero di tutti i nodi visibili richiesti per il rendering della pagina.
4. Calcola le dimensioni e la posizione di ogni elemento della pagina attraverso il processo di Layout.
5. Infine, il browser disegna i pixel sullo schermo.

Ora entriamo in ogni passaggio.

Il DOM

Il Document Object Model (DOM) è la rappresentazione interna del browser del documento HTML.

Quando viene caricata una pagina Web, il browser analizza l'HTML e crea una struttura ad albero di nodi che rappresentano gli elementi nel documento. Ogni nodo corrisponde a un elemento HTML e ha proprietà che ne descrivono gli attributi, il contenuto e la posizione nell'albero.

Importante: il browser costruisce il DOM gradualmente, permettendoci di ottimizzare il rendering della pagina costruendo una struttura efficiente ed evitando dimensioni eccessive del DOM.

Il CSSOM

Mentre il DOM contiene tutto il contenuto della pagina, il CSSOM include tutte le informazioni su come definire lo stile del DOM.

Un'altra differenza tra DOM e CSSOM è che:

La costruzione del DOM è graduale, mentre il CSSOM no.

Quando viene caricato un sito Web, il browser deve elaborare il CSS per applicare gli stili. A differenza dell'HTML, che può essere elaborato bit per bit, il CSS deve essere elaborato tutto in una volta. Questo perché alcuni stili potrebbero essere sovrascritti da altri successivamente nel file CSS, quindi il browser deve attendere fino a quando non ha letto l'intero file CSS prima di decidere quali stili applicare.

Questo viene fatto per evitare di mostrare stili che verranno successivamente sovrascritti e sprecare risorse.

In poche parole:

Il browser blocca il processo di rendering finché non riceve e analizza tutti i CSS.

Ecco perché i CSS sono considerati una risorsa che blocca il rendering.

L'albero di rendering

Il Render Tree è la combinazione di DOM e CSSOM che il browser utilizza per creare la rappresentazione visiva della pagina web.

Il browser utilizza il Render Tree per calcolare le dimensioni e la posizione dei nodi come input per il processo di verniciatura.

Importante: nell'albero di rendering viene catturato solo il contenuto visibile. In genere, la sezione di testa non contiene informazioni visibili ed è quindi esclusa. Inoltre, se un elemento ha una proprietà display: none , né l'elemento né i suoi discendenti sono inclusi nell'albero di rendering.

Disposizione

Dopo che l'albero di rendering è stato costruito, il passo successivo è il layout. Il layout stabilisce il posizionamento e l'orientamento di ciascun elemento sulla pagina definendone le dimensioni, la posizione e le interrelazioni.

Ma ecco il punto:

Le prestazioni del layout sono influenzate dal DOM.

In altre parole:

Maggiore è il numero di nodi DOM, più lungo è il processo di layout.

Colore

La fase finale è dipingere i pixel sullo schermo, che segue la creazione dell'albero di rendering e del layout.

Inizialmente, l'intero schermo viene dipinto durante il processo di caricamento. Successivamente, vengono ridisegnate solo le parti interessate dello schermo, poiché i browser sono progettati per ridipingere solo l'area necessaria.

Tieni presente che la durata della fase di disegno dipende dalla natura degli aggiornamenti implementati nell'albero di rendering.

Ora vediamo quali ottimizzazioni puoi applicare per aiutare il browser e velocizzare alcuni processi.

Come ottimizzare il percorso di rendering critico del tuo sito

Il tempo necessario al browser per eseguire l'intero processo può variare. Ci sono molte parti mobili che contribuiscono alla lunghezza del percorso critico:

• Dimensione del documento
• Numero di richieste
• Dispositivo dell'utente
• Stili applicati

Tuttavia, ci sono tre tecniche che sono considerate le opzioni di riferimento quando si tratta di ottimizzazione CRP:

1. Ridurre al minimo il numero di risorse critiche rimandando quelle non critiche o eliminandole del tutto
2. Ottimizza il numero di richieste richieste insieme alla dimensione del file di ciascuna richiesta
3. Dai la priorità al download delle risorse critiche, accorciando così la lunghezza del percorso critico

Analizziamo più a fondo come implementare ciascuna delle strategie di ottimizzazione consigliate:

Ottimizza le risorse CSS e JS che bloccano il rendering

Sai già che quando il browser incontra risorse CSS e JS che bloccano il rendering, deve scaricarle, analizzarle ed eseguirle prima di fare qualsiasi altra cosa, incluso il rendering.

Quando si tratta di ottimizzare i CSS, è possibile implementare le seguenti tecniche:

• CSS critico. Identifica l'insieme minimo di regole CSS necessarie per visualizzare la parte visibile di una pagina Web e le consegna al browser come CSS in linea anziché caricare un foglio di stile completo. Caricando solo il CSS necessario per i contenuti above the fold, il browser può eseguire il rendering della pagina più rapidamente e migliorare l'esperienza dell'utente . Questo perché il browser non deve attendere il caricamento dell'intero foglio di stile prima di eseguire il rendering della pagina.
  
• Combina file CSS. La concatenazione CSS è il processo di combinazione di più file CSS in un singolo file. Questa tecnica migliora le prestazioni riducendo il numero di richieste HTTP necessarie per caricare una pagina web , poiché il browser deve solo scaricare e analizzare un singolo file CSS invece di più file.

Per quanto riguarda i tuoi file JavaScript, ecco cosa puoi fare:

• Ritarda il caricamento di JS. Il differimento del caricamento JS è una tecnica che velocizza il tuo sito ritardando il caricamento dei file JavaScript fino a quando il documento HTML non è stato caricato e analizzato . È possibile utilizzare l'attributo defer sul tag dello script che fa riferimento al file JS. È importante notare che l'attributo defer deve essere utilizzato solo per i file JS che non devono essere eseguiti immediatamente dopo il caricamento (ad esempio, i file che vengono utilizzati solo su pagine specifiche), poiché l'ordine di esecuzione potrebbe essere imprevedibile se più script differiti sono usati.
  
• Carica JS in modo asincrono. Alcuni file JS potrebbero richiedere l'uso dell'attributo async, che consente di caricare ed eseguire il file in modo asincrono con l'analisi del documento HTML.

Ci sono alcune ottimizzazioni che puoi applicare sia a CSS che a JavaScript:

• Minificazione. La minimizzazione comporta la rimozione di caratteri non necessari, come spazi bianchi, commenti e interruzioni di riga, dai file CSS e JavaScript. Questo processo può ridurre notevolmente le dimensioni dei file senza comprometterne la funzionalità o l'aspetto .
  
• Rimuovi CSS e JS inutilizzati. Unused CSS e JS si riferiscono a regole specifiche che non sono utilizzate su una particolare pagina ma sono comunque caricate. La rimozione di queste parti dei file influirà direttamente sulla velocità con cui il browser costruisce l'albero di rendering .

Ottimizza le tue risorse di blocco del rendering con il pilota automatico. Installa NitroPack →

Riduci le dimensioni dei tuoi file

Per ridurre la quantità di dati che il browser deve scaricare, possiamo utilizzare tecniche come minificazione, compressione e memorizzazione nella cache di risorse HTML, CSS e JavaScript.

Sai già cosa significa minificazione, quindi concentriamoci sugli altri due:

• Compressione. La compressione è una tecnica che applica algoritmi per riscrivere il codice binario dei file utilizzando meno bit dell'originale. Di conseguenza, i tuoi file sono di dimensioni molto inferiori, il che riduce i tempi di caricamento della pagina e l'utilizzo della larghezza di banda.
  
• Cache. La memorizzazione nella cache sfrutta la cache HTTP implementata in ogni browser. Per garantire una memorizzazione nella cache efficace, dobbiamo assicurarci che ogni risposta del server fornisca le intestazioni HTTP corrette, indicando al browser quando e per quanto tempo deve memorizzare nella cache le risorse richieste.

Affidati al meccanismo di memorizzazione nella cache più avanzato. Ottieni NitroPack oggi stesso →

Dai la priorità al download di risorse critiche

In generale, i browser sono abbastanza bravi a dare la priorità alle risorse più importanti e a recuperarle per prime. Tuttavia, in alcuni casi, potresti aiutarli a caricare il tuo sito ancora più velocemente assegnando manualmente la priorità alle risorse più cruciali.

È possibile utilizzare i suggerimenti sulle risorse per indicare al browser come gestire risorse o pagine Web specifiche.

Ecco i tre principali:

• Collegamento rel=prelettura. Prefetch è un suggerimento di risorsa a bassa priorità che consente al browser di recuperare le risorse che potrebbero essere necessarie in seguito e di memorizzarle nella cache del browser.

• Collegamento rel=preconnessione. La direttiva preconnect aiuta il browser a stabilire connessioni anticipate prima di inviare una richiesta iniziale al server.

• Collegamento rel=precaricamento. Il precaricamento viene utilizzato per forzare il browser a scaricare una risorsa prima di quanto il browser la rileverebbe perché è fondamentale per la pagina.

Importante: Prefetch e preconnect sono suggerimenti per le risorse e vengono eseguiti quando il browser lo ritiene opportuno. La direttiva preload è un comando obbligatorio per i browser. Ulteriori informazioni su come implementare i suggerimenti sulle risorse.

Ora che sai come gestire l'ottimizzazione del percorso di rendering critico, diamo un'occhiata ad alcuni plugin di WordPress che possono automatizzare il processo.

3 plugin di WordPress per ottimizzare il percorso di rendering critico

Tutte le ottimizzazioni sopra menzionate possono essere eseguite manualmente. Tuttavia, alcuni richiedono conoscenze tecniche per assicurarti di non danneggiare il tuo sito durante il processo.

Fortunatamente per tutti gli utenti di WordPress, ci sono plugin che possono aiutare con l'ottimizzazione CRP. Controlliamo i primi 3 candidati, a nostro avviso:

NitroPack - La soluzione all-in-one

NitroPack è la principale soluzione all-in-one per l'ottimizzazione della velocità del sito che combina oltre 35 funzionalità per le prestazioni web. Quando si tratta di ottimizzare il percorso di rendering critico, NitroPack gestirà automaticamente ottimizzazioni come:

• CSS critico
• Minimizzazione CSS e JS
• Compressione CSS e JS
• Cache
• Ritarda il caricamento di JS
• Rimuovi CSS e JS inutilizzati

Ma le funzionalità di ottimizzazione non finiscono qui. Riceverai anche il toolkit completo per le prestazioni:

• CDN integrato
• Stack completo per l'ottimizzazione delle immagini
• Ottimizzazione dei caratteri
• Caching del carrello e-commerce
• Supporto 24 ore su 24, 7 giorni su 7

Velocizza automaticamente il tuo sito web. Ottieni NitroPack oggi stesso →

WP Super Cache - Plugin solo per la memorizzazione nella cache

WP Super Cache è un plug-in di memorizzazione nella cache che offre principalmente funzionalità di memorizzazione nella cache e compressione HTTP, ma non è all'altezza della minimizzazione delle risorse e dell'ottimizzazione di JavaScript con attributi asincroni e differiti.

Le caratteristiche più importanti includono:

• Abilita la memorizzazione nella cache per tutti i visitatori
• Disabilita la memorizzazione nella cache per i visitatori che hanno effettuato l'accesso
• Comprimi le pagine in modo che vengano offerte più rapidamente ai visitatori
• Ricostruzione della cache

Prestazioni rapide

Swift Performance è un altro plug-in che potresti trovare utile nella tua ricerca di CRP ottimizzato. Alcune delle sue caratteristiche includono:

• Minimizzare i file CSS e JavaScript
• CSS critico
• Cache
• Ottimizzazione dell'immagine

Ottimizzazione del percorso di rendering critico [lista di controllo]

Abbiamo coperto molto terreno in questo articolo, quindi ecco un pratico elenco di controllo di tutte le ottimizzazioni che abbiamo menzionato:

• Genera CSS critico
• Combina i file CSS
• Ritarda il caricamento di JavaScript
• Carica JavaScript in modo asincrono
• Minimizza CSS e JavaScript
• Comprimi CSS e JavaScript
• Rimuovi CSS e JavaScript inutilizzati
• Applicare la minimizzazione
• Applicare la compressione
• Usa la memorizzazione nella cache
• Implementa collegamento rel=preload
• Implementa il link rel=prefetch
• Implementa il link rel=preconnect

Scarica la checklist per l'ottimizzazione CRP →

E, ultimo ma non meno importante, non dimenticare di testare prima e dopo ogni ottimizzazione!