30 agosto 2023
Rendering pagine web: cos’è e perché cambia il posizionamento SEO
Scritto daAlex Baldarelli
Sebbene sia sempre vero che “content is the king”, sappiamo che per ottenere importanti risultati in ambito SEO è indispensabile intervenire anche su diversi aspetti più tecnici. I crawler, infatti, interpretano non solo i contenuti in quanto tali e quanto sono effettivamente utili agli utenti, ma anche la resa grafica della pagina.
L’operazione attraverso la quale i crawler interpretano la disposizione degli elementi sulla pagina web è detta rendering e gioca un ruolo determinante per quanto riguarda il modo in cui i siti vengono visualizzati e quindi indicizzati sui motori di ricerca.
Perché i contenuti siano ben visibili agli utenti e ai motori di ricerca, è necessario comprendere nel migliore dei modi come funziona il rendering e come può cambiare il posizionamento del tuo sito nei risultati di ricerca.
Rendering siti web, definizione
Il rendering non è altro che il processo di esecuzione del codice grafico presente in una pagina web per generare un risultato visivo per l’utente. Lato client, quando l’utente richiede una pagina o una risorsa, il codice viene tradotto dal browser per renderlo visibile all’utente sotto forma di immagini e forme (il cosiddetto layout visivo) e consentire l’interattività. Lato server, invece, il codice viene eseguito sul server ancor prima che la pagina venga inviata al browser, accelerando così il caricamento della pagina stessa per l’utente.
I motori di ricerca leggono e interpretano questo codice grafico proprio come farebbe un visitatore “umano” durante la navigazione. Come? Esistono degli appositi motori di rendering chiamati rendering engine che, dopo aver raccolto i dati in arrivo dal server, trasformano il codice in elementi grafici e risorse. Ma come funziona il rendering di una pagina web? Scopriamolo!
Come funziona il rendering di una pagina web
Per comprendere come funziona il rendering di una pagina web, è indispensabile avere chiari concetti come DOM, CSSOM e Render- Tree, che stanno alla base di un processo di rendering.
Nella prima fase, il browser individua le dimensioni (in pixel) di tutti nodi dell’albero di rendering e la posizione dove verrà mostrato sullo schermo.
Nella fase di paint, il browser dispone gli elementi del render tree su più livelli, al fine di “disegnare” in modo corretto ed efficace gli elementi, nel loro aspetto, nella loro posizione e nelle loro animazioni.
Nella terza fase, avviene l’effettiva rappresentazione di tutti gli elementi sullo schermo, sotto forma di pixel.
La sequenza di eventi che parte dal DOM alla fase di composition è detta percorso di rendering critico.
Rendering e posizionamento SEO: cosa devi sapere
Poiché Google considera come fattore determinante in ottica SEO anche la user experience, la resa grafica delle pagine web incide, di conseguenza, anche sul posizionamento del sito sui motori di ricerca.
I crawler di Google, infatti, leggendo il codice comprendono di cosa tratta una pagina, cosa contiene in linea generale, come è visibile agli utenti e come questi possono interagire. Se gli utenti non riescono a vedere tutti gli elementi del sito in modo corretto e/o non riescono a fruirne in maniera ottimale e veloce, è presto detto che la user experience sarà fallimentare e quindi per Google non è meritevole di punteggi elevati di Core Web Vitals.
Google, ad esempio, valuta se gli annunci riempiono la pagina, il contenuto è ben visibile oppure è nascosto dietro un clic, se il caricamento della pagina è eccessivamente lento, se i contenuti sono effettivamente visualizzati nella posizione indicata dal codice ecc.
Ecco perché è importante lavorare su un processo di rendering efficiente, al fine di ottenere risultati in tutte le metriche chiave di Google per la SEO e per la user experience. In sostanza, il rendering è connesso alla SEO perché determina il modo in cui i motori di ricerca interpretano e indicizzano le pagine di un sito.
In realtà il rendering avviene dopo l’indicizzazione: prima una pagina viene “scoperta” dai crawler attraverso link inseriti in altre pagine o mediante sitemap; poi questa pagina viene aggiunta alle pagine da sottoporre a scansione, quindi i crawler richiedono il codice sorgente della pagina web e scaricano tutti i file necessari al rendering, dopodiché viene analizzato il contenuto e la pagina viene indicizzata. Solo a questo punto la pagina viene inserita nell’elenco contenente tutte le pagina da renderizzare.
Il rendering di Google, che richiede, talvolta, anche alcune settimane, avviene in due fasi:
Ottimizzazione SEO: come analizzare e migliorare il rendering
Analizzare il rendering in ottica SEO significa prestare attenzione a come i contenuti vengono visualizzati, alla struttura alla formattazione e alla velocità di rendering, senza dimenticare un approfondito controllo del codice JavaScript e CSS e degli elementi dinamici che funzionino in maniera corretta e siano facilmente elaborati dai motori di ricerca. Insomma, si deve controllare che il codice sia pulito e semantico, in modo tale da facilitare il rendering ai motori di ricerca.
Attenzione: non pensare solo alla versione desktop, ma anche a quella mobile: per Google l’indicizzazione è Mobile-First, quindi assicurati che il sito sia mobile-responsive. Come? Prova Google Mobile Friendly Test, che ti mette a disposizione direttamente Big G.
Lo strumento utile per testare il rendering di Google che ti consigliamo è URL Inspection Tool di Google Search Console:
Dopo il test, aprire il codice HTML della “Crawled Page” e confrontalo con il codice HTML della pagina del tuo sito, per individuare eventuali risorse mancanti o bloccate. Queste puoi trovarle analizzando la sezione “More Info”, che ti consente di trovare risorse bloccate durante il rendering, che impediscono a Google di visualizzare nel modo corretto una pagina web.
Lo so, è un lavoro lungo e lento, ma ricordati che il rendering è uno degli elementi più importanti per il posizionamento del tuo sito!
Infine, esiste un’estensione di Google Chrome, chiamata View Rendered Source, che ti mostra come il browser renderizza l’HTML di una pagina web in un DOM perfettamente funzionante. In questo modo, puoi comprendere in che modo i motori di ricerca visualizzano le pagine del tuo sito.
In particolare puoi vedere, riga per riga di codice, le differenze tra versione HTML “grezza” (ossia inviato dal server al browser, prima del rendering) e renderizzata, ossia dopo che il codice è stato interpretato in DOM.
Insomma, come puoi migliorare il rendering di una pagina web? Tutto quello che devi fare è ottimizzare il codice sorgente, ridurre i tempi di caricamento delle pagine (utilizzando il caching e un sistema di compressione, ad esempio), diminuire l’uso di file CSS e JavaScript e, ovviamente, assicurarsi che il sito sia visualizzabile e compatibile con i browser più utilizzati.
Alcuni spunti utili puoi raccoglierli anche con lo strumento Page Speed Insights, ma per incrementare le prestazioni e migliorare il rendering in maniera definitiva, scegli Doweb: realizziamo siti web con grafica realizzata su misura e layout responsive, compatibili con tutti i dispositivi e visualizzabili in maniera completa e corretta da Google.
Hai già un sito web e vuoi un nuovo stile grafico più accattivante e ottimizzato in ottica SEO? Contattaci subito!
L’operazione attraverso la quale i crawler interpretano la disposizione degli elementi sulla pagina web è detta rendering e gioca un ruolo determinante per quanto riguarda il modo in cui i siti vengono visualizzati e quindi indicizzati sui motori di ricerca.
Perché i contenuti siano ben visibili agli utenti e ai motori di ricerca, è necessario comprendere nel migliore dei modi come funziona il rendering e come può cambiare il posizionamento del tuo sito nei risultati di ricerca.
Rendering siti web, definizione
Il rendering non è altro che il processo di esecuzione del codice grafico presente in una pagina web per generare un risultato visivo per l’utente. Lato client, quando l’utente richiede una pagina o una risorsa, il codice viene tradotto dal browser per renderlo visibile all’utente sotto forma di immagini e forme (il cosiddetto layout visivo) e consentire l’interattività. Lato server, invece, il codice viene eseguito sul server ancor prima che la pagina venga inviata al browser, accelerando così il caricamento della pagina stessa per l’utente.
I motori di ricerca leggono e interpretano questo codice grafico proprio come farebbe un visitatore “umano” durante la navigazione. Come? Esistono degli appositi motori di rendering chiamati rendering engine che, dopo aver raccolto i dati in arrivo dal server, trasformano il codice in elementi grafici e risorse. Ma come funziona il rendering di una pagina web? Scopriamolo!
Come funziona il rendering di una pagina web
Per comprendere come funziona il rendering di una pagina web, è indispensabile avere chiari concetti come DOM, CSSOM e Render- Tree, che stanno alla base di un processo di rendering.
- Document Object Model (DOM): una web-api che rappresenta la struttura e il contenuto di una pagina web. Il browser, quando processa la pagina, crea dei nodi per ogni elemento HTML e li elabora al fine di creare la struttura DOM per gestire e leggere la pagina stessa in modo efficace. Gli sviluppatori possono intervenire sul DOM, per modificare gli elementi HTML, compresi gli attributi, i commenti e il testo.
- CSS Object Model (CSSOM): riguarda l’applicazione degli stili CSS agli elementi del DOM. Il browser legge i CSS da file CSS esterno, via javascript, con delle regole o degli attributi presenti nella pagina web, per poi costruire il CSSOM, che ha una struttura ad albero come il DOM. Ogni nodo dell’albero, quindi, contiene lo stile che verrà applicato ai singoli elementi HTML. Al contrario della web-api DOM, il CSSOM non è visibile all’utente.
- Render Tree: l’albero di rendering combina gli alberi DOM e CSSOM e rappresenta ciò che effettivamente occupa spazio sullo schermo ed è visibile all’utente Attraverso degli appositi attributi none, hidden e o è possibile stabilire cosa deve essere presente nell’albero e quali elementi rendere visibili.
Nella prima fase, il browser individua le dimensioni (in pixel) di tutti nodi dell’albero di rendering e la posizione dove verrà mostrato sullo schermo.
Nella fase di paint, il browser dispone gli elementi del render tree su più livelli, al fine di “disegnare” in modo corretto ed efficace gli elementi, nel loro aspetto, nella loro posizione e nelle loro animazioni.
Nella terza fase, avviene l’effettiva rappresentazione di tutti gli elementi sullo schermo, sotto forma di pixel.
La sequenza di eventi che parte dal DOM alla fase di composition è detta percorso di rendering critico.
Rendering e posizionamento SEO: cosa devi sapere
Poiché Google considera come fattore determinante in ottica SEO anche la user experience, la resa grafica delle pagine web incide, di conseguenza, anche sul posizionamento del sito sui motori di ricerca.
I crawler di Google, infatti, leggendo il codice comprendono di cosa tratta una pagina, cosa contiene in linea generale, come è visibile agli utenti e come questi possono interagire. Se gli utenti non riescono a vedere tutti gli elementi del sito in modo corretto e/o non riescono a fruirne in maniera ottimale e veloce, è presto detto che la user experience sarà fallimentare e quindi per Google non è meritevole di punteggi elevati di Core Web Vitals.
Google, ad esempio, valuta se gli annunci riempiono la pagina, il contenuto è ben visibile oppure è nascosto dietro un clic, se il caricamento della pagina è eccessivamente lento, se i contenuti sono effettivamente visualizzati nella posizione indicata dal codice ecc.
Ecco perché è importante lavorare su un processo di rendering efficiente, al fine di ottenere risultati in tutte le metriche chiave di Google per la SEO e per la user experience. In sostanza, il rendering è connesso alla SEO perché determina il modo in cui i motori di ricerca interpretano e indicizzano le pagine di un sito.
In realtà il rendering avviene dopo l’indicizzazione: prima una pagina viene “scoperta” dai crawler attraverso link inseriti in altre pagine o mediante sitemap; poi questa pagina viene aggiunta alle pagine da sottoporre a scansione, quindi i crawler richiedono il codice sorgente della pagina web e scaricano tutti i file necessari al rendering, dopodiché viene analizzato il contenuto e la pagina viene indicizzata. Solo a questo punto la pagina viene inserita nell’elenco contenente tutte le pagina da renderizzare.
Il rendering di Google, che richiede, talvolta, anche alcune settimane, avviene in due fasi:
- Analisi HTML: viene analizzato il codice HTML per identificare i contenuti e le informazioni sulla struttura della pagina, compreso lo stile e la formattazione. Questo consente a Google di avere una visibilità generica della pagina.
- Esecuzione codice JavaScript: viene eseguito il codice JavaScript per visualizzare i contenuti dinamici della pagina e comprendere appieno una pagina e la sua forma. E’ importante che lo sviluppatore del sito garantisce che il contenuto essenziale sia visibile anche senza JavaScript, perché Google, talvolta, non è in grado di eseguire completamente il codice.
Ottimizzazione SEO: come analizzare e migliorare il rendering
Analizzare il rendering in ottica SEO significa prestare attenzione a come i contenuti vengono visualizzati, alla struttura alla formattazione e alla velocità di rendering, senza dimenticare un approfondito controllo del codice JavaScript e CSS e degli elementi dinamici che funzionino in maniera corretta e siano facilmente elaborati dai motori di ricerca. Insomma, si deve controllare che il codice sia pulito e semantico, in modo tale da facilitare il rendering ai motori di ricerca.
Attenzione: non pensare solo alla versione desktop, ma anche a quella mobile: per Google l’indicizzazione è Mobile-First, quindi assicurati che il sito sia mobile-responsive. Come? Prova Google Mobile Friendly Test, che ti mette a disposizione direttamente Big G.
Lo strumento utile per testare il rendering di Google che ti consigliamo è URL Inspection Tool di Google Search Console:
Dopo il test, aprire il codice HTML della “Crawled Page” e confrontalo con il codice HTML della pagina del tuo sito, per individuare eventuali risorse mancanti o bloccate. Queste puoi trovarle analizzando la sezione “More Info”, che ti consente di trovare risorse bloccate durante il rendering, che impediscono a Google di visualizzare nel modo corretto una pagina web.
Lo so, è un lavoro lungo e lento, ma ricordati che il rendering è uno degli elementi più importanti per il posizionamento del tuo sito!
Infine, esiste un’estensione di Google Chrome, chiamata View Rendered Source, che ti mostra come il browser renderizza l’HTML di una pagina web in un DOM perfettamente funzionante. In questo modo, puoi comprendere in che modo i motori di ricerca visualizzano le pagine del tuo sito.
In particolare puoi vedere, riga per riga di codice, le differenze tra versione HTML “grezza” (ossia inviato dal server al browser, prima del rendering) e renderizzata, ossia dopo che il codice è stato interpretato in DOM.
Insomma, come puoi migliorare il rendering di una pagina web? Tutto quello che devi fare è ottimizzare il codice sorgente, ridurre i tempi di caricamento delle pagine (utilizzando il caching e un sistema di compressione, ad esempio), diminuire l’uso di file CSS e JavaScript e, ovviamente, assicurarsi che il sito sia visualizzabile e compatibile con i browser più utilizzati.
Alcuni spunti utili puoi raccoglierli anche con lo strumento Page Speed Insights, ma per incrementare le prestazioni e migliorare il rendering in maniera definitiva, scegli Doweb: realizziamo siti web con grafica realizzata su misura e layout responsive, compatibili con tutti i dispositivi e visualizzabili in maniera completa e corretta da Google.
Hai già un sito web e vuoi un nuovo stile grafico più accattivante e ottimizzato in ottica SEO? Contattaci subito!
