Le regole di speculazione possono essere utilizzate per precaricare e prerendering le navigazioni nelle pagine successive, come descritto nel post precedente. Ciò può consentire un caricamento delle pagine molto più rapido, o anche istantaneo, migliorando notevolmente i Segnali web essenziali per queste navigazioni aggiuntive nelle pagine.
Il debug delle regole di speculazione può essere complicato. Questo è particolarmente vero per le pagine sottoposte a prerendering, poiché queste pagine vengono visualizzate in un renderer separato, un po' come una scheda in background nascosta che sostituisce la scheda corrente quando è attivata. Di conseguenza, non è sempre possibile utilizzare le consuete opzioni di DevTools per eseguire il debug dei problemi.
Il team di Chrome si è impegnato a fondo per migliorare il supporto di DevTools per il debug delle regole di speculazione. In questo post scoprirai tutti i vari modi in cui vengono utilizzati questi strumenti per comprendere le regole di speculazione di una pagina, perché potrebbero non funzionare, quando gli sviluppatori possono utilizzare le opzioni DevTools più familiari e quando non lo sono.
Spiegazione dei termini "pre-"
Ci sono molti termini "pre-" che possono essere facilmente confusi, quindi iniziamo con una spiegazione di questi termini:
- Prefetch: recupero di una risorsa o di un documento in anticipo per migliorare le prestazioni future. Questo post spiega il precaricamento dei documenti utilizzando l'API Speculation Rules, anziché l'opzione
<link rel="prefetch">simile, ma precedente, spesso utilizzata per il precaricamento delle risorse secondarie. - Prerendering: questa procedura va oltre il precaricamento e mostra l'intera pagina come se l'utente vi avesse raggiunto, ma la mantiene in un processo di rendering in background nascosto e pronto per essere utilizzato nel caso in cui l'utente vi acceda effettivamente. Anche in questo caso, il documento riguarda la versione più recente dell'API Speculation Rules anziché la precedente opzione
<link rel="prerender">(che non esegue più un prerendering completo). - Speculazioni di navigazione: il termine collettivo per le nuove opzioni di precaricamento e prerendering attivate dalle regole di speculazione.
- Precarica: un termine sovraccarico che può fare riferimento a una serie di tecnologie e processi, tra cui
<link rel="preload">, lo scanner di precaricamento e precaricamenti di navigazione dei service worker. Questi elementi non verranno inclusi qui, ma il termine è incluso per distinguere chiaramente questi termini dal termine "speculazioni navigabili".
Regole di speculazione per prefetch
Le regole di speculazione possono essere utilizzate per precaricare il documento della navigazione successiva. Ad esempio, quando inserisci il seguente JSON in una pagina, i valori next.html e next2.html verranno precaricati:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
L'utilizzo di regole di speculazione per il precaricamento di navigazione presenta alcuni vantaggi rispetto alla sintassi <link rel="prefetch"> precedente, ad esempio un'API più espressiva e i risultati vengono archiviati nella cache della memoria anziché nella cache del disco HTTP.
Debug di prefetch regole di speculazione
I precaricamenti attivati dalle regole di speculazione possono essere visualizzati nel riquadro Rete come avviene per gli altri recuperi:
Le due richieste evidenziate in rosso sono le risorse precaricate, come puoi vedere dalla colonna Tipo. Queste vengono recuperate con priorità Lowest perché per le navigazioni future e Chrome dà la priorità alle risorse della pagina corrente.
Facendo clic su una delle righe viene visualizzata anche l'intestazione HTTP Sec-Purpose: prefetch, che indica come è possibile identificare queste richieste sul lato server:
Debug di prefetch con le schede di caricamento speculativo
È stata aggiunta una nuova sezione Caricamenti speculativi nel riquadro Applicazione di Chrome DevTools, nella sezione Servizi in background, per contribuire a eseguire il debug delle regole di speculazione:
In questa sezione sono disponibili tre schede:
- Caricamenti speculativi che elenca lo stato sottoposto a prerendering della pagina corrente.
- Regole, che elenca tutte le serie di regole presenti nella pagina corrente.
- Speculazioni che elenca tutti gli URL precaricati e sottoposti a prerendering provenienti dalle serie di regole.
La scheda Speculazioni è mostrata nello screenshot precedente e puoi notare che questa pagina di esempio ha un singolo insieme di regole di speculazione per il precaricamento di tre pagine. Due di questi precaricamenti sono andati a buon fine e uno non è andato a buon fine. Puoi fare clic sull'icona accanto a Serie di regole per accedere all'origine della serie nel riquadro Elementi. In alternativa, puoi fare clic sul link Stato per accedere alla scheda Speculazioni filtrata in base a quel set di regole.
Nella scheda Speculazioni sono elencati tutti gli URL di destinazione, l'azione (precaricamento o prerendering), il set di regole da cui provengono (poiché potrebbero essere presenti più URL in una pagina) e lo stato di ogni speculazione:
Sopra gli URL, è possibile utilizzare un menu a discesa per visualizzare gli URL di tutte le serie di regole o solo gli URL di una determinata serie. Sotto sono elencati tutti gli URL. Facendo clic su un URL, otterrai informazioni più dettagliate.
In questo screenshot possiamo vedere il motivo dell'errore per la pagina next3.html (che non esiste e restituisce pertanto un codice 404, ovvero un codice di stato HTTP non 2xx).
La scheda di riepilogo, Caricamenti speculativi, mostra un report sullo stato di caricamento speculativo per questa pagina per mostrare se per la pagina è stato utilizzato o meno un precaricamento o un prerendering.
Per una pagina precaricata, dovresti visualizzare un messaggio di operazione riuscita quando si apre la pagina:
Speculazioni senza pari
Quando una navigazione avviene da una pagina con regole di speculazione che non comporta l'utilizzo di un precaricamento o di un prerendering, un'ulteriore sezione della scheda mostrerà maggiori dettagli sul motivo per cui l'URL non corrisponde a nessuno degli URL di speculazione. Questo è utile per individuare gli errori di battitura nelle regole di speculazione.
Ad esempio, qui abbiamo raggiunto next4.html, ma solo next.html, next2.html o next3.html sono precaricamenti, quindi possiamo vedere che non corrisponde a nessuna di queste tre regole.
Le schede Caricamenti speculativi sono molto utili per il debug delle regole di speculazione stesse e per trovare eventuali errori di sintassi nel codice JSON.
Per quanto riguarda i precaricamenti, il riquadro Network è probabilmente più familiare. Per l'esempio di errore di precaricamento, puoi vedere l'errore 404 per il precaricamento qui:
Tuttavia, le schede Caricamenti speculativi diventano molto più utili per il prerendering delle regole di speculazione, di cui parleremo di seguito.
Regole di speculazione per prerender
Le regole di speculazione di prerendering seguono la stessa sintassi delle regole di speculazione di precaricamento. Ad esempio:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Questa serie di regole attiva il caricamento completo e il rendering delle pagine specificate (soggette a determinate limitazioni). Ciò può fornire un'esperienza di caricamento istantaneo, anche se comporta costi di risorse aggiuntivi.
Tuttavia, a differenza dei precaricamenti, questi non possono essere visualizzati nel riquadro Rete, in quanto vengono recuperati e visualizzati in un processo di rendering separato in Chrome. In questo modo le schede Caricamenti speculativi sono più importanti per il debug delle regole di speculazione di prerendering.
Debug di prerender con le schede dei caricamenti speculativi
Le stesse schermate di caricamenti speculativi possono essere utilizzate per le regole di speculazione di prerendering, come mostrato con una pagina demo simile che tenta di eseguire il prerendering delle tre pagine:
Qui possiamo nuovamente vedere che uno dei tre URL non è riuscito a eseguire il prerendering e gli sviluppatori possono ottenere i dettagli per URL nella scheda Speculazioni facendo clic sul link 2 Pronto, 1 errore.
In Chrome 121 abbiamo lanciato il supporto per le regole per i documenti. In questo modo il browser può scegliere questi link dagli stessi link di origine sulla pagina, anziché elencare un insieme specifico di URL:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
In questo esempio vengono selezionati tutti i link di origine, ad eccezione di quelli che iniziano con /not-safe-to-prerender come candidati di prerendering.
Inoltre, imposta il prerendering eagerness su moderate, il che significa che le navigazioni vengono sottoposte a prerendering quando si passa il mouse sopra il link o si fa clic.
Esistono regole simili come questa in questo sito dimostrativo e l'utilizzo della nuova sezione Caricamenti speculativi su questo sito mostra l'utilità di questa nuova scheda poiché sono elencati tutti gli URL idonei che il browser ha trovato nella pagina:
Lo Stato è Non attivato perché il processo di prerendering non è stato avviato. Tuttavia, passando il mouse sopra i link, notiamo che lo stato cambia man mano che viene eseguito il prerendering di ogni URL:
Chrome ha impostato dei limiti per i prerendering, inclusi un massimo di 2 prerendering per l'entusiasmo di moderate. Quindi, dopo aver passato il mouse sopra il terzo link, vediamo il motivo dell'errore per quell'URL:
Debug di prerender con gli altri riquadri di DevTools
A differenza dei precaricamenti, le pagine sottoposte a prerendering non vengono visualizzate negli attuali processi di rendering nei riquadri DevTools come il riquadro Rete, in quanto il rendering viene eseguito nel relativo renderer dietro le quinte.
Tuttavia, ora è possibile cambiare il renderer utilizzato dai pannelli DevTools utilizzando il menu a discesa nell'elenco a discesa in alto a destra oppure selezionando un URL nella parte superiore del riquadro e scegliendo Ispeziona:
Questo menu a discesa (e il valore selezionato) viene condiviso anche tra tutti gli altri riquadri, ad esempio il riquadro Rete, dove puoi vedere che la pagina richiesta è quella sottoposta a prerendering:
Se diamo un'occhiata alle intestazioni HTTP di queste risorse, possiamo vedere che saranno tutte impostate con l'intestazione Sec-Purpose: prefetch;prerender:
Oppure nel riquadro Elementi, dove puoi vedere i contenuti della pagina, come nel seguente screenshot, dove vediamo l'elemento <h1> per la pagina sottoposta a prerendering:
In alternativa, nel riquadro della console, dove puoi visualizzare i log della console emessi dalla pagina sottoposta a prerendering:
Esegui il debug delle regole di speculazione nella pagina sottoposta a prerendering
Le sezioni precedenti descrivono come eseguire il debug delle pagine sottoposte a prerendering nella pagina che avvia il prerendering. Tuttavia, è anche possibile che le pagine sottoposte a prerendering forniscano informazioni di debug, effettuando chiamate di analisi o accedendo alla console (visualizzabile come descritto nella sezione precedente).
Inoltre, una volta attivata una pagina sottoposta a prerendering da parte dell'utente che vi accede, la scheda Caricamenti speculativi mostra questo stato e indica se è stato eseguito correttamente il prerendering o meno. Se non è stato possibile eseguire il prerendering, viene fornita una spiegazione sul motivo per cui si è verificato il caso:
Inoltre, come nel caso dei precaricamenti, se navighi da una pagina con regole di speculazione che non corrispondono alla pagina corrente, proverai a mostrarti perché gli URL non corrispondono a quelli indicati nelle regole di speculazione della pagina precedente nella scheda Caricamenti speculativi:
Conclusione
In questo post abbiamo mostrato i vari modi in cui gli sviluppatori possono eseguire il debug delle regole di precaricamento e di prerendering. Il team continua a lavorare allo sviluppo di strumenti per le regole di speculazione e ci piacerebbe ricevere i suggerimenti degli sviluppatori su quali altri modi potrebbero essere utili per il debug di questa nuova ed entusiasmante API. Invitiamo gli sviluppatori a segnalare un problema nel tracker dei problemi di Chrome per eventuali richieste di funzionalità o bug rilevati.
Ringraziamenti
Immagine Thumbail di Nubelson Fernandes su Unsplash.