Le regole di speculazione possono essere utilizzate per eseguire il pre-caricamento e il pre-rendering delle pagine di navigazione successive, come descritto nel post precedente. In questo modo, è possibile caricare le pagine molto più velocemente o addirittura istantaneamente, 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, in quanto vengono visualizzate in un renderer separato, un po' come una scheda di sfondo nascosta che sostituisce la scheda corrente quando viene attivata. Pertanto, le normali opzioni di DevTools non possono sempre essere utilizzate per eseguire 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 per utilizzare questi strumenti per comprendere le regole di speculazione di una pagina, il motivo per cui potrebbero non funzionare e quando gli sviluppatori possono utilizzare le opzioni di DevTools più familiari e quando no.
Spiegazione dei termini "pre-"
Esistono molti termini "pre-" che possono creare confusione, quindi iniziamo con una spiegazione di questi:
- Prefetch: recupero anticipato di una risorsa o di un documento per migliorare le prestazioni future. Questo post illustra 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: va oltre il pre-caricamento e esegue il rendering dell'intera pagina come se l'utente ci avesse eseguito l'accesso, ma la mantiene in un processo di rendering in background nascosto pronto per essere utilizzato se l'utente vi accede 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ù un prerendering completo). - Navigazioni speculative: il termine collettivo per le nuove opzioni di prefetch e prerendering attivate dalle regole di speculazione.
- Precaricamento: un termine sovraccaricato 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 worker di servizio. Questi elementi non saranno trattati qui, ma il termine è incluso per distinguerli chiaramente dal termine "navigazioni speculative".
Regole di speculazione per prefetch
Le regole di speculazione possono essere utilizzate per prelevare in anteprima il documento della navigazione successiva. Ad esempio, quando inserisci il seguente JSON in una pagina, next.html e next2.html verranno prelevati:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
L'utilizzo di regole di speculazione per i precaricamenti di navigazione presenta alcuni vantaggi rispetto alla precedente sintassi <link rel="prefetch">, ad esempio un'API più espressiva e la memorizzazione dei risultati nella cache della memoria anziché nella cache su disco HTTP.
Eseguire il debug delle regole di speculazione prefetch
I pre-caricamenti attivati dalle regole di speculazione sono visibili nel riquadro Rete come gli altri caricamenti:
Le due richieste evidenziate in rosso sono le risorse prelevate in anteprima, come si vede dalla colonna Tipo. Vengono recuperati con priorità Lowest perché sono destinati a 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 Caricamenti speculativi
È stata aggiunta una nuova sezione Carichi 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 di prerendering della pagina corrente.
- Regole, che elenca tutti gli insiemi di regole trovati nella pagina corrente.
- Stime, che elenca tutti gli URL prerecuperati e pre-visualizzati dei set di regole.
La scheda Stime è mostrata nello screenshot precedente e possiamo vedere che questa pagina di esempio contiene un unico insieme di regole di stima per il pre-caricamento di tre pagine. Due di questi pre-caricamenti sono riusciti e uno non è riuscito. Puoi fare clic sull'icona accanto al set di regole per passare all'origine del set di regole nel riquadro Elementi. In alternativa, puoi fare clic sul link Stato per accedere alla scheda Stime filtrata in base al set di regole.
La scheda Stime elenca tutti gli URL target, insieme all'azione (prefetch o prerendering), all'insieme di regole da cui provengono (poiché potrebbero essercene più di uno in una pagina) e allo stato di ogni stima:
Sopra gli URL, puoi utilizzare un menu a discesa per mostrare gli URL di tutti gli insiemi di regole o solo quelli di un determinato insieme 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 quindi restituisce un codice 404, ovvero un codice di stato HTTP non 2xx).
La scheda riepilogativa Caricamenti speculativi mostra un report Stato di caricamento speculativo per questa pagina per indicare se è stato utilizzato o meno un prefetch o un prerendering per questa pagina.
Per una pagina precaricata, dovresti visualizzare un messaggio di operazione riuscita quando accedi a quella pagina:
Speculazioni non corrispondenti
Quando si verifica una navigazione da una pagina con regole di speculazione che non comporta l'utilizzo di un precaricamento o di un prerendering, una sezione aggiuntiva della scheda mostra ulteriori dettagli sul motivo per cui l'URL non corrisponde a nessuno degli URL di speculazione. Questo è utile per individuare errori ortografici nelle regole di speculazione.
Ad esempio, qui abbiamo eseguito la navigazione su 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 Carichi speculativi sono molto utili per eseguire il debug delle regole di speculazione stesse e trovare eventuali errori di sintassi nel JSON.
Per quanto riguarda i pre-caricamenti stessi, il riquadro 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 Carichi di speculazione diventano molto più utili per le regole di speculazione del prerendering, che verranno trattate di seguito.
Regole di speculazione per prerender
Le regole di speculazione per il prerendering seguono la stessa sintassi delle regole di speculazione per il prefetch. Ad esempio:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Questo insieme di regole attiva un caricamento e un rendering completo delle pagine specificate (soggetto a determinate limitazioni). In questo modo puoi offrire un'esperienza di caricamento istantanea, anche se con costi aggiuntivi per le risorse.
Tuttavia, a differenza dei pre-caricamenti, non sono disponibili nel riquadro Rete, in quanto vengono recuperati e visualizzati in un processo di rendering separato in Chrome. Ciò rende le schede Carichi speculativi più importanti per il debug delle regole di speculazione del prerendering.
Esegui il debug di prerender con le schede Caricamenti speculativi
Le stesse schermate di caricamenti speculativi possono essere utilizzate per le regole di precomprensione, come dimostrato con una pagina demo simile che tenta di eseguire il prerendering anziché il precaricamento delle tre pagine:
Qui vediamo di nuovo che il prerendering di uno dei tre URL non è riuscito e gli sviluppatori possono ottenere i dettagli per URL nella scheda Stime facendo clic sul link 2 pronti, 1 errore.
In Chrome 121 abbiamo lanciato il supporto delle regole dei documenti. In questo modo, il browser può rilevarli dai link della stessa origine 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>
Questo esempio seleziona tutti i link con la stessa origine, tranne quelli che iniziano con /not-safe-to-prerender, come candidati per il prerendering.
Imposta inoltre il prerendering eagerness su moderate, il che significa che le navigazioni vengono pre-renderizzate quando si passa il mouse sopra il link o si fa clic.
Esistono regole simili a questa sul sito demo delle regole speculative e l'utilizzo della nuova sezione Carichi speculativi su questo sito mostra l'utilità di questa nuova scheda, in quanto vengono elencati tutti gli URL idonei trovati dal browser nella pagina:
Lo stato è Non attivato perché il processo di prerendering non è stato avviato. Tuttavia, se teniamo premuto il cursore sui link, vediamo che lo stato cambia man mano che ogni URL viene precompilato:
Chrome ha impostato dei limiti per i prerendering, tra cui un massimo di 2 prerendering per l'eagerness 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 riquadri di DevTools
A differenza dei precaricamenti, le pagine sottoposte a prerendering non vengono visualizzate nei processi di rendering correnti nei riquadri di DevTools, come il riquadro Rete, perché vengono sottoposte a rendering nel proprio motore di rendering in background.
Tuttavia, ora è possibile cambiare il renderer utilizzato dai riquadri di DevTools con il menu a discesa in alto a destra oppure selezionando un URL nella parte superiore del riquadro e Ispeziona:
Questo menu a discesa (e il valore selezionato) è condiviso anche in tutti gli altri riquadri, ad esempio nel riquadro Rete, dove puoi vedere che la pagina richiesta è quella pre-renderizzata:
Se esaminiamo le intestazioni HTTP di queste risorse, possiamo vedere che verranno tutte impostate con l'intestazione Sec-Purpose: prefetch;prerender:
In alternativa, puoi utilizzare il riquadro Elementi, in cui puoi vedere i contenuti della pagina, come nello screenshot seguente, in cui vediamo che l'elemento <h1> è relativo alla pagina pre-renderizzata:
In alternativa, puoi utilizzare il riquadro Console, dove puoi visualizzare i log della console emessi dalla pagina pre-renderizzata:
Eseguire il debug delle regole di speculazione nella pagina pre-renderizzata
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 pre-renderizzate forniscano informazioni di debug, effettuando chiamate di analisi o accedendo alla console (visualizzabile come descritto nella sezione precedente).
Inoltre, quando una pagina pre-renderizzata viene attivata dall'utente che la visita, la scheda Carichi speculativi mostra questo stato e indica se il pre-rendering è andato a buon fine o meno. Se non è stato possibile eseguire la previsualizzazione, viene fornita una spiegazione del motivo:
Inoltre, come per i precarichi, se navighi da una pagina con regole di speculazione che non corrispondono alla pagina corrente, verrà tentato di mostrarti il motivo per cui gli URL non corrispondono a quelli coperti dalle 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 prefetch e prerendering. Il team continua a lavorare allo sviluppo di strumenti per le regole di speculazione e ci piacerebbe ricevere suggerimenti dagli sviluppatori su altri modi utili per eseguire il debug di questa nuova ed entusiasmante API. Invitiamo gli sviluppatori a segnalare un problema nell'Issue Tracker di Chrome per eventuali richieste di funzionalità o bug rilevati.
Ringraziamenti
Immagine in miniatura di Nubelson Fernandes su Unsplash.