Come utilizzare l'API delle regole di speculazione per caricare istantaneamente le pagine Web

Il 2024 si preannuncia come il momento in cui il caricamento istantaneo diventerà il nuovo standard nelle prestazioni web e i proprietari di attività online saranno tutti attenti.

Il passaggio da veloce a istantaneo, però, è in cantiere già da un po’.

Già nel 2009, la ricerca di un caricamento delle pagine più rapido ed efficiente ha portato il team di Chromium a creare i primi suggerimenti sulle risorse, a cui in seguito è stato aggiunto il link rel=”prerender”.

Si prevedeva che avrebbe avuto un impatto significativo sulle prestazioni poiché prevedeva il caricamento delle pagine successive in background prima che un utente vi accedesse, garantendo un rendering più rapido al momento della transizione.

Tuttavia, questa versione del prerendering non si è rivelata sufficientemente efficiente ed è stata deprecata nel 2017.

Avanzando rapidamente fino ad oggi, Google ha lanciato sviluppi promettenti alla sua API Speculation Rules, consentendo un approccio più sofisticato al prerendering completo e sbloccando una navigazione web davvero fluida.

Cos'è l'API Speculation Rules di Google?

L'API Speculation Rules è un'API definita da JSON sviluppata da Google per migliorare le prestazioni di caricamento delle pagine Web attraverso strategie di caricamento speculativo.

Il caricamento speculativo implica la previsione e il precarico delle risorse per le successive navigazioni delle pagine, con conseguente tempi di rendering più rapidi e migliori esperienze utente. Google ha introdotto questa API per fornire agli sviluppatori un modo più flessibile ed espressivo per specificare quali documenti devono essere precaricati o prerenderizzati.

Dettagli chiave sull'API delle regole di speculazione:

• Targeting degli URL dei documenti: a differenza dei tradizionali meccanismi di prelettura che prendono di mira file di risorse specifici, l'API delle regole di speculazione si concentra sugli URL dei documenti. Ciò lo rende particolarmente adatto per applicazioni multipagina (MPA) piuttosto che per applicazioni a pagina singola (SPA).

• Prerendering e prelettura: l'API supporta sia strategie di prerendering che di prelettura. Il prerendering implica il recupero, il rendering e il caricamento del contenuto in una scheda invisibile, pronta per l'attivazione quasi istantanea quando l'utente accede alla pagina. Il precaricamento, d'altro canto, scarica e salva le risorse della pagina specificate (ad esempio, documento, immagine, script, ecc.), ottimizzando i tempi di caricamento quando l'utente accede successivamente a quelle pagine.

• Supporto browser: l'API è attualmente compatibile con tutti i browser basati su Chromium, inclusi Chrome, Edge, Opera, Chrome Android, Opera Android e WebView Android. Per un'analisi completa della compatibilità, fare riferimento alla documentazione di Mozilla:

Puoi anche verificare se i browser supportano l'API con il seguente codice:

• Alternativa alle funzionalità deprecate: funge da alternativa alle tecnologie meno recenti come la funzionalità deprecata solo per Chrome, offrendo prestazioni migliori e una sintassi più espressiva.
• Considerazioni sulla sicurezza: i precaricamenti tra siti presentano limitazioni per proteggere la privacy dell'utente. La prelettura tra siti funziona solo se l'utente non ha impostato cookie per il sito di destinazione, impedendo il potenziale tracciamento dell'attività dell'utente.
  

Perché utilizzare l'API delle regole di speculazione sul tuo sito web?

L'API Speculation Rules consentecaricamenti di pagina quasi istantanei per esperienze di navigazione senza interruzioni.

Tempi di caricamento delle pagine migliorati,maggiore soddisfazione degli utenti e potenziali vantaggi SEOsono ragioni convincenti per gli sviluppatori per abbracciare questa tecnologia.

Riducendo la latenza tra le navigazioni delle pagine, gli utenti percepiscono il sito web come più fluido e reattivo. Ciò diventa chiaramente visibile neiCore Web Vitals del tuo sito, dove il Largest Contentful Paint (LCP), il Cumulative Layout Shift (CLS) e l'Interaction to Next Paint (INP) diminuiscono drasticamente.

Le esperienze di navigazione istantanea comportano frequenze di rimbalzo più basse e una maggiore fidelizzazione degli utenti: parametri vitali per il successo della tua piattaforma online. Sottolineando così il valore strategico dell’integrazione dell’API Speculation Rules.

Come funziona l'API delle regole di speculazione?

L'API Speculation Rules di Google è progettata per prendere di mira gli URL dei documenti anziché file di risorse specifici. L'API Speculation Rules introduce una sintassi più espressiva e configurabile per specificare quali documenti devono essere precaricati o sottoposti a prerendering.

Con una struttura definita in formato JSON all'interno di uno script type="speculationrules", gli sviluppatori possono articolare regole sia per il prerendering che per il prefetch. Questa maggiore flessibilità consente di ottimizzare il caricamento speculativo.

Di recente, Google ha annunciato un nuovo miglioramento dell'API Speculation Rules in Chrome 121, che ora offre l'opzione per la ricerca automatica dei collegamenti.

Questo viene fatto da:

• Specificare la fonte del documento
• Selezione dei collegamenti sulla pagina in base a URL o selettori CSS
• Specificare un livello di "entusiasmo": entusiasta (immediatamente), moderato (al passaggio del mouse per 200 ms) e conservatore (al mouse o al tocco)

Tuttavia, se non conosci l'API Speculation Rules, ti consigliamo di provare prima le diverse configurazioni riportate di seguito.

Come utilizzare l'API delle regole di speculazione di Google

L'API Speculation Rules consente agli sviluppatori di seguire un approccio strutturato per ottimizzare i processi di prerendering e prelettura.

Impostare

Si inizia con la creazione di un elemento script type="speculationrules" e la definizione delle regole di speculazione in una struttura JSON al suo interno.

Le regole di speculazione possono essere aggiunte sia nella testa che nel corpo del frame principale.

Importante: le regole di speculazione nei sottoframe non vengono applicate e le regole di speculazione nelle pagine prerenderizzate vengono applicate solo quando un utente accede alla pagina stessa.

Le regole di speculazione possono essere incluse sia staticamente che dinamicamente.

• La configurazione statica viene eseguita nell'HTML della pagina (perfetto per i siti Web in cui l'azione successiva ha un'elevata certezza, ad esempio un sito Web di notizie potrebbe voler prerenderizzare i momenti salienti del giorno)
• La configurazione dinamica viene eseguita tramite JavaScript (adatto per siti Web in cui le esperienze utente personalizzate sono ampiamente utilizzate)

Importante: quando si opta per la configurazione dinamica, fare sempre riferimento alla documentazione di supporto per sviluppi futuri e casi d'uso che potrebbero diventare disponibili in futuro.

Per indicare al browser quali URLprerenderizzare , puoi inserire le istruzioni JSON nelle tue pagine:

Allo stesso modo, inserisci le seguenti istruzioni JSON per il precaricamento :

È possibile aggiungere più regole di speculazione a una pagina, nel qual caso dovrai istruire il browser su uno qualsiasi dei seguenti livelli:

• Elenco degli URL
• Molteplici regole di speculazione
• Elenchi multipli all'interno di un insieme di regole di speculazione
  

Specifica dei percorsi per il prerendering/prefetch

La regolazione fine del caricamento speculativo implica la specificazione dei percorsi per il prerendering e il precaricamento. Classificando le pagine in base alla loro importanza o alla probabilità di navigazione dell'utente, gli sviluppatori possono ottimizzare la strategia di caricamento speculativo.

Tuttavia, ci sono alcuni percorsi considerati non sicuri, come ad esempio:

• URL di disconnessione;
• URL di cambio lingua;
• URL "Aggiungi al carrello";
• URL del flusso di accesso in cui il server richiede l'invio di un SMS, ad esempio quando è necessaria l'autenticazione a due fattori (2FA);
• URL che avviano il monitoraggio delle conversioni degli annunci lato server;
• URL che attivano i limiti di utilizzo di un utente, ad esempio, utilizzando la quantità mensile di articoli gratuiti.

Analogamente all'esclusione di tali pagine dalla memorizzazione nella cache, il motivo per evitare il precaricamento e il prerendering è legato alle variabili dinamiche.

Si tratta di pagine sensibili al contenuto in cui i valori si aggiornano in base alle azioni dell'utente e, precaricandole in background, il rischio di mostrare uno stato obsoleto della pagina è molto alto.

Precisione e compromessi

Come menzionato da Barry Pollard nel nostro webinar su “Caricamento istantaneo delle pagine”:

Sebbene il precaricamento sia l'approccio più sicuro che puoi duplicare su molte delle tue pagine web, offre anche la ricompensa più bassa poiché comporta solo il download di risorse specifiche.

I prerender a pagina intera, d'altro canto, offrono ricompense più elevate, ma dovrebbero essere usati con parsimonia poiché possono:

• Sovraccaricare il browser, poiché può eseguire solo un numero limitato di attività in background.
• Consuma una notevole larghezza di banda e risorse della CPU che possono portare a un degrado delle prestazioni per gli utenti su reti più lente o dispositivi con risorse limitate.
• Porta a un maggiore spreco di risorse se il visitatore non accede alla pagina.

Per impostare correttamente il prerendering, dovresti considerare il comportamento dei tuoi utenti e analizzare le navigazioni comuni nel tuo sito web. Utilizzando le mappe di calore e i diagrammi di flusso di Google Analytics, puoi identificare i percorsi essenziali e avviare i tuoi esperimenti di caricamento predittivo.

Per verificare se viene eseguito il prerendering di una pagina, utilizzare una voce di attivazioneStart diversa da zero di PerformanceNavigationTiming . Questo può quindi essere registrato utilizzando una dimensione personalizzata:

In questo modo sarai in grado di valutare il rapporto tra prerender e altri tipi di navigazione.

Inoltre, è importante misurare il numero di pagine prerenderizzate che non vengono successivamente visitate per ottimizzare le regole di speculazione e ottenere tassi di successo più elevati e un minore spreco di risorse.

Puoi farlo attivando un evento di analisi quando vengono inserite regole di speculazione per indicare che è stato richiesto il prerendering. Quindi confronta il numero di questi eventi con le effettive visualizzazioni della pagina di prerendering.

O puoi…

Prendi in considerazione il prerendering automatizzato delle pagine con l'intelligenza artificiale di navigazione di NitroPack

Navigation AI è l'ottimizzatore di navigazione web basato sull'intelligenza artificiale di NitroPack che prevede e analizza attivamente il comportamento degli utenti per eseguire il prerendering di pagine intere durante il percorso del cliente.

L'intelligenza artificiale di navigazione consente ai proprietari dei siti di offrire esperienze di navigazione istantanee su desktop e dispositivi mobilisenza scrivere una sola riga di codice , aumentando il coinvolgimento dei clienti e i tassi di conversione.

Nota: Navigation AI è un prodotto separato, ma è compatibile al 100% con NitroPack ed estende ulteriormente i vantaggi per i proprietari dei siti.

Unisciti alla lista d'attesa per Navigation AI e sblocca esperienze utente istantanee sul tuo sito →

L'intelligenza artificiale di navigazione di NitroPack si basa sull'API Speculation Rules e offre una soluzione automatizzata per ottenere un elevato rapporto di successo ed efficienza delle risorse negli scenari di prerendering.

Applicando le previsioni iniziali potenziate dall'intelligenza artificiale sul caricamento della pagina in base ai dati e analizzando il comportamento dell'utente, Navigation AI può regolare le previsioni e istruire con precisione l'API Speculation Rules per eseguire il prerendering delle pagine che verranno effettivamente visitate.

Il risultato è un caricamento della pagina istantaneo grazie al fatto che questa pagina è già dipinta in background. Sui dispositivi mobili, Navigation AI si basa sull'identificazione della posizione dell'utente nella pagina e, data la piccola area visibile, può facilmente prevedere dove toccherà.

Sulla base di 1.200 siti web, Navigation AI sta già mostrando risultati spettacolari.

• Risultato n. 1: le pagine Web che utilizzano Navigation AI mostrano costantemente un tempo di caricamento di ~ 2,86 s rispetto a 6,12 s senza Navigation AI

• Risultato n. 2: con Navigation AI, le pagine prerenderizzate mostrano un miglioramento LCP dell'85% (da 3,1 a 0,4 s) e un miglioramento CLS dell'80% (da 0,3 a 0,06 s).Per le pagine precaricate, Navigation AI aumenta LCP del 52% (da 3,1 secondi a 1,5 secondi).

• Risultato n. 3: con Navigation AI, i parametri prestazionali dell'intero sito Web migliorano in modo significativo: LCP del 15%, CLS dell'8% e TTFB del 26%

Ottieni l'accesso a Navigation AI iscrivendoti alla nostra lista d'attesa →

API delle regole di speculazione e WordPress

Nel nostro webinar “Caricamento istantaneo della pagina”, Adam Silverstein, ingegnere delle relazioni con gli sviluppatori di Google, ha rivelato che il team WordPress Core Performance sta lavorando su implementazioni più stabili della nuova API Speculation Rules.

Attualmente, l'attenzione rimane nel rendere disponibile una piccola parte delle funzionalità dell'API ai proprietari dei siti e agli sviluppatori nell'ecosistema per testare l'efficienza e il tasso di adozione prima di renderla parte del nucleo. Ecco cosa possono sfruttare finora gli utenti di WordPress:

• Un modulo nel plugin Performance Lab
• Un plugin autonomo che implementa solo il frontend dell'API Speculation Rules (applica il livello conservativo di "entusiasmo", ma gli sviluppatori sono liberi di modificare il comportamento)

I percorsi WP-admin sono esclusi per impostazione predefinita, ma spetta agli sviluppatori WP individuare i percorsi a cui desiderano dare la priorità.

Il team WordPress Core Performance sta anche lavorando su implementazioni più sofisticate all’interno dei plugin dell’ecosistema. Questo mira ad alleviare parte del lavoro pesante che gli sviluppatori devono fare per capire quali percorsi hanno la massima priorità e quali sono vietati.

Quali miglioramenti stanno arrivando alle regole della speculazione

Attualmente, le regole sulla speculazione sono limitate alle pagine all'interno della stessa scheda, ma sono in corso sforzi per ridurre queste restrizioni.

Per impostazione predefinita, il prerendering è limitato alle pagine della stessa origine. Tuttavia, un recente aggiornamento di Chrome 119 ora supporta il prerendering per pagine multiorigine dello stesso sito, richiedendo l'attivazione tramite un'intestazione HTTP.

Le versioni future potrebbero estendere il prerendering alle pagine di origine incrociata e consentirlo in nuove schede. L'API Speculation Rules è destinata ad espandersi, introducendo punteggi e sintassi per le regole dei documenti e fornendo maggiore flessibilità, come il prerendering dei collegamenti quando si preme il mouse.

Gli esperimenti in corso in Chrome stanno esplorando funzionalità aggiuntive e i siti possono partecipare a una prova di origine per testare e fornire feedback su potenziali aggiunte future.