Le regole di speculazione possono essere utilizzate per il pre-fetching e il pre-rendering delle navigazioni delle pagine successive, come descritto nel post precedente. Ciò può consentire caricamenti di pagina molto più rapidi o addirittura istantanei, migliorando notevolmente i Segnali web essenziali per queste navigazioni aggiuntive delle pagine.
Il debug delle regole di speculazione può essere complicato. Ciò vale in particolare per le pagine sottoposte a prerendering, in quanto vengono visualizzate in un renderer separato, una sorta di scheda nascosta in background che sostituisce la scheda corrente quando viene attivata. Pertanto, le solite opzioni di DevTools non possono sempre essere utilizzate per eseguire il debug dei problemi.
Il team di Chrome ha lavorato duramente per migliorare il supporto di DevTools per il debug delle regole di speculazione. In questo post vedrai 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 utilizzare le opzioni più familiari di DevTools e quando no.
Spiegazione dei termini "pre-"
Esistono molti termini che iniziano con "pre-" che possono creare confusione, quindi inizieremo con una spiegazione di questi termini:
- Prefetch: recupero anticipato di una risorsa o di un documento per migliorare le prestazioni future. Questo post tratta il prefetching dei documenti utilizzando l'API Speculation Rules, anziché l'opzione
<link rel="prefetch">simile, ma precedente, spesso utilizzata per il prefetching delle risorse secondarie. - Pre-rendering: questa operazione va oltre il prefetching e esegue il rendering dell'intera pagina come se l'utente l'avesse visitata, ma la mantiene in un processo di rendering in background nascosto, pronto per essere utilizzato se l'utente la visita effettivamente. Ancora una volta, questo documento riguarda la versione più recente dell'API Speculation Rules, anziché l'opzione
<link rel="prerender">precedente (che non esegue più il prerendering completo). - Navigazioni speculative: il termine collettivo per le nuove opzioni di prefetch e prerender 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 differenziarli chiaramente dal termine "navigazioni speculative".
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"],
"tag": "rule-set-tag-1"
}
]
}
</script>
L'utilizzo delle regole di speculazione per i recuperi preliminari di navigazione presenta alcuni vantaggi rispetto alla sintassi <link rel="prefetch"> precedente, ad esempio un'API più espressiva e i risultati memorizzati nella cache di memoria anziché nella cache del disco HTTP.
Eseguire il debug delle regole di speculazione prefetch
I recuperi preliminari attivati dalle regole di speculazione possono essere visualizzati nel riquadro Rete allo stesso modo degli altri recuperi:
Le due richieste evidenziate in rosso sono le risorse precaricate, come si può vedere dalla colonna Tipo. Questi vengono recuperati con priorità Lowest perché riguardano 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 Caricamento speculativo
Nella sezione Servizi in background del riquadro Applicazione di Chrome DevTools è stata aggiunta una nuova sezione Caricamenti speculativi per facilitare il debug delle regole di speculazione:
In questa sezione sono disponibili tre schede:
- Caricamenti speculativi, che elenca lo stato di prerendering della pagina corrente.
- Regole, che elenca tutti i set di regole trovati nella pagina corrente, indicati come URL o tag delle regole, se presenti.
- Speculazioni, che elenca tutti gli URL precaricati e prerenderizzati dai set di regole.
La scheda Speculazioni è mostrata nello screenshot precedente e possiamo vedere che questa pagina di esempio ha un singolo insieme di regole di speculazione per il recupero anticipato di 3 pagine. Due di questi prefetch sono riusciti e uno non è riuscito. Puoi fare clic sull'icona accanto a Set di regole per accedere all'origine del set di regole nel riquadro Elementi. In alternativa, puoi fare clic sul link Stato per accedere alla scheda Speculazioni filtrata in base a quel set di regole.
La scheda Speculazioni elenca tutti gli URL di destinazione, insieme all'azione (prefetch o prerender), al set di regole da cui provengono (poiché potrebbero essercene più di uno in una pagina) e allo stato di ogni speculazione:
Sopra gli URL, un menu a discesa può essere utilizzato per mostrare gli URL di tutti i set di regole o solo gli URL di un determinato set di regole. Sotto sono elencati tutti gli URL. Se fai clic su un URL, vengono visualizzate informazioni più dettagliate.
In questo screenshot possiamo vedere il motivo dell'errore per la pagina next3.html (che non esiste e pertanto restituisce un codice di stato HTTP 404, ovvero non 2xx).
La scheda riepilogativa Caricamenti speculativi mostra un report Stato di caricamento speculativo per questa pagina per indicare se per questa pagina è stato utilizzato il pre-fetching o il pre-rendering.
Per una pagina precaricata, dovresti visualizzare un messaggio di operazione riuscita quando viene visualizzata:
Speculazioni senza precedenti
Quando si verifica una navigazione da una pagina con regole di speculazione che non comporta l'utilizzo di un precaricamento o di un pre-rendering, una sezione aggiuntiva della scheda mostra ulteriori dettagli sul motivo per cui l'URL non corrisponde a nessuno degli URL di speculazione. Ciò è utile per individuare errori di battitura nelle regole di speculazione.
Ad esempio, qui abbiamo eseguito la navigazione fino a next4.html, ma solo next.html, next2.html o next3.html sono precaricati, quindi possiamo vedere che non corrispondono a nessuna di queste tre regole.
Le schede Caricamenti speculativi sono molto utili per eseguire il debug delle regole di esecuzione speculativa e trovare eventuali errori di sintassi nel codice JSON.
Per quanto riguarda i prefetch, il pannello Rete è probabilmente un luogo più familiare. Per l'esempio di errore di prefetch, puoi vedere l'errore 404 per il prefetch qui:
Tuttavia, le schede Caricamenti speculativi diventano molto più utili per le regole di speculazione di prerendering, che vengono trattate di seguito.
Regole di speculazione per prerender
Le regole di speculazione di prerendering seguono la stessa sintassi delle regole di speculazione di prefetch. Ad esempio:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Questo insieme di regole attiva il caricamento e il rendering completi delle pagine specificate (soggetto a determinate limitazioni). In questo modo, l'esperienza di caricamento è immediata, anche se con costi aggiuntivi per le risorse.
A differenza dei prefetch, tuttavia, questi non sono visibili nel riquadro Rete, in quanto 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 Caricamenti speculativi
È possibile utilizzare le stesse schermate di Caricamenti speculativi per le regole di speculazione di pre-rendering, come dimostrato con una pagina demo simile che tenta di eseguire il pre-rendering anziché il pre-fetching delle tre pagine:
Qui vediamo di nuovo che il prerendering di uno dei tre URL non è riuscito e gli sviluppatori possono visualizzare i dettagli per URL nella scheda Speculazioni facendo clic sul link 2 pronto, 1 errore.
Nella versione 121 di Chrome abbiamo introdotto il supporto delle regole per i documenti. In questo modo, il browser può rilevarli dai link della stessa 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>
Questo esempio seleziona tutti i link della stessa origine, ad eccezione di quelli che iniziano con /not-safe-to-prerender, come candidati al prerendering.
Imposta anche il prerendering eagerness su moderate, il che significa che le navigazioni vengono prerenderizzate quando il link viene passato con il mouse (su computer), in base alla visualizzazione (su dispositivo mobile) o quando viene fatto clic.
Sul sito demo delle regole speculative sono presenti regole simili e l'utilizzo della nuova sezione Caricamenti speculativi su questo sito mostra l'utilità di questa nuova scheda, in quanto sono elencati tutti gli URL idonei trovati dal browser nella pagina:
Lo Stato è Non attivato perché il processo di prerendering per questi elementi non è stato avviato. Tuttavia, se passiamo il puntatore sopra i link, vediamo lo stato cambiare man mano che ogni URL viene pre-renderizzato:
Chrome ha impostato limiti per i prerendering, incluso un massimo di 2 prerendering per l'entusiasmo moderate, quindi dopo aver passato il mouse sopra il terzo link, viene visualizzato il motivo dell'errore per quell'URL:
Eseguire il debug di prerender con gli altri pannelli di DevTools
A differenza dei prefetch, le pagine di cui è stato eseguito il prerendering non vengono visualizzate nei processi di rendering correnti nei riquadri DevTools, ad esempio nel riquadro Rete, perché vengono sottoposte a rendering nel proprio renderer in background.
Tuttavia, ora è possibile cambiare il renderer utilizzato dai riquadri DevTools con il menu 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) è condiviso anche in tutti gli altri pannelli, ad esempio il pannello Rete, dove puoi vedere che la pagina richiesta è quella prerenderizzata:
Se esaminiamo le intestazioni HTTP di queste risorse, possiamo notare che tutte verranno impostate con l'intestazione Sec-Purpose: prefetch;prerender:
oppure il riquadro Elementi, in cui puoi visualizzare i contenuti della pagina, come nello screenshot seguente in cui l'elemento <h1> si riferisce alla pagina pre-renderizzata:
Oppure il riquadro Console, dove puoi visualizzare i log della console emessi dalla pagina pre-renderizzata:
Eseguire il debug delle regole di speculazione nella pagina sottoposta a pre-rendering
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 prerenderizzate forniscano informazioni di debug, effettuando chiamate di Analytics o registrando nella console (che è visualizzabile come descritto nella sezione precedente).
Inoltre, una volta che una pagina pre-renderizzata viene attivata dall'utente che la visita, la scheda Caricamenti speculativi mostrerà questo stato e se è stata pre-renderizzata correttamente o meno. Se non è stato possibile eseguire il prerendering, viene fornita una spiegazione del motivo:
Inoltre, come nel caso dei precaricamenti, se navighi da una pagina con regole di speculazione che non corrispondono alla pagina corrente, nella scheda Caricamenti speculativi viene visualizzato il motivo per cui gli URL non corrispondono a quelli coperti dalle regole di speculazione della pagina precedente:
Conclusione
In questo post abbiamo mostrato i vari modi in cui gli sviluppatori possono eseguire il debug delle regole di speculazione di pre-fetching e pre-rendering. Il team continua a lavorare sugli strumenti per le regole di speculazione e ci piacerebbe ricevere suggerimenti dagli sviluppatori su altri modi utili per eseguire il debug di questa nuova 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 in miniatura di Nubelson Fernandes su Unsplash.