Le regole di speculazione possono essere utilizzate per precaricare le navigazioni nelle pagine successive e eseguirne il prerendering, come descritto nel post precedente. Ciò può consentire un caricamento delle pagine molto più rapido (o addirittura immediato), migliorando notevolmente le Core Web Vitals per queste ulteriori navigazioni nelle pagine.
Il debug delle regole di speculazione può essere complicato. Questo è particolarmente vero per le pagine sottoposte a prerendering, in quanto queste pagine vengono visualizzate in un renderer separato, in modo simile a una scheda di sfondo nascosta che sostituisce la scheda corrente quando viene attivata. Di conseguenza, non è sempre possibile utilizzare le normali opzioni di DevTools per il debug dei problemi.
Il team di Chrome si sta adoperando per migliorare il supporto di DevTools per il debug delle regole di speculazione. In questo post scoprirai tutti i vari modi di utilizzare questi strumenti per comprendere le regole di speculazione di una pagina, perché potrebbero non funzionare e quando gli sviluppatori possono usare le opzioni DevTools più note e quando no.
Spiegazione di "pre-" termini
Ci sono molte "pre-" termini poco chiari, inizieremo con una spiegazione di questi:
- Precaricamento: recupero di una risorsa o di un documento in anticipo per migliorare le prestazioni future. Questo post spiega il precaricamento dei documenti tramite l'API Speculation Rules anziché l'opzione
<link rel="prefetch">, simile ma meno recente, spesso utilizzata per il precaricamento delle sottorisorse. - Prerendering: va un passo oltre il precaricamento e viene effettivamente visualizzata l'intera pagina come se l'utente l'avesse visualizzata, ma la mantiene in un processo di rendering di sfondo nascosto pronto per essere utilizzato se l'utente vi accede effettivamente. Anche in questo caso, questo documento riguarda la versione più recente dell'API Speculation Rules (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 di prerendering attivate dalle regole di speculazione.
- Precaricamento: un termine sovraccarico che può fare riferimento a una serie di tecnologie e processi, tra cui
<link rel="preload">, lo scanner di precaricamento e i precaricamenti di navigazione dei service worker. Questi elementi non verranno trattati qui, ma il termine è incluso per distinguere chiaramente questi elementi dalle "speculazioni di navigazione" termine.
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, 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 i 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 di memoria anziché nella cache su disco HTTP.
Esegui il debug di prefetch regole di speculazione
I precaricamento attivati da regole di speculazione possono essere visualizzati nel riquadro Rete come gli altri recuperi:
Le due richieste evidenziate in rosso sono le risorse precaricate, come indicato nella colonna Type (Tipo). Questi elementi vengono recuperati con una priorità pari a Lowest perché lo sono per le navigazioni future e Chrome dà la priorità alle risorse della pagina corrente.
Se fai clic su una delle righe viene visualizzata anche l'intestazione HTTP Sec-Purpose: prefetch, che consente di identificare queste richieste lato server:
Esegui il 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 facilitare il debug delle regole di speculazione:
In questa sezione sono disponibili tre schede:
- Caricamenti speculativi che elencano lo stato sottoposto a prerendering della pagina corrente.
- Regole, in cui sono elencate tutte le serie di regole presenti nella pagina corrente.
- Speculazioni, che elenca tutti gli URL precaricati e sottoposti a prerendering dalle serie di regole.
La scheda Speculazioni è mostrata nello screenshot precedente. Come possiamo notare, questa pagina di esempio ha un singolo insieme di regole di speculazione per il precaricamento di tre pagine. Due di questi precaricamenti sono riusciti, mentre uno non è andato a buon fine. Puoi fare clic sull'icona accanto a Serie di regole per accedere all'origine della serie di regole nel riquadro Elementi. In alternativa, puoi fare clic sul link Stato per visualizzare la scheda Speculazioni filtrata in base a quel set di regole.
La scheda Speculazioni elenca tutti gli URL di destinazione, insieme all'azione (precaricamento o prerendering), al set di regole da cui provengono (poiché potrebbero essere presenti più URL in una pagina) e allo 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 di regole. Al di sotto sono elencati tutti gli URL. Facendo clic su un URL ottieni informazioni più dettagliate.
In questo screenshot, possiamo vedere il motivo dell'errore della pagina next3.html, che non esiste e restituisce un errore 404, che è un codice di stato HTTP non 2xx.
La scheda di riepilogo Caricamenti speculativi mostra un report Stato di caricamento speculativo per questa pagina per indicare se per la pagina è stato utilizzato un precaricamento o un prerendering.
Per una pagina precaricata, dovresti vedere un messaggio di operazione riuscita quando accedi alla pagina in questione:
Speculazioni senza corrispondenza
Quando si effettua una navigazione 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à ulteriori dettagli sul motivo per cui l'URL non corrisponde a nessuno degli URL di speculazione. Ciò è 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 vediamo che non corrispondono del tutto a nessuna di queste tre regole.
Le schede Caricamenti speculativi sono molto utili per eseguire il debug delle regole di speculazione stesse e per trovare eventuali errori di sintassi nel file JSON.
Per quanto riguarda i precaricamento stessi, il riquadro Rete è probabilmente una posizione più familiare. Per l'esempio di errore di precaricamento, puoi vedere il codice 404 relativo al precaricamento qui:
Tuttavia, le schede Caricamenti speculativi diventano molto più utili per le regole di speculazione di prerendering, che verranno trattate 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 (soggetto a determinate limitazioni). Ciò può fornire un'esperienza di caricamento istantaneo, ma con costi aggiuntivi in termini di risorse.
A differenza dei precaricamento, tuttavia, questi non sono disponibili nel riquadro Rete, poiché vengono recuperati e visualizzati in un processo di rendering separato in Chrome. Ciò rende le schede Caricamenti speculativi più importanti per il debug delle regole di speculazione di prerendering.
Esegui il debug di prerender con le schede per i caricamenti speculativi
Per le regole di speculazione di prerendering possono essere utilizzate le stesse schermate di caricamenti speculativi, come dimostrato da una pagina demo simile che tenta di eseguire il prerendering, invece di precaricare le tre pagine:
Vediamo ancora una volta che il prerendering di uno dei tre URL non è riuscito e gli sviluppatori possono ottenere i dettagli per URL nella scheda Speculazioni facendo clic sul link 2 Ready, 1 Failure.
In Chrome 121 abbiamo lanciato il supporto delle regole dei documenti. In questo modo il browser può recuperarli dagli stessi link di origine presenti nella 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, tranne quelli che iniziano con /not-safe-to-prerender come candidati di prerendering.
Imposta inoltre il prerendering eagerness su moderate, il che significa che le navigazioni vengono sottoposte a prerendering quando passi il mouse o fai clic sul link.
Esistono regole simili come questa sul sito dimostrativo delle regole speculative 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 trovati dal browser nella pagina:
Lo Stato è Non attivato perché il processo di prerendering non è iniziato. Tuttavia, quando manteniamo il puntatore sui link, notiamo che lo stato cambia man mano che viene eseguito il prerendering di ogni URL:
Chrome ha impostato dei limiti per i prerendering, incluso un massimo di 2 prerendering per l'entusiasmo moderate. Pertanto, dopo aver passato il mouse sopra il terzo link, vediamo il motivo dell'errore dell'URL:
Esegui il debug di prerender con gli altri riquadri DevTools
A differenza dei precaricamento, le pagine di cui è stato eseguito il prerendering non vengono visualizzate nei processi di rendering correnti nei riquadri DevTools come il riquadro Network, perché vengono visualizzate nel proprio renderer dietro le quinte.
Tuttavia, ora è possibile cambiare il renderer utilizzato dai riquadri DevTools tramite il menu a discesa nell'angolo in alto a destra o selezionando un URL nella parte superiore del riquadro e selezionando Ispeziona:
Questo menu a discesa (e il valore selezionato) è condiviso anche tra tutti gli altri riquadri, come il riquadro Network, dove puoi vedere che la pagina richiesta è quella sottoposta a prerendering:
Dando un'occhiata alle intestazioni HTTP di queste risorse, possiamo vedere che sono tutte impostate con l'intestazione Sec-Purpose: prefetch;prerender:
Oppure il riquadro Elements, dove puoi vedere i contenuti della pagina, come nello screenshot seguente in cui vediamo che l'elemento <h1> è per la pagina sottoposta a prerendering:
In alternativa, nel riquadro della console puoi vedere 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, quando l'utente attiva una pagina sottoposta a prerendering, la scheda Caricamenti speculativi mostra questo stato e indica se il prerendering è stato eseguito correttamente o meno. Se non è stato possibile eseguire il prerendering, viene fornita una spiegazione sul motivo:
Inoltre, come nel caso dei precaricamenti, la navigazione da una pagina con regole di speculazione che non corrispondevano alla pagina corrente tenterà di mostrare perché gli URL non corrispondevano a quelli descritti 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 speculazione di precaricamento e di prerendering. Il team continua a lavorare agli strumenti per le regole di speculazione e vorremmo ricevere suggerimenti dagli sviluppatori su quali altri modi potrebbero essere utili per eseguire il debug di questa nuova entusiasmante API. Invitiamo gli sviluppatori a segnalare un problema tramite lo Issue Tracker di Chrome per eventuali richieste di funzionalità o bug rilevati.
Ringraziamenti
Immagine di Thumbail di Nubelson Fernandes su Unsplash.