Importanza della velocità e dell’efficienza delle pagine web
Oggi parliamo di SEO tecnica.
Nonostante i profondi cambiamenti avvenuti nel panorama della ricerca organica durante l’ultimo anno, la velocità e l’efficienza delle pagine web restano elementi che determinano il successo di un sito sul web.
Gli utenti, infatti, continuano a richiedere esperienze di navigazione rapide e fluide. L’80% degli utenti online si aspetta che i siti web si carichino in tre secondi o meno. Questa aspettativa di velocità non è solo un desiderio, ma un requisito ormai consolidato.
Google, dal canto suo, ha ulteriormente alzato l’asticella, richiedendo che il Largest Contentful Paint (LCP), un parametro utilizzato per misurare le prestazioni di caricamento di una pagina, sia inferiore a 2,5 secondi per essere considerato “buono”. Tuttavia, la realtà attuale è lontana dalle aspettative sia di Google che degli utenti: in media, un sito web impiega 8,6 secondi per caricarsi sui dispositivi mobili.
Un lato positivo c’è: questo numero è diminuito di 7 secondi rispetto al 2018, quando il tempo medio di caricamento su dispositivi mobili era di 15 secondi.
Velocità della pagina: non solo tempo di caricamento
La velocità di una pagina web non riguarda soltanto il tempo totale necessario per il caricamento, ma anche ciò che gli utenti sperimentano in quei 3 (o 9) secondi.
Occorre considerare quanto efficientemente le pagine vengono renderizzate.
Ottimizzare il percorso di rendering critico permette agli utenti di vedere i contenuti visivi il più rapidamente possibile, riducendo al minimo il tempo trascorso a guardare uno schermo bianco vuoto.
Cos’è il percorso di rendering critico?
Il percorso di rendering critico si riferisce alla serie di passaggi che un browser esegue per visualizzare una pagina, trasformando HTML, CSS e JavaScript in pixel effettivi sullo schermo.
In pratica, il browser deve richiedere, ricevere e analizzare tutti i file HTML e CSS, oltre a eseguire altro lavoro in più, prima di poter iniziare a visualizzare qualsiasi contenuto visivo.
Fino a quando il browser non completa questi passaggi, gli utenti vedranno solo una pagina bianca.
Come ottimizzare il rendering?
L’obiettivo principale dell’ottimizzazione del percorso di rendering critico è dare priorità alle risorse necessarie per il rendering di contenuti significativi above-the-fold (cioè quelli visibili senza dover scorrere la pagina).
Per farlo, è necessario identificare e declassare le risorse che bloccano il rendering, ovvero quelle non essenziali per caricare i contenuti above-the-fold, che impediscono alla pagina di essere visualizzata il più velocemente possibile.
Per migliorare il percorso di rendering critico, è utile iniziare con un inventario delle risorse critiche, ovvero quelle che bloccano il rendering iniziale della pagina, e cercare opportunità per:
- ridurre il numero di risorse critiche, rinviando il caricamento di quelle che bloccano il rendering.
- Ridurre il percorso critico, dando priorità ai contenuti above-the-fold e scaricando tutte le risorse critiche il prima possibile.
- Ridurre il numero di byte critici, diminuendo la dimensione dei file delle risorse critiche rimanenti.
Esiste un intero processo per ottimizzare il percorso di rendering critico, descritto nella documentazione per gli sviluppatori di Google.
Tuttavia, in questo articolo ci concentreremo su un aspetto fondamentale: la riduzione delle risorse che bloccano il rendering.
Cosa sono le risorse che bloccano il rendering?
Le risorse di blocco del rendering sono elementi di una pagina web che devono essere completamente caricati ed elaborati dal browser prima che possa iniziare a visualizzare il contenuto sullo schermo. Queste risorse sono solitamente file CSS (Cascading Style Sheets) e JavaScript.
Il ruolo del CSS nel bloccare il rendering
Il CSS blocca intrinsecamente il rendering. Il browser non inizierà a visualizzare alcun contenuto della pagina finché non sarà in grado di richiedere, ricevere ed elaborare tutti gli stili CSS. Questo comportamento è necessario per evitare un’esperienza utente negativa, che si verificherebbe se un browser tentasse di visualizzare contenuti senza stile. Una pagina renderizzata senza CSS sarebbe praticamente inutilizzabile, e gran parte (se non tutto) del contenuto dovrebbe essere ridisegnato.
Il tempo impiegato dal browser per richiedere e scaricare tutte le risorse CSS può variare notevolmente, a seconda del numero e della dimensione di questi file.
Il CSS è una risorsa che blocca il rendering. Invialo al client il prima possibile per ottimizzare il tempo del primo rendering.
Il ruolo di JavaScript nel bloccare il rendering
A differenza del CSS, il browser non ha bisogno di scaricare e analizzare tutte le risorse JavaScript per iniziare a visualizzare la pagina. Tuttavia, la maggior parte dei siti web moderni dipende da JavaScript per fornire un’esperienza completa nella parte visibile della pagina senza scorrere (above-the-fold), rendendo comunque essenziale l’uso del JavaScript in molti casi.
Tuttavia, quando il browser incontra JavaScript prima del rendering iniziale della pagina, il processo di rendering viene messo in pausa fino a quando JavaScript non viene eseguito (a meno che non venga specificato diversamente tramite gli attributi defer o async). Ad esempio, aggiungere una funzione di avviso JavaScript nella pagina HTML blocca il rendering finché il codice JavaScript non è completato.
Il JavaScript può anche bloccare la costruzione del DOM (Document Object Model) e ritardare il rendering della pagina, rallentando così il caricamento visibile per l’utente. Per migliorare le prestazioni della tua pagina, è importante rimuovere o rinviare l’esecuzione di qualsiasi JavaScript non essenziale che potrebbe ostacolare questo processo.
Per ulteriori approfondimenti ti invitiamo a leggere questo articolo:
Come le risorse di blocco del rendering influiscono sui Core Web Vitals
Core Web Vitals (CWV) è un set di parametri sviluppati da Google per valutare l’esperienza utente su una pagina web in termini di prestazioni di caricamento, interattività e stabilità visiva.
Questi parametri sono fondamentali per misurare con precisione come un utente reale percepisce la qualità di una pagina web.
Attualmente, le principali metriche dei Core Web Vitals sono:
- Largest Contentful Paint (LCP): misura il tempo necessario affinché l’elemento di contenuto più grande e visibile (come un’immagine o un blocco di testo) appaia sullo schermo.
- Interazione con la pagina successiva (INP): valuta la reattività di una pagina misurando il tempo che intercorre tra il momento in cui un utente interagisce con la pagina (ad esempio cliccando su un pulsante) e il momento in cui il browser risponde a tale interazione.
- Cumulative Layout Shift (CLS): misura la stabilità visiva di una pagina, quantificando la somma totale di tutti gli spostamenti imprevisti degli elementi durante il caricamento della pagina. Un punteggio CLS basso indica che la pagina è stabile, offrendo così una migliore esperienza utente.
L’impatto del percorso di rendering critico sui Core Web Vitals
L’ottimizzazione del percorso di rendering critico è particolarmente importante per migliorare il Largest Contentful Paint (LCP), poiché questo processo incide direttamente sul tempo impiegato dal browser per rendere visibili gli elementi di contenuto più significativi. Quando il percorso di rendering critico è ottimizzato, l’elemento di contenuto più grande viene caricato più velocemente, riducendo così il tempo LCP.
Oltre a migliorare il LCP, l’ottimizzazione del percorso di rendering critico e la riduzione delle risorse che bloccano il rendering possono influire positivamente anche su INP e CLS nei seguenti modi:
- Interazioni più rapide: un percorso di rendering critico ottimizzato riduce il tempo che il browser impiega per analizzare ed eseguire JavaScript, evitando che queste operazioni blocchino le interazioni dell’utente. Caricando gli script in modo più efficiente, si possono ottenere tempi di risposta più rapidi alle interazioni, migliorando così l’INP.
- Caricamento prevedibile delle risorse: ottimizzare il percorso di rendering critico aiuta a garantire che gli elementi della pagina vengano caricati in modo prevedibile ed efficiente. Gestendo correttamente l’ordine e la tempistica del caricamento delle risorse, si possono prevenire cambiamenti improvvisi di layout, migliorando il CLS.
Come identificare le risorse che bloccano il rendering
Prima di poter ridurre le risorse che bloccano il rendering, è essenziale identificarle.
Per fortuna, esistono diversi strumenti che permettono di individuare rapidamente e con precisione le risorse che ostacolano il rendering ottimale della pagina.
Utilizzo di PageSpeed Insights e Lighthouse
PageSpeed Insights e Lighthouse sono strumenti eccellenti per identificare le risorse che bloccano il rendering.
Basta inserire un URL in uno di questi strumenti, andare alla sezione “elimina le risorse di blocco della visualizzazione” sotto “diagnostica” ed espandere il contenuto per visualizzare un elenco di risorse proprietarie e di terze parti che impediscono la prima visualizzazione della pagina.
Questi strumenti segnalano principalmente due tipi di risorse che bloccano il rendering:
- risorse JavaScript nella sezione
<head>del documento che non hanno l’attributo<defer>o<async>. - Risorse CSS che non hanno un attributo disabilitato o un attributo multimediale che corrisponde al tipo di dispositivo dell’utente.
Utilizza l’API PageSpeed Insights in Screaming Frog per testare più pagine contemporaneamente e individuare quelle che trarrebbero maggiore beneficio dalla riduzione delle risorse che bloccano il rendering.
Per una visualizzazione dettagliata di come le risorse vengono caricate e quali potrebbero bloccare il rendering iniziale della pagina, puoi utilizzare anche WebPageTest.org. Esegui un test su webpagetest.org e clicca sull’immagine della “cascata”.
Concentrati su tutte le risorse richieste e scaricate prima della riga verde “Start Render” e individua i file CSS o JavaScript che non sono essenziali per il caricamento del contenuto above-the-fold.
Come verificare se una risorsa è essenziale per i contenuti above-the-fold
Se hai un buon rapporto con il team di sviluppo, potresti limitarti a fornire un elenco delle risorse che bloccano il rendering affinché vengano esaminate.
Tuttavia, se vuoi andare oltre, puoi testare l’effetto di rimuovere queste risorse per vedere come il contenuto above-the-fold viene influenzato.
Ad esempio, dopo aver completato i test, potresti notare alcune richieste JavaScript all’API di Google Maps che non sembrano critiche.
Per verificare come il rinvio di queste risorse influisca sul contenuto above-the-fold:
- apri la pagina in una finestra di navigazione in incognito di Chrome.
- Apri Chrome DevTools (ctrl+shift+i) e vai alla scheda “Risorse Bloccate” nel pannello Rete.
- Seleziona “Abilita blocco richieste” e aggiungi uno schema per bloccare le risorse identificate.
- Aggiorna la pagina.
Questa guida Google spiega come fare.
Se il contenuto above-the-fold non cambia, probabilmente la risorsa testata è una buona candidata per l’ottimizzazione. Se invece il contenuto non viene caricato correttamente, dovrai considerare altre strategie per gestire le risorse critiche.
Metodi per ridurre il blocco del rendering
Una volta verificato che una risorsa non è essenziale per il rendering del contenuto above-the-fold, è possibile esplorare vari metodi per differire il caricamento di queste risorse e migliorare così il rendering della pagina.
Posizionare JavaScript in fondo all’HTML
Se hai seguito un corso base di web design, probabilmente hai già sentito parlare di questa pratica: inserire i collegamenti ai fogli di stile CSS nella sezione <head> dell’HTML e posizionare i collegamenti agli script esterni nella parte inferiore del <body> dell’HTML.
Il motivo è semplice: più in alto si trova uno script JavaScript nell’HTML, prima il browser lo scaricherà ed eseguirà, potenzialmente bloccando il rendering della pagina. Ad esempio, se un avviso JavaScript è inserito nella parte superiore dell’HTML, il rendering della pagina viene bloccato immediatamente, impedendo la visualizzazione di qualsiasi contenuto visivo.
Al contrario, spostando la funzione JavaScript in fondo all’HTML, alcuni contenuti visivi possono essere visualizzati prima che il rendering della pagina venga bloccato. Sebbene questa sia una buona pratica standard, non è sufficiente per eliminare completamente gli script che bloccano il rendering dal percorso critico. Continua a usare questo metodo per gli script essenziali, ma considera altre soluzioni per rinviare il caricamento degli script non critici.
Utilizzare l’attributo Async o Defer
- L’attributo async segnala al browser di caricare JavaScript in modo asincrono, consentendo al browser di continuare ad analizzare l’HTML mentre lo script viene scaricato. Tuttavia, una volta scaricato lo script, l’analisi dell’HTML viene interrotta per eseguire lo script.
- L’attributo defer funziona in modo simile, ma con un’ulteriore ottimizzazione: segnala al browser di attendere fino al completamento dell’analisi HTML prima di eseguire lo script, riducendo così ulteriormente i tempi di caricamento.
Entrambi questi metodi sono facili da implementare e aiutano a ridurre il tempo che il browser impiega per analizzare l’HTML, senza alterare significativamente il modo in cui il contenuto viene caricato sulla pagina.
Async e defer sono particolarmente utili per elementi “extra” del sito, come pulsanti di condivisione social, barre laterali personalizzate o feed di notizie, che non devono influenzare negativamente l’esperienza utente principale.
Utilizzare una soluzione personalizzata
Per alcune risorse che bloccano il rendering, come un fastidioso avviso JavaScript, può essere necessario adottare una soluzione personalizzata. Ad esempio, puoi utilizzare l’evento onload di JavaScript per caricare una risorsa esterna solo dopo che tutto il contenuto principale della pagina ha terminato il caricamento, rimuovendola così dal percorso critico.
Questa tecnica può essere utile per risorse a priorità più bassa, come event listener o elementi nel footer, ma potrebbe non essere sufficiente per contenuti più importanti. Per ottenere i migliori risultati, collabora con il tuo team di sviluppo per trovare la soluzione più adatta così da migliorare il rendering delle pagine web.
Utilizzare le query multimediali CSS
Le query multimediali CSS permettono di indicare al browser quali risorse CSS devono essere analizzate solo in determinate condizioni, come per la stampa, l’orientamento dello schermo o le dimensioni della finestra di visualizzazione. Questo approccio consente di sbloccare il rendering, poiché le risorse non essenziali possono essere scaricate con una priorità inferiore.
Se possibile, utilizza le query multimediali CSS per specificare al browser quali risorse CSS sono critiche per il rendering della pagina e quali no.
Metodi per dare priorità alle risorse critiche
Dare priorità alle risorse critiche assicura che gli elementi più importanti di una pagina web, come i CSS per i contenuti above-the-fold e i JavaScript essenziali, vengano caricati per primi.
Ecco alcuni metodi per garantire che le risorse critiche vengano caricate il prima possibile:
- ottimizzare quando vengono scoperte le risorse critiche: le risorse critiche devono essere rilevabili nel codice sorgente HTML iniziale. Evita di fare riferimento a risorse critiche solo in file CSS o JavaScript esterni, poiché ciò potrebbe creare catene di richieste critiche che rallentano il caricamento.
- Utilizzare suggerimenti sulle risorse per guidare i browser: i suggerimenti sulle risorse indicano ai browser come caricare e dare priorità alle risorse. Ad esempio, potresti usare l’attributo preload per font e immagini importanti, garantendo che siano disponibili quando il browser inizia a visualizzare la pagina.
- Considerare l’inlining di stili e script critici: inserire direttamente nel codice sorgente HTML i CSS e JavaScript critici può ridurre il numero di richieste HTTP necessarie per caricare le risorse critiche. Questa tecnica dovrebbe essere usata con cautela e solo per piccoli pezzi di codice, poiché una quantità eccessiva di codice inline potrebbe influire negativamente sui tempi di caricamento iniziale.
Ridurre le dimensioni delle risorse critiche
Oltre a ottimizzare il momento in cui le risorse vengono caricate, è importante ridurre il tempo che impiegano per caricarsi. Per farlo:
- minimizza CSS e JavaScript: rimuovi caratteri non necessari come spazi vuoti, commenti e interruzioni di riga, per ridurre la dimensione dei file CSS e JavaScript critici.
- Abilita la compressione del testo: usa algoritmi di compressione come Gzip o Brotli per ridurre ulteriormente la dimensione dei file e migliorare i tempi di caricamento.
- Rimuovi CSS e JavaScript inutilizzati: rimuovere il codice inutilizzato riduce le dimensioni complessive dei file, diminuendo la quantità di dati da scaricare. Tuttavia, questa operazione può essere complessa e richiedere uno sforzo maggiore rispetto ai metodi precedenti.
Conclusione
Ottimizzare il percorso di rendering critico è fondamentale per migliorare i tempi di caricamento della pagina, offrire un’esperienza utente migliore e ottenere punteggi più alti nei Core Web Vitals.
Strumenti come PageSpeed Insights, Lighthouse e WebPageTest.org possono aiutarti a identificare le risorse che bloccano il rendering e a implementare strategie efficaci per ridurne l’impatto.
Se hai bisogno di un aiuto, contattami per una consulenza SEO.
