Rendering e SEO: definizione e meccanismo nei motori di ricerca
Il termine rendering in inglese indica in generale la resa grafica di un progetto da parte di un disegnatore o di un architetto, ma in informatica si applica alla traduzione di un codice JavaScript in un layout visivo. Questo processo è di fondamentale importanza per quando si lavora alla creazione grafica partendo da un file compresso per semplificare il lavoro.
Questo processo si usa sia per i contenuti visivi bidimensionali che per quelli che invece vengono resi in 3D.
Prima che avvenga tutto ciò che sul PC si può vedere sono i dati grezzi, di solito riportati su dei grafici che descrivono le proprietà visive del soggetto dell’immagine o del video.
Quali sono le tecniche di rendering
La dinamica di questo processo prevede che degli engine appositi prendano le righe del codice HTML per elaborarle sotto forma di elementi grafici disposti nella pagina web.
Si può svolgere sia dal lato client ovvero dal browser di chi accede al sito che dal lato server.
La prima tecnica si indica con la sigla CSR (client-side) e la seconda invece con l’acronimo SSR (server-side).
In entrambe le tecniche il codice HTML di partenza dopo essere passato per il processo di rendering diventa un nuovo formato del documento chiamato Document Object Model (DOM). Utilizzando questa rappresentazione si può aggiornare e modificare il contenuto di una pagina web in modo rapido. Quando lo si visualizza compare sotto forma di schema ad albero.
Nel caso dell’SSR dato che è server ad elaborare la pagina partendo dall’HTML i tempi di caricamento risultano brevi e anche la SEO migliora visto che i contenuti vengono visualizzati già al completo. Invece nel caso del CSR è il browser dell’utente a dover generare la pagina e questo comporta un’attesa più lunga per visualizzare il layout finale.
Quali metriche lo definiscono in termini di prestazioni
Fare una stima di come il rendering stia funzionando richiede di conoscere gli indicatori principali e le best practice per ottimizzarne i tempi. Le metriche da tenere sotto controllo sono le seguenti:
- FCP (First Contentful Pain). Valuta la velocità con cui il layout grafico pagina web aperta diventa visibile dal lato utente, come ad esempio il testo di un articolo e le immagini incorporate. Con FCP però si intende qualsiasi tipo di contenuto, dagli elementi interattivi a video, foto e sfondi. Nel caso dell’SSR questa velocità è costante.
- TTFB (Time To First Byte). Questa metrica misura il tempo (in millisecondi) che intercorre tra quando l’utente clicca sul link di una pagina e l’elaborazione del primo bit del suo contenuto. Un alto valore di TTFB in un server-side rendering è indice di scarse prestazioni da parte del server che ospita il sito web.
- TTI (Time To Interactive). Si tratta del tempo che richiede una pagina web per diventare interattiva, successivo al momento in cui l’utente visualizza l’FCP quindi è decisamente superiore al TTFB. Anzi può arrivare a durare qualche secondo.
- INP (Interaction to Next Paint). Registra la reattività che ha una pagina web agli input che le vengono dati dall’utente. Per esempio quando si clicca su uno dei suoi elementi come un’immagine o un video per vederlo meglio l’INP corrisponde alla latenza che precede il cambio della schermata.
Il rendering e la Search Engine Optimization
Questo processo ha un grosso impatto sull’esperienza utente e la performance di un sito web. Quest’ultima è definita dagli indicatori Core Web Vitals. Ottimizzare queste metriche consente di influenzare la SEO di una pagina web dato che se presentano valori ottimali il suo ranking può migliorare vista l’importanza che Google attribuisce Google.
Se non vengono renderizzati nel modo corretto infatti anche il motore di ricerca fatica a visualizzarli.
Migliorare il processo perché caricare il layout della pagina non dia problemi richiede di tenere conto anche della presenza di utenti che navigano sul web utilizzando dispositivi obsoleti. Un esempio per risolvere queste situazioni è ricorrere al prerendering, che velocizza i tempi di caricamento effettuando un preload degli elementi di una pagina.
Dal lato utente si nota solo una maggiore velocità ma in realtà è che il codice HTML, il CSS (Cascading Style Sheets) e JavaScript vengono caricati e tenuti pronti all’uso prima del clic dell’utente. Il prerendering migliora l’indicizzazione dei siti web e il loro ranking anche se è meglio testarne il possibile impatto prima di procedere alla cieca.
Quali problematiche possono presentarsi
Come per ogni processo può capitare che si verifichino degli errori o che i file renderizzati non appaiano come dovrebbero. Ad esempio a volte Google avvisa di rimuovere le risorse che bloccano il rendering di un sito costruito con WordPress. Si tratta di elementi che durante la lettura del codice del sito precedono le righe di HTML e che possono rallentare l’esecuzione dell’intera pagina.
La lettura del codice infatti procede sempre in modo ordinato dall’alto verso il basso e non salta dei pezzi. Il risultato è che le risorse prima dell’HTML pur non essendo visibili alla fine richiedano comunque di essere scaricate per prime.
La cosa migliore quindi è metterle più in basso in moco che nel frattempo il layout grafico si mostri all’utente senza tempi morti in più.
La presenza di foto invece non rappresenta un problema per il rendering, basta che queste risultino ottimizzate per non risultare troppo pesanti. Per verificare se nella propria pagina ci siano risorse problematiche Google mette a disposizione strumenti appositi come PageSpeed Insights.
