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. 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 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 creano confusione, perciò inizieremo con una spiegazione di questi:
- Precaricamento: recupero di una risorsa o di un documento in anticipo 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). - Stime di navigazione: il termine collettivo per le nuove opzioni di prefetch e prerendering attivate dalle regole di stima.
- 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 service worker. Questi elementi non verranno trattati qui, ma il termine è incluso per distinguerli chiaramente dal termine "speculazioni di navigazione".
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 precaricate, come indicato nella colonna Type (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 i set di regole trovati nella pagina corrente.
- Stime, che elenca tutti gli URL prerecuperati e pre-visualizzati dagli insiemi 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 precaricamenti sono riusciti, mentre uno non è andato a buon fine. 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 della pagina next3.html, che non esiste e restituisce un errore 404, che è 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 senza corrispondenza
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 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). 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 speculazione del prerendering, 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 su di esso.
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, 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, 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:
Esegui il debug di prerender con gli altri riquadri 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 il riquadro Rete, in cui 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:
Oppure il riquadro Elementi, dove puoi vedere i contenuti della pagina, come nello screenshot seguente in cui vediamo 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, una volta che 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 entusiasmante API. Invitiamo gli sviluppatori a segnalare un problema nell'Issue Tracker di Chrome per eventuali richieste di funzionalità o bug rilevati.
Ringraziamenti
Immagine di Thumbail di Nubelson Fernandes su Unsplash.