Migliora le prestazioni di caricamento della pagina successiva

Funzionalità web: Regole di speculazione

Uno dei modi più efficaci per migliorare le prestazioni di caricamento pagina per gli utenti che navigano in un sito è avviare il caricamento della pagina successiva che stanno per visitare prima che la visitino. Ciò può essere fatto tramite una tecnica chiamata caricamento speculativo utilizzando l'API Speculation Rules.

Come funziona

Il caricamento speculativo funziona utilizzando regole di speculazione basate su JSON per comunicare al browser i link che possono essere precaricati o prerenderizzati, migliorando le prestazioni di caricamento della pagina quando l'utente li seleziona.

Le regole possono essere un elenco di URL impostati come hardcoded con una chiave urls (nota come regola di elenco) o con una chiave where contenente un insieme di selettori href e selettori CSS utilizzati per trovare i link nella pagina (nota come regola document).

Le regole possono anche includere una proprietà eagerness facoltativa che specifica quando deve essere eseguito il precaricamento o il prerendering della pagina. La proprietà eagerness può essere impostata su immediate, eager, moderate o conservative. immediate esegue la speculazione il prima possibile, mentre gli altri attendono i segnali dell'utente, come il passaggio del mouse per un breve periodo, per un periodo più lungo o l'inizio del clic sulla pagina.

Le regole possono essere combinate con diverse impostazioni di eagerness per eseguire il precaricamento in modo eager e poi il prerendering quando l'utente interagisce di più.

Quando utilizzarla

Il caricamento speculativo è particolarmente utile per le pagine statiche, in cui è improbabile che i contenuti cambino spesso e in cui le pagine sono più economiche da produrre, soprattutto se memorizzate nella cache perimetrale. Può essere utilizzato anche per le pagine dinamiche, ma è importante prestare attenzione alla possibilità di contenuti obsoleti.

Il caricamento speculativo viene in genere utilizzato per i link della stessa origine, anche se opzioni più avanzate consentono una speculazione multiorigine. Questa guida si concentra sul caso d'uso più comune, ovvero quello della stessa origine.

Un caricamento speculativo più aggressivo è una buona scelta per le pagine che probabilmente verranno visitate successivamente, come un articolo di prima pagina o la pagina successiva di un processo a fasi, ad esempio un corso di apprendimento.

Il caricamento speculativo meno aggressivo è una buona scelta quando non è chiaro cosa farà l'utente in seguito, quando ci sono molti link nella pagina, ognuno con la stessa probabilità di essere visitato. Se aspetti altri indicatori, come il passaggio del mouse o l'inizio del clic sulla pagina, puoi iniziare a caricare la pagina successiva e migliorare l'esperienza utente, anche se non è completamente precaricata o prerenderizzata.

Analogamente, il precaricamento è una scelta più conservativa rispetto al prerendering, in quanto utilizza meno risorse (sia sul lato client che sul lato server), ma offre meno vantaggi all'utente. È una buona scelta per l'implementazione iniziale, che può essere estesa al prerendering in un secondo momento, quando lo sviluppatore lo richiede esplicitamente.

Modalità d'uso

Le regole di speculazione hanno un formato basato su JSON e possono essere incluse in un tag <script type="speculationrules">. Le regole possono essere incluse in <head> o <body> del documento oppure possono essere aggiunte dinamicamente utilizzando JavaScript.

È possibile utilizzare anche un tag, a livello globale o per singola regola. Se impostato, questo tag verrà incluso nell'intestazione Sec-Speculation-Tags e ti consentirà di identificare lato server quali speculazioni sono state effettuate.

Esempio di una regola semplice per l'elenco di URL per il precaricamento di URL predefiniti

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Esempio di una regola per i documenti semplice per il prerendering di tutti i link della stessa origine in una pagina

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Esempio di un set di regole misto

Questo esempio mostra un set di regole che esegue il precaricamento di tutti i link con l'impostazione eager e poi esegue il prerendering degli stessi link quando riceve più indicatori con l'impostazione eager moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Best practice

  • SÌ: utilizza le regole di speculazione per precaricare ed eseguire il prerendering delle pagine che l'utente probabilmente visiterà in seguito.
  • SÌ: utilizza le regole di speculazione per i siti statici, dove è improbabile che i contenuti cambino spesso e dove le pagine sono più economiche da produrre, soprattutto se memorizzate nella cache perimetrale.
  • SÌ: presta maggiore attenzione quando utilizzi le regole di speculazione per le pagine dinamiche, in cui i contenuti hanno maggiori probabilità di cambiare spesso, potrebbero diventare obsoleti e le pagine sono più costose da produrre.
  • SÌ: preferisci le regole dei documenti alle regole degli elenchi, in quanto sono più flessibili, consentono di condividere la stessa regola su più pagine e possono essere utilizzate per il precaricamento e il prerendering di pagine non note in anticipo.
  • SÌ: valuta i compromessi tra precaricamento e prerendering e scegli quello appropriato per il tuo caso d'uso. Il prerendering è più costoso del precaricamento e può causare più effetti collaterali indesiderati in applicazioni complesse che mostrano uno stato dinamico, ma offre un'esperienza utente migliore. In caso di dubbi, chiedi allo sviluppatore la sua preferenza.
  • SÌ: considera i compromessi tra i diversi livelli di eagerness e scegli quello appropriato per il tuo caso d'uso. Una speculazione più aggressiva offre un'esperienza utente migliore, ma utilizza più risorse e può causare più effetti collaterali indesiderati in applicazioni complesse che mostrano uno stato dinamico. In caso di dubbi, chiedi allo sviluppatore la sua preferenza.
  • NON utilizzare in modo eccessivo le regole di speculazione, ad esempio per speculare su ogni link della pagina. I browser hanno dei limiti (2 speculazioni per le speculazioni non eager). immediate deve essere utilizzato solo per un numero molto ridotto di link.
  • NON speculare sugli URL che probabilmente attivano modifiche di stato, come /logout o /add-to-cart, ed escludili esplicitamente dalle regole di speculazione se è probabile che vengano inclusi nelle regole dei documenti.
  • NON utilizzare le regole di speculazione sulle applicazioni a pagina singola (SPA). Le regole di speculazione sono progettate per le applicazioni multipagina (MPA) in cui il browser accede a un nuovo documento a ogni navigazione. Nelle SPA, il browser non passa a un nuovo documento a ogni navigazione, pertanto le regole di speculazione non funzioneranno come previsto.

Supporto del browser e strategie di riserva

Tuttavia, il caricamento speculativo è un potenziamento progressivo. È perfettamente sicuro da utilizzare come miglioramento ed è vivamente consigliato dati i potenziali vantaggi in termini di prestazioni. Se un browser non supporta le regole di speculazione, le ignorerà semplicemente.