Screaming Frog: meglio la scansione con rendering Text Only o Rendering JS?

Codice HTML vs DOM

Quando utilizzi Screaming Frog per la scansione di un sito web, puoi scegliere tra due modalità principali di rendering:

1. Rendering “Text Only”
2. Rendering “JavaScript” (JS)

Nel contesto del web, il rendering si riferisce alla generazione di una pagina web visualizzabile da parte di un browser, partendo dal codice HTML, CSS e JavaScript ricevuto dal server.

Ogni modalità ha i suoi vantaggi e svantaggi, e la scelta dipende dalle specifiche esigenze SEO e dalla struttura del sito web. Di seguito, un’analisi dettagliata delle differenze e delle implicazioni di ciascun metodo.

Per comprendere meglio la differenza tra la scansione “Text Only” e quella con rendering “JavaScript” (JS) in Screaming Frog, è utile avere una chiara comprensione di due concetti fondamentali del web di cui avevo parlato in un’altra guida: la differenza tra codice HTML e DOM.

• Codice HTML: Il codice HTML (HyperText Markup Language) è il linguaggio di markup utilizzato per strutturare i contenuti di una pagina web. Contiene elementi come titoli, paragrafi, immagini, e link che definiscono la struttura e il contenuto base della pagina. In pratica è il puro file HTML inviato dal web server al client.
• DOM (Document Object Model): Il DOM è una rappresentazione strutturata del contenuto di una pagina web. Quando una pagina HTML viene caricata in un browser, questo crea un modello DOM che può essere manipolato dinamicamente tramite JavaScript. Il DOM rappresenta non solo l’HTML iniziale, ma anche qualsiasi contenuto aggiunto, modificato o rimosso da JavaScript.

Rendering “Text Only”

Funzionamento

La scansione “Text Only” di Screaming Frog scarica e analizza solo il contenuto HTML statico del sito, senza eseguire JavaScript. Questo significa che Screaming Frog legge solo il codice sorgente HTML iniziale servito dal web server.

Vantaggi

• Velocità di Scansione: Poiché non deve eseguire JavaScript, la scansione è significativamente più veloce e consuma meno risorse di sistema.
• Basso Impatto sul Server: Meno richieste e meno carico computazionale sul server del sito web.
• Semplicità di Analisi: Ideale per siti statici o per pagine in cui il contenuto principale è servito direttamente nell’HTML iniziale.

Svantaggi

• Contenuto Dinamico Non Rilevato: Qualsiasi contenuto caricato tramite JavaScript non verrà scansionato. Questo include contenuti caricati in modo asincrono (AJAX), elementi interattivi, o modifiche dinamiche del DOM.
• Limitazioni su Pagine Moderne: Molti siti moderni utilizzano JavaScript per caricare contenuti cruciali, quindi questa modalità potrebbe non rilevare interamente il contenuto delle pagine.

Applicazioni

• Siti Statici: Siti in cui tutto il contenuto è direttamente disponibile nel HTML iniziale.
• Verifica di Base: Scansioni preliminari per ottenere una panoramica rapida del sito.

Rendering “JavaScript” (JS)

Funzionamento

La scansione con rendering JavaScript esegue il codice JavaScript delle pagine utilizzando un headless browser, un motore di rendering basato su Chromium, simile a come farebbe un browser classico. Questo permette di vedere e scansionare il contenuto dinamico generato o modificato da JavaScript, come lo vedrebbe un utente.

Vantaggi

• Contenuto Completo: Permette di scansionare tutto il contenuto generato dinamicamente, inclusi gli elementi caricati asincronamente e le modifiche del DOM.
• Rendering Realistico: Fornisce una visione più realistica di come i motori di ricerca (come Google) vedono il sito, poiché anche Google utilizza il rendering JS.
• Supporto per Siti Moderni: Essenziale per SPA (Single Page Applications) e siti che utilizzano pesantemente framework JS come React, Angular, o Vue.js.

Svantaggi

• Lentezza di Scansione: La necessità di eseguire JavaScript rallenta significativamente la scansione e aumenta il consumo di risorse di sistema.
• Maggiore Impatto sul Server: Più richieste e un carico computazionale maggiore possono stressare il server del sito web.
• Configurazione Complessa: Richiede una configurazione più attenta e una gestione delle risorse del sistema più accurata.

Applicazioni

• Siti Dinamici: Siti che caricano contenuti critici tramite JavaScript, come le SPA.
• Analisi Avanzate: Scansioni complete per ottenere una visione dettagliata del sito, incluso il contenuto generato dinamicamente.

Confronto Dettagliato

Quando Utilizzare “Text Only”

• Siti Statici: Se il sito è principalmente statico o serve tutto il contenuto nel HTML iniziale, “Text Only” è sufficiente e molto più veloce.
• Analisi Preliminari: Per una scansione rapida e per ottenere una panoramica generale del sito.

Quando Utilizzare “JavaScript”

• Siti Dinamici e SPA: Se il sito utilizza JavaScript per caricare contenuti cruciali, è necessario utilizzare il rendering JS per ottenere un’analisi completa.
• Verifica SEO Completa: Per assicurarsi che tutti i contenuti, inclusi quelli generati dinamicamente, siano scansionati e indicizzabili dai motori di ricerca.

Suggerimenti per l’Utilizzo di Rendering JS

• Ottimizza le Risorse: Aumenta la memoria disponibile per Screaming Frog e utilizza un computer con una buona capacità di calcolo.
• Configura Adeguatamente: Regola il numero di thread di rendering e imposta timeout e ritardi appropriati per evitare di sovraccaricare il server.
• Segmenta la Scansione: Dividi la scansione in segmenti più piccoli o esegui scansioni incrementali per migliorare l’efficienza.

La scelta tra “Text Only” e “Rendering JS” dipende dalla natura del sito web e dagli obiettivi della scansione. Per una visione completa e accurata di siti moderni e dinamici, il rendering JS è essenziale, mentre per siti statici o per analisi preliminari, il rendering “Text Only” è più efficiente e veloce.

Come capire che modalità usare?

Per capire rapidamente se è necessario eseguire una scansione “Text Only” o con rendering JavaScript (JS) su un sito web, puoi seguire queste procedure:

Verifica della Struttura del Sito

• Analizza il Sito Manualmente: Visita alcune pagine chiave del sito web e osserva come vengono caricati i contenuti.
  • Contenuto Statico: Se il contenuto principale (testo, immagini, link) è visibile subito al caricamento della pagina senza bisogno di ulteriori azioni, è probabile che una scansione “Text Only” sia sufficiente.
  • Contenuto Dinamico: Se vedi che i contenuti si caricano dopo qualche istante o in risposta a interazioni (scroll, clic), o se la pagina utilizza framework come React, Angular, o Vue.js, è probabile che sia necessario il rendering JS.
  • Disabilita JS nel browser: Potresi anche disattivare JS nel browser e verificare se vedi tutto il contenuto o solo una parte.

Utilizzo degli Strumenti del Browser

• Visualizza il Codice Sorgente HTML:
  • Fai clic con il tasto destro su una pagina e seleziona “Visualizza codice sorgente“.
  • Controlla se il contenuto principale è presente nell’HTML. Se è visibile, una scansione “Text Only” può essere sufficiente.
• Ispeziona Elemento (DOM):
  • Fai clic con il tasto destro su una pagina e seleziona “Ispeziona elemento“.
  • Controlla il DOM attuale. Se vedi che il contenuto principale è generato o modificato da JavaScript, dovrai eseguire una scansione con rendering JS.

Esempio di Test Semplice con Screaming Frog

• Esegui una Scansione “Text Only”:
  • Configura Screaming Frog per una scansione “Text Only” (Configura > Spider > Rendering > Text Only).
  • Scansiona il sito e verifica i risultati.
  • Se il contenuto rilevante è presente nei risultati, una scansione “Text Only” è sufficiente.
• Esegui una Scansione di Test con Rendering JS:
  • Configura Screaming Frog per il rendering JS (Configura > Spider > Rendering > JavaScript).
  • Scansiona una o due pagine chiave del sito e confronta i risultati con la scansione “Text Only”.
  • Se vedi differenze significative nel contenuto rilevato, come elementi mancanti nella scansione “Text Only”, allora è necessario il rendering JS.

Indicatori per Determinare la Necessità del Rendering JS

• Framework JS: Se il sito utilizza framework JS come React, Angular, Vue.js, è molto probabile che il rendering JS sia necessario.
• Caricamento Dinamico del Contenuto: Contenuti che si caricano tramite AJAX o altre tecniche di caricamento asincrono richiedono il rendering JS.
• Pagine SPA (Single Page Applications): Le SPA, dove la navigazione e il caricamento del contenuto avvengono senza ricaricare l’intera pagina, necessitano del rendering JS per una scansione completa.
• Elementi Interattivi: Contenuti che appaiono dopo interazioni dell’utente, come clic, scrolling, o altre azioni dinamiche, indicano la necessità di una scansione con rendering JS.

Seguendo queste procedure, puoi determinare facilmente se hai bisogno di eseguire una scansione “Text Only” o con rendering JavaScript. Effettuare una scansione preliminare e confrontare i risultati tra le due modalità può fornire una chiara indicazione delle esigenze specifiche del sito web.

La scansione JS è più lenta

Quando utilizzi Screaming Frog per scansionare un sito web con rendering JavaScript (JS), la scansione può essere più lenta rispetto alla modalità “text only” a causa della necessità di eseguire e renderizzare il contenuto dinamico generato da JavaScript. Tuttavia, ci sono alcune strategie che puoi adottare per velocizzare la scansione con rendering JS:

Strategie per Velocizzare la Scansione JS

Ottimizzare le Risorse del Sistema

• Aumentare la Memoria: Assicurati che il tuo sistema abbia abbastanza memoria RAM. Puoi aumentare la memoria disponibile per Screaming Frog dalle impostazioni dell’applicazione (Configura > Sistema > Memoria).
• Utilizzare un Computer Più Potente: Se possibile, esegui la scansione su una macchina con CPU più veloce e più core.

Configurare le Impostazioni di Screaming Frog

• Aumentare i Thread di Rendering: Aumenta il numero di thread utilizzati per il rendering JS (Configura > Spider > Avanzato > Rendering > Thread di rendering). Tieni presente che aumentare troppo i thread può portare a un utilizzo elevato delle risorse e a potenziali crash.
• Limita la Profondità di Scansione: Riduci la profondità massima della scansione se non è necessario esaminare tutte le pagine (Configura > Spider > Limiti).
• Configura Timeout e Ritardi: Imposta timeout più brevi per il caricamento delle pagine (Configura > Spider > Avanzato > Timeout di connessione). Puoi anche configurare ritardi tra le richieste per ridurre la pressione sul server (Configura > Spider > Avanzato > Ritardi).

Ottimizzare il Sito Web

• Ridurre il Carico di JS: Ottimizza il codice JavaScript del sito per ridurre il tempo di esecuzione. Minimizza e combina file JS, elimina JS non necessari, e utilizza tecniche di lazy loading.
• Utilizzare il Server-Side Rendering (SSR): Implementa il rendering lato server per le pagine critiche, così il contenuto principale è già disponibile nel HTML iniziale senza bisogno di eseguire JS.

Segmentare la Scansione

• Scansioni Incrementali: Esegui la scansione del sito in segmenti più piccoli, concentrandoti su sezioni specifiche del sito, per poi combinare i risultati.
• Scansioni Programmate: Pianifica scansioni fuori dagli orari di picco per ridurre il carico sul server e migliorare le prestazioni di scansione.

Implementazione di Alcune Strategie

Aumentare i Thread di Rendering

Config > Speed

Aumenta gradualmente il numero di thread di rendering fino a trovare un equilibrio tra velocità e stabilità.

Configurare il Timeout

Config > Spider > Advanced > Response Timeout

Imposta un timeout più breve, ad esempio 10-15 secondi, e ritarda tra le richieste di 100-200ms per ridurre la pressione sul server.

Utilizzare il Server-Side Rendering (SSR)

Implementa il server side rendering (SSR) nel tuo sito per generare contenuti HTML lato server. Framework come Next.js per React o Nuxt.js per Vue.js possono aiutarti con questa implementazione.

Velocizzare la scansione JS con Screaming Frog richiede una combinazione di ottimizzazione delle risorse del sistema, configurazioni di Screaming Frog, e potenziali modifiche al sito web stesso. Utilizza queste strategie per migliorare le prestazioni di scansione mantenendo una copertura completa del tuo sito web.