La guida del marketer al rendering lato server

Il linguaggio di programmazione non è un concetto facile da comprendere, soprattutto quando il tuo lavoro SEO si è concentrato principalmente sul lato non tecnico. Ma ecco il problema della SEO tecnica: la sua conoscenza ti aiuta a capire i cambiamenti che il tuo sito web deve apportare per un migliore posizionamento sui motori di ricerca.
Poiché Google ha lanciato Core Web Vitals a giugno, che fa parte del suo aggiornamento Page Experience, ogni marketer che non ha esaminato più da vicino la SEO tecnica vorrà farlo ora.
E quando il tuo sito web è basato su framework JavaScript, una parte su cui approfondire è il rendering lato server.

Che cos'è il rendering lato server?

Il rendering lato server è quando il processo di recupero di una pagina Web, acquisizione del codice, visualizzazione dei contenuti su uno schermo: tutto avviene sul server.
In SSR:

• Il server invia una risposta pronta per il rendering al browser;
• Il browser esegue il rendering della pagina, rendendola pronta per essere visualizzata e quindi il browser scarica il JavaScript;
• Il browser esegue quindi React quando la pagina è pronta per essere visualizzata e
• La pagina web è quindi pronta per l'interattività.

Il modo in cui tutto accade lo ha reso un'opzione migliore per altri tipi di rendering: rendering lato client (in cui JavaScript viene visualizzato dal browser, noto anche come client) e rendering dinamico (in cui gli utenti ottengono contenuti resi client-server e motori di ricerca ottenere contenuto renderizzato lato server). Anche Google incoraggia gli sviluppatori web a scegliere il rendering lato server.
Come mai?

[Case Study] Gestione della scansione dei bot di Google

Con oltre 26.000 referenze di prodotti, 1001Pneus aveva bisogno di uno strumento affidabile per monitorare le proprie prestazioni SEO ed essere sicuro che Google stesse dedicando il proprio crawl budget alle categorie e alle pagine giuste. Scopri come gestire con successo il crawl budget per i siti di e-commerce con OnCrawl.

Leggi il caso di studio

I vantaggi dell'SSR

• Aiuta a caricare una pagina Web quando la connessione Internet di un utente è lenta
• Consente un caricamento rapido delle pagine, contribuendo a una migliore esperienza utente
• Crea una pagina HTML completa, impedendo il lungo processo di recupero dei dati
• Consente di caricare le pagine, con tutti i suoi elementi, anche quando un utente ha un dispositivo sottodimensionato, come uno smartphone di vecchia generazione
• Contribuisce alle prestazioni SEO perché consente ai motori di ricerca di eseguire la scansione e l'indicizzazione delle pagine in modo accurato; i bot possono eseguire facilmente la scansione delle pagine poiché comprendono JS

Nel complesso, SSR ti aiuta a servire meglio i clienti online perché i visitatori del tuo sito non aspetteranno che le pagine vengano visualizzate sui loro dispositivi. Le rapide transizioni di pagina assicurano inoltre che i tuoi utenti non ricevano mai una pagina vuota, consentendo loro di utilizzare immediatamente il tuo sito.
Poiché Google sta potenziando la sua campagna per fornire risultati più accurati con miglioramenti dell'algoritmo basati sull'esperienza dell'utente, l'SSR è migliore per le prestazioni SEO rispetto al rendering client-server.
Ma come tutto il resto nel marketing digitale, un approccio singolare raramente funziona per tutti. In alcuni casi, il rendering lato server potrebbe essere un problema. Come dice Google, SSR "non è un proiettile d'argento".

Gli svantaggi dell'SSR

• Richiede molto lavoro perché esegue la stessa applicazione due volte: una sul client e poi sul server.
• Potrebbe ritardare il tempo al primo byte
• Potrebbe influire sui collegamenti interni o sulla qualità della pagina poiché non può eseguire il rendering di JS di terze parti (ad es. contenuto generato dagli utenti, recensioni di prodotti, ecc.) o qualsiasi contenuto non nel tuo HTML statico; i bot non saranno in grado di vederli
• Gli URL che non vengono aggiornati potrebbero significare che i bot non saranno in grado di vedere i nuovi articoli, il che potrebbe comportare una perdita di traffico

Un altro aspetto chiave di SSR è che significa costi per l'azienda poiché il rendering avviene sui server. Ma è un costo su cui potresti voler investire perché questo tipo di rendering potrebbe contribuire all'ottimizzazione di Core Web Vitals.

Perché l'SSR è rilevante per CWV?

Sviluppatori Web e SEO stanno lavorando da mesi in attesa del lancio di CWV. Circa il 60 percento delle agenzie SEO intervistate è stato impegnato a migliorare i punteggi CWV dei clienti. Se stai usando SSR, potresti non dover fare un lavoro sostanziale per soddisfare le aspettative.
Poiché SSR facilita la velocità, il tuo sito Web potrebbe già funzionare bene con una delle metriche: il Largest Contentful Paint (LCP).
LCP si concentra sull'esperienza di carico percepita. Misura il tempo di caricamento della pagina quando l'immagine o il testo più grande di una pagina Web è visibile nel viewport. Quello a cui vuoi puntare per ottenere un buon punteggio è un caricamento della pagina del 75% a <2,5 secondi.
Le principali sfide per ottenere un buon LCP sono JS e CSS che bloccano il rendering; tempi di caricamento delle risorse lenti, risposta del server lenta e rendering lato client.
Il passaggio a SSR è solo una delle soluzioni per migliorare il punteggio LCP perché il tuo problema potrebbe non essere limitato alla CSR. Ti consigliamo di collaborare con i tuoi sviluppatori web per identificare prima cosa causa il ritardo del tuo LCP.
Se il sorgente della pagina rivela codice che non ha senso (e il tuo sviluppatore te lo dirà), il problema potrebbe essere CSR. Se il tuo sviluppatore scopre che TTFB è scadente, potresti avere a che fare con tempi di risposta del server lenti.
Le altre metriche CWV sono:

• First Input Delay, che si concentra sulla reattività e
• Spostamento cumulativo del layout, che si concentra sulla stabilità visiva.

Entrambi non sono rilevanti per SSR, quindi queste sono metriche in cui potresti voler dedicare più sforzi poiché SSR si occupa in parte dell'LCP.

Come sapere se SSR sta eseguendo il rendering delle pagine Web correttamente

Il modo migliore per sapere se SSR sta visualizzando correttamente le tue pagine sarebbe utilizzare gli strumenti. Uno di questi è il Mobile Friendly Test. È uno strumento che ti fornisce un'istantanea di come apparirebbero le tue pagine web a Googlebots e ti mostra eventuali errori durante il rendering.
Google Search Console ha anche uno strumento di ispezione degli URL che ti consente di vedere se il motore di ricerca sta visualizzando le tue pagine. Usalo per verificare la presenza di contenuti mancanti o errori relativi a JavaScript o CSS bloccati.
Puoi anche andare su Visualizza sorgente di rendering, che è un'estensione gratuita di Chrome. Ti dirà come il browser esegue il rendering di una pagina dal suo HTML originale a un DOM funzionante. L'estensione illustrerà la differenza tra una versione grezza e quella renderizzata, evidenziando come il JS ha modificato le pagine al momento del rendering.
Un'altra estensione di Chrome da provare è SiteCrawler. Il crawler compatibile con JS esegue la scansione di mappe del sito, collegamenti e immagini e confronta le pagine solo HTML e abilitate per JS.

La conclusione

Gran parte del lavoro SEO comporta l'ottimizzazione per le pagine che sono già state "consegnate" al cliente o al browser. Ma quando esamini come quelle pagine "arrivano" al cliente e come puoi migliorare il modo in cui ciò accade, gli utenti si divertono meglio sul tuo sito web.
I bot scansionano correttamente le tue pagine. Le tue pagine vengono indicizzate. Il tuo sito ha un miglior posizionamento sui motori di ricerca.
Gli aggiornamenti dei motori di ricerca insieme ai cambiamenti nel comportamento dei consumatori richiedono modifiche anche al tuo sito web. Con l'imminente lancio di CWV, ora sarebbe un buon momento per esaminare l'SSR, un aspetto tecnico che influenzerebbe i tuoi sforzi SEO.