UX & Coding
I migliori Libri WordPress da leggere nel 2024  SCOPRI > 

Prerendering delle pagine in Chrome per navigazioni immediate

"Il prerendering in Google Chrome ottimizza le prestazioni, consentendo caricamenti quasi istantanei delle pagine per una navigazione più veloce"

Il team di Chrome sta attualmente impegnandosi nello sviluppo di soluzioni volte a ripristinare il prerendering completo delle pagine future che è probabile vengano visitate da un utente.

Una delle aree chiave di sviluppo è focalizzata sull’implementazione di meccanismi di rendering più efficienti, che consentano una visualizzazione rapida e fluida delle pagine web. L’obiettivo è migliorare la velocità di caricamento delle pagine e ridurre al minimo il tempo di attesa degli utenti durante la navigazione.

Questo impegno nel perfezionare le funzionalità di prerendering e rendering è parte integrante della missione del team di Chrome nel fornire un browser sempre più veloce, sicuro ed efficiente per milioni di utenti in tutto il mondo.

Origini del prerendering

In passato, Chrome supportava l’indicazione per la risorsa <link rel="prerender" href="/next-page/">, ma questa pratica non era ampiamente diffusa al di fuori dell’ambiente Chrome e non costituiva un’API particolarmente dettagliata.

Il suggerimento di prerendering tramite il tag rel=prerender è stato abbandonato in favore di NoState Prefetch che recuperava le risorse necessarie per la pagina futura, senza eseguire completamente il prerendering né il codice JavaScript.

Sebbene NoState Prefetch contribuisse a ottimizzare le prestazioni della pagina attraverso un miglior caricamento delle risorse, non garantiva un caricamento istantaneo come il prerendering completo.

Come avviene il precaricamento di una pagina

Una pagina può essere sottoposta al prerendering in uno dei seguenti modi, con l’obiettivo di accelerare la navigazione:

  • quando viene inserito un URL nella barra degli indirizzi di Chrome (conosciuta anche come “omnibox“), Chrome potrebbe eseguire automaticamente il prerendering della pagina se è molto probabile che verrà visitata rispetto ad altre
  • se l’utente digita un termine nella omnibox di Chrome, il prerendering potrebbe essere automaticamente eseguito per la pagina dei risultati di ricerca, su richiesta del motore di ricerca
  • i siti possono impiegare l’API Speculation Rules per indicare in modo programmato a Chrome quali pagine sottoporre al prerendering: questo metodo sostituisce l’uso di <link rel="prerender"...> e consente ai siti di attivare il prerendering proattivo sulla base di speculation rules

In ciascuna di queste situazioni, il prerendering simula l’apertura di una pagina in una scheda in background invisibile e la “attiva” sostituendo la scheda in primo piano con quella prerenderizzata. Se una pagina viene attivata prima del completamento del prerendering, continua a caricarsi normalmente.

Visualizzazione nella barra degli indirizzi

Il funzionamento predittivo del browser Chrome si basa su una tabella visualizzabile attraverso la semplice visita a chrome://predictors.

Prerendering Chrome browser
Elenco delle pagine che potrebbero essere visitate su Google Chrome

La tabella mostra l’elenco degli URL e la loro probabilità di essere visitati e linee verdi indicano un’affidabilità sufficiente per attivare il prerendering.

Nell’esempio sopra, la digitazione di “s” fornisce un livello di sicurezza ragionevole, ma dopo la digitazione di “sh”, Chrome ha un livello di sicurezza sufficiente e si viene quasi sempre indirizzato alla pagina https://sheets.google.com.

Questi predittori sono anche quelli che determinano le opzioni suggerite nella barra degli indirizzi.

Prerendering Chrome barra indirizzi
  • per un livello di confidenza superiore al 50% , Chrome si precollega in modo proattivo al dominio, ma non esegue il prerendering della pagina
  • per un livello di confidenza superiore all’80% , il browser eseguirà il prerendering dell’URL

Impatto sulla velocità di esecuzione

Il prerendering offre la possibilità di ottenere un caricamento della pagina quasi istantaneo, ed è evidente come possa migliorare ulteriormente l’esperienza dell’utente.

Questo miglioramento può influire direttamente sui Core Web Vitals, con un valore LCP quasi pari a zero, una riduzione del CLS (dato che qualsiasi spostamento del layout cumulativo avviene prima della visualizzazione iniziale) e un miglioramento del FID (poiché il caricamento deve essere completato prima che l’utente possa interagire).

Prerendering esempio
Esempio di pagina soggetta a prerendering su web.dev

È importante sottolineare che, sebbene il prerendering offra notevoli vantaggi in termini di esperienza utente, utilizza memoria e larghezza di banda di rete aggiuntive. Pertanto, è consigliabile esercitare cautela nella sua esecuzione e non eccedere nell’uso di risorse a discapito degli utenti.

Il suo impiego dovrebbe essere valutato solo quando vi è un’alta probabilità che la pagina in questione venga visitata.

Integrare le speculation rules

Possono essere posizionate sia nell’elemento <head> che nel <body>: tali regole non saranno applicate nei frame secondari e vengono eseguite solo dopo l’attivazione della pagina.

Sintassi di inclusione

Per integrare le speculation rules è sufficiente inserire una semplice sintassi che deve elencare il metodo di precaricamento e la lista degli URL sottoposti alla scansione del browser:

<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>

Possono essere utilizzate anche per precaricare soltanto le pagine, senza un prerendering completo. Spesso questo può essere un ottimo passo verso il l’ottimizzazione dell’esperienza:

<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>

Inclusione statica nel codice HTML della pagina

Questa metodologia prevede l’inserimento statico delle regole di speculazione direttamente nel codice HTML della pagina.

Ad esempio, un sito di notizie o un blog potrebbe optare per il prerendering dell’articolo più recente, considerando che questo rappresenta spesso la navigazione successiva per una significativa percentuale di utenti.

Inserimento dinamico attraverso JavaScript

Possono essere aggiunte dinamicamente nella pagina mediante l’uso di JavaScript: questo approccio può basarsi sulla logica dell’applicazione, essere personalizzato in base alle preferenze dell’utente o essere attivato da specifiche azioni come il passaggio del mouse o il clic su un link.

Molte librerie hanno adottato un approccio simile in passato fornendo nativamente funzionalità come preconnect o prefetch o la versione precedente NoState Prefetch prerender.

Regole di funzionamento

Le speculation rules funzionano esclusivamente nelle navigazioni delle pagine complete gestite dal browser e non sono compatibili con le architetture delle pagine delle app a singola pagina (SPA) o con le architetture app shell.

In queste configurazioni, le navigazioni non si basano su recuperi completi di documenti, ma piuttosto su recuperi parziali o di dati tramite API, i quali vengono successivamente elaborati e presentati nella pagina corrente.

Per le cosiddette “navigazioni soft”, in cui si eseguono recuperi parziali o di dati, è possibile precaricare i dati necessari dall’app al di fuori delle regole di speculazione, ma non è possibile sottoporre tali pagine a prerendering.

Metodologie di debug e controllo

Il debug delle speculation rules all’interno di un browser come Chrome può essere complesso, in quanto coinvolge il comportamento interno del browser stesso. Tuttavia, è possibile utilizzare alcune tecniche per comprendere meglio quando e come vengono applicate queste regole. Ecco alcuni suggerimenti:

Console di sviluppo (DevTools)
Utilizzando gli strumenti di sviluppo del browser, come la console di Chrome DevTools, per monitorare eventuali messaggi di debug o avvisi relativi al prerendering cercando informazioni utili sull’attivazione o sugli eventuali problemi incontrati
Debug speculation rules
API di prestazioni
È possibile utilizzare l’API performance per misurare il tempo di caricamento delle pagine o individuare eventuali attività di prerendering
Flag di Chrome
Chrome potrebbe avere flag specifici che consentono di attivare o disattivare funzionalità sperimentali, inclusi i comportamenti relativi al prerendering verificabili accedendo all’opzione chrome://flags/ e cercando opzioni legate al prerendering o alle speculation rules
Eventi di caricamento della pagina
Sfruttando gli eventi disponibili come DOMContentLoaded o load per eseguire codice JavaScript personalizzato che fornisca informazioni sullo stato di prerendering

Google fornisce una guida molto dettagliata sulle possibilità di controllo di questa funzionalità e descrive i metodi di ispezione.

In generale il debug delle speculation rules può richiedere un approccio di tipo sperimentale e potrebbe essere limitato dalle possibilità di accesso e controllo da parte degli sviluppatori rispetto al comportamento interno del browser.

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.