La velocità è tutto su Internet. Gli utenti si aspettano che le pagine web si carichino all'istante, e anche un ritardo di un secondo può portare a tassi di rimbalzo e perdite di fatturato. Questo è particolarmente vero per i siti WordPress, che spesso si basano su più plugin e contenuti pesanti.
Il caricamento speculativo offre un modo più intelligente per velocizzare il caricamento dei siti web, preparando le pagine prima ancora che gli utenti ci clicchino sopra. Invece di attendere un'azione dell'utente per recuperare i dati, il caricamento speculativo utilizza la tecnologia predittiva per precaricare o pre-renderizzare le pagine importanti in background. Questa guida esplora il suo funzionamento, come implementarlo in WordPress utilizzando il plugin Speculative Loadinge perché sta attirando l'attenzione della comunità degli esperti di performance.
Se desideri migliorare le prestazioni e ridurre i tempi di caricamento del tuo sito WordPress, questa tecnologia è fondamentale da conoscere.
Una rapida introduzione al prerendering: ieri e oggi
Per comprendere il caricamento speculativo, è utile sapere come si è evoluto il pre-rendering. Nel 2011, il team di Chromium ha introdotto il<link rel=”prerender”> tag, che consentiva ai browser di caricare silenziosamente intere pagine in anticipo. L'idea era di indovinare quale pagina un utente avrebbe visitato successivamente e visualizzarla in background. Quando l'utente cliccava sul link, la pagina appariva all'istante.
Questa funzionalità, pur essendo potente, presentava i suoi problemi. Consumava troppa banda e risorse della CPU, a volte caricando pagine che l'utente non aveva mai visitato. Inoltre, sollevava problemi di privacy, soprattutto sui dispositivi condivisi. Di conseguenza, Chrome l'ha sostituita con un metodo più cauto chiamato NoState Prefetch, che recuperava solo le risorse della pagina senza eseguire script o visualizzare l'intera pagina.
Sebbene NoState Prefetch abbia contribuito a ridurre i caricamenti non necessari, non è comunque riuscito a garantire lo stesso incremento di velocità garantito dal prerendering completo.
Problemi con i tempi di caricamento lenti?
I nostri esperti possono ottimizzare il tuo sito WordPress per ottenere la massima velocità e prestazioni. Migliora l'esperienza utente e aumenta le conversioni oggi stesso.
Che cos'è l'API Speculation Rules?
L'API Speculation Rules è una soluzione moderna progettata per ripristinare il prerendering, ma con maggiore controllo, flessibilità e minori rischi. Questa API consente agli sviluppatori di definire un set di regole in uno script JSON. Queste regole indicano al browser quali pagine precaricare o prerenderizzare, a seconda del comportamento dell'utente e di altri fattori.
Ad esempio, una configurazione JSON di base per il prerendering appare così:
<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["about.html", "contact.html"] } ] } </script>Questo semplice script indica al browser di pre-renderizzare gli URL elencati, in modo che vengano caricati quasi istantaneamente al clic. Puoi anche utilizzare lo stesso formato per pre-caricare le pagine:
<script type="speculationrules"> { "prefetch": [ { "urls": ["services.html", "pricing.html"] } ] } </script>I recenti miglioramenti consentono ora regole basate sui documenti, consentendo ai browser di selezionare automaticamente i link dalla pagina e applicare il caricamento speculativo. Ciò riduce la necessità di elencare manualmente gli URL e rende l'API più dinamica. Le regole possono essere basate su corrispondenze href, selettori CSS o una combinazione di entrambi, offrendo agli sviluppatori un controllo preciso sui link interessati.
Questa funzionalità non solo migliora la navigazione dell'utente, ma garantisce anche migliori prestazioni di WordPress nelle pagine frontend.
Come funziona il caricamento speculativo in WordPress
In WordPress, il caricamento speculativo non è più solo un esperimento per sviluppatori. Grazie ai recenti sforzi del WordPress Performance Team, questa funzionalità è ora accessibile ai proprietari di siti web tramite una semplice integrazione con un plugin.
Ecco come funziona: il caricamento speculativo consente al tuo sito web di prevedere quale link interno un utente probabilmente cliccherà successivamente. Una volta previsto, il browser pre-carica le risorse necessarie o esegue il pre-rendering dell'intera pagina in background. Ciò significa che quando l'utente clicca sul link, la pagina appare immediatamente perché il browser ha già svolto il lavoro più impegnativo.
Al centro di questo processo c'è l'API Speculation Rules, che funge da roadmap per i browser. Utilizza una struttura definita in JSON per definire quali URL devono essere precaricati e a quali condizioni. In WordPress, questo meccanismo può essere applicato agli URL frontend, in particolare per blog, pagine di negozi o elenchi di servizi in cui è probabile che gli utenti passino da una pagina all'altra.
Ciò che rende il caricamento speculativo particolarmente potente è la configurazione dell'impazienza:
- Eager: il browser carica la pagina immediatamente.
- Moderato: la pagina viene pre-renderizzata dopo che l'utente ha passato il mouse sopra un collegamento per un breve periodo di tempo (in genere 200 ms).
- Conservativo: il browser attende un'interazione maggiore, come un clic del mouse o un tocco di avvio.
Questo approccio a più livelli garantisce che il caricamento speculativo non sprechi banda, ma migliori comunque i tempi di caricamento delle pagine ad alto interesse. La maggior parte dei siti WordPress trae vantaggio dall'utilizzo dell'impostazione moderata, che garantisce un equilibrio tra velocità ed efficienza.
Il plugin Speculative Loading: installazione e configurazione
Per implementare il caricamento speculativo sul tuo sito WordPress senza dover intervenire sul codice, la soluzione più semplice è il plugin Speculative Loading, sviluppato da Google e dal team principale di WordPress. Questo plugin è stato introdotto per aiutare i proprietari di siti a sfruttare le regole di speculazione senza dover approfondire le configurazioni manuali.
Fasi di installazione:
- Vai alla dashboard di WordPress.
- Vai su Plugin > Aggiungi nuovo.
- Cerca “Carico speculativo”.
- Fare clic su Installa, quindi su Attiva.
Una volta attivato, il plugin aggiunge uno script speculationrules direttamente al codice HTML del tuo sito. Questo script utilizza regole a livello di documento per applicare automaticamente il prerendering agli URL pertinenti del frontend di WordPress.
Per impostazione predefinita, il plugin utilizza l'impostazione "moderate eagerness". Ciò significa che attende che l'utente passi il mouse su un link per un breve istante prima di iniziare il prerendering della pagina di destinazione. Questo comportamento è ottimizzato per le prestazioni e garantisce che non sovraccarichi le risorse di sistema né interferisca con la privacy dell'utente.
Puoi gestire le impostazioni del plugin andando su Impostazioni > Lettura nella tua dashboard. Qui troverai una nuova sezione chiamata Caricamento Speculativo, dove puoi:
- Cambia la modalità di speculazione (Prefetch o Prerender)
- Visualizza o aggiorna la configurazione predefinita
- Fornire esclusioni condizionali per URL specifici
Ad esempio, WordPress esclude automaticamente percorsi come /wp-admin/ e /wp-login.php dalla pre-renderizzazione. Puoi aggiungere le tue esclusioni per URL come /checkout/ o /cart/ utilizzando i filtri di WordPress.
Questa configurazione a mani libere rende incredibilmente semplice anche per chi non è uno sviluppatore abilitare il prerendering sul proprio sito e aumentare la velocità sulle pagine visitate più di frequente.
Supporto e compatibilità del browser
Uno degli aspetti più interessanti del caricamento speculativo è che è già supportato dai browser moderni. L'API Speculation Rules funziona in modo nativo nei browser basati su Chromium come Google Chrome e Microsoft Edge, a partire da versioni specifiche.
Se un visitatore utilizza un browser compatibile, il caricamento speculativo si attiverà immediatamente e migliorerà le prestazioni percepite. Se il browser non lo supporta, il sito continuerà a funzionare normalmente. Questo rende il caricamento speculativo un miglioramento progressivo: migliora l'esperienza laddove possibile, senza mai compromettere nulla.
Questo tipo di compatibilità è importante per i siti WordPress rivolti a un pubblico ampio. Che i visitatori utilizzino un browser desktop o un dispositivo mobile, il caricamento speculativo garantisce un rendering più rapido, soprattutto quando navigano rapidamente tra le pagine interne.
Gli sviluppatori possono verificare il supporto del browser tramite strumenti come Can I Use oppure esaminando il comportamento direttamente in Chrome DevTools nella scheda Caricamenti speculativi.
Regole e filtri avanzati per sviluppatori
Il caricamento speculativo è già potente di per sé, ma gli sviluppatori possono spingersi oltre personalizzando gli URL da includere o escludere dal prerendering e dal prefetching. Questo livello di controllo è particolarmente utile per negozi di e-commerce, siti di membership o applicazioni dinamiche in cui non tutte le pagine devono essere caricate in anticipo.
WordPress rende possibile tutto questo tramite filtri come plsr_speculation_rules_href_exclude_paths. Questo filtro consente agli sviluppatori di fornire esclusioni condizionali, consentendo il precarico solo di determinati URL in base alla modalità (prerender o prefetch), al percorso o persino ai parametri di query.
Esempio 1: Escludi URL del carrello
Se vuoi interrompere il caricamento speculativo sulle pagine relative al carrello, puoi utilizzare il seguente frammento:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/cart/*'; return $exclude_paths; } );Questo garantisce che qualsiasi URL corrispondente a /cart/ o ai suoi sottopercorsi non venga prerenderizzato o precaricato. È utile per evitare un carico inutile sul server o l'attivazione di azioni troppo prematuramente.
Esempio 2: Consenti Prefetch ma disabilita Prerender
Supponiamo che tu voglia consentire il prefetching ma impedire il prerendering per le pagine prodotto sensibili. Puoi aggiungere una logica per rilevare la modalità:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/products/*'; } return $exclude_paths; }, 10, 2 );Ciò offre agli sviluppatori un controllo granulare sul comportamento di determinati URL del core di WordPress con caricamento speculativo, prevenendo problemi di privacy, proteggendo i contenuti dinamici e migliorando l'esperienza utente.
È anche possibile indirizzare i link con classi CSS come .no-prefetch o .no-prerender, a seconda della configurazione del front-end. Ad esempio, i link con queste classi possono essere saltati dal caricamento anticipato utilizzando selector_matches nelle regole di speculazione JSON.
Grazie a queste tecniche, gli sviluppatori possono garantire che il comportamento di caricamento speculativo si allinei perfettamente con gli obiettivi del loro sito, soprattutto quando si tratta di utenti autentificati, flussi di pagamento o link nofollow che non devono essere precaricati.
Debug del caricamento speculativo in Chrome DevTools
Una volta attivato il caricamento speculativo sul tuo sito WordPress, è importante verificare che funzioni come previsto. Fortunatamente, Chrome DevTools offre un modo efficace per ispezionare il comportamento speculativo direttamente nel browser.
Per iniziare il debug, apri il tuo sito in Chrome e premi F12 per avviare DevTools. Quindi:
- Vai alla Applicazione .
- Scorri verso il basso fino a Carichi speculativi.
- Vedrai un elenco di URL che sono stati caricati in modo speculativo, ovvero prerenderizzati o precaricati.
Questo pannello mostra lo stato di ciascun URL, ad esempio:
- Non attivato (nessuna interazione dell'utente ancora),
- Attivato (al passaggio del mouse o al clic),
- Prerenderizzato, o
- Precaricato.
Passando il mouse sui diversi link del tuo sito, la scheda "Caricamenti Speculativi" si aggiornerà in tempo reale. Questo ti permetterà di vedere quali URL vengono elaborati in background in base alle tue regole di speculazione.
Ad esempio, se hai abilitato l'avidità moderata, Chrome eseguirà il prerendering solo di due URL alla volta utilizzando il sistema FIFO (First In, First Out). Ciò significa che dopo aver passato il mouse su tre link, il terzo potrebbe non essere visualizzato correttamente se gli altri due sono ancora attivi.
Puoi anche esplorare le pagine prerenderizzate in modo più approfondito utilizzando:
- Scheda Elementi: visualizza l'HTML del contenuto prerenderizzato.
- Scheda Rete: visualizza i file già richiesti e memorizzati nella cache.
- Console e sorgenti: verificare se gli script vengono ritardati o eseguiti correttamente dopo l'attivazione.
Cambiando l' istanza del renderer nel menu a discesa in alto a destra, puoi isolare la pagina pre-renderizzata e ispezionarne l'attività di rete o la struttura DOM, proprio come una scheda live.
Questo livello di visibilità aiuta gli sviluppatori a correggere le regole di speculazione, a risolvere i problemi dei plugin di caricamento speculativo e a garantire che la configurazione non influisca sul comportamento o sulle prestazioni dell'utente.
Prefetch vs. Prerender: qual è la differenza?
Sebbene il caricamento speculativo includa sia il prefetching che il prerendering, i due funzionano in modo diverso e hanno scopi distinti.
Precaricamento
- Scarica risorse come HTML, CSS e JavaScript.
- Non esegue il rendering della pagina.
- Utilizzato per ridurre il tempo di caricamento una volta che l'utente ha effettivamente cliccato.
- Minore impatto sulle risorse del sistema.
- Ideale per le pagine che probabilmente verranno visitate ma che non devono essere eseguite prematuramente.
Pre-rendering
- Carica e visualizza l'intera pagina in una scheda nascosta.
- La pagina è completamente interattiva quando l'utente naviga.
- Utilizza più CPU e memoria.
- Ideale per link ad alta priorità o percorsi di navigazione comuni.
Ad esempio, potresti voler pre-renderizzare gli URL frontend di WordPress come post di blog o categorie di prodotti, pre-caricando solo le pagine di contatto o di supporto che potrebbero non richiedere un'interazione immediata.
È possibile configurarlo nel plugin Speculative Loading impostando la modalità Speculation su Prerender o Prefetch nel pannello delle impostazioni del plugin.
La modalità scelta inciderà sulla velocità con cui gli utenti fruiscono dei contenuti, sulla quantità di memoria di sistema utilizzata e sulla percezione complessiva delle prestazioni del tuo sito WordPress.
Anche in questo caso, gli strumenti per sviluppatori di Chrome tornano utili. Nella scheda "Caricamenti Speculativi", potrete notare la differenza: le pagine prerenderizzate mostreranno un'anteprima completa del DOM, mentre le pagine precaricate saranno elencate come risorse passive in background.
Comprendere questa distinzione consente ai proprietari e agli sviluppatori di siti di prendere decisioni più intelligenti in base al comportamento degli utenti, alla larghezza di banda disponibile e all'architettura del sito.
Impatto dell'API Speculation Rules sull'analisi
Sebbene il caricamento speculativo possa migliorare notevolmente i tempi di caricamento delle pagine e l'esperienza utente, introduce alcune sfide quando si tratta di monitorare l'analisi dei siti web.
Quando una pagina viene pre-renderizzata, viene caricata in background, prima ancora che l'utente vi acceda. Questo può creare una situazione in cui strumenti di analisi come Google Analytics, le mappe di calore o i tracker di eventi potrebbero registrare una visita o un evento prima che l'utente visualizzi effettivamente la pagina o interagisca con essa.
Per evitare falsi positivi, gli sviluppatori devono implementare un monitoraggio condizionale basato sulla navigazione effettiva dell'utente.
Ad esempio, non tutte le piattaforme di analisi supportano il rilevamento del prerendering per impostazione predefinita. Alcune potrebbero registrare una visualizzazione di pagina durante il caricamento in background, anche se il visitatore non clicca mai sul link. Fortunatamente, strumenti come Google Analytics, Google Publisher Tag e Google AdSense gestiscono già questo aspetto in modo efficiente. Ritardano il monitoraggio degli eventi finché la pagina prerenderizzata non diventa attiva.
Tuttavia, se si utilizzano script di tracciamento personalizzati o strumenti di terze parti, sarà necessario aggiungere un controllo per garantire che il tracciamento venga avviato solo quando la pagina è attiva. Questo è possibile utilizzando la proprietà document.prerendering in combinazione con un listener di eventi prerenderingchange.
Ecco un rapido esempio utilizzando JavaScript:
const whenActivated = new Promise((resolve) => { if (document.prerendering) { document.addEventListener('prerenderingchange', resolve); } else { resolve(); } }); async function initAnalytics() { await whenActivated; // Inizializza qui il codice di analisi } initAnalytics();Questo approccio garantisce che i dati di marketing riflettano l'interazione reale degli utenti, non i processi in background. È particolarmente importante per i team che utilizzano il monitoraggio degli utenti reali (Real User Monitoring, RUM), i test A/Bo l'analisi basata sugli eventi che influenzano le decisioni aziendali.
Che tu stia utilizzando un plugin di caricamento speculativo, regole di speculazione personalizzate o implementando manualmente l'API delle regole di speculazione, verifica sempre in che modo ciò potrebbe influire sulle analisi e adatta di conseguenza il tuo monitoraggio.
Con la giusta configurazione, otterrai il meglio da entrambi i mondi: prestazioni più rapide e informazioni accurate.
Potenziali insidie: quando disattivare il caricamento speculativo
Per quanto utile sia il caricamento speculativo, ci sono scenari in cui abilitarlo potrebbe non essere la soluzione ideale. In alcuni casi, può causare comportamenti imprevisti o addirittura interrompere la funzionalità del sito, soprattutto su pagine dinamiche o siti con dati utente sensibili.
Ecco alcune situazioni in cui dovresti prendere in considerazione la disattivazione del caricamento speculativo per URL o ruoli utente specifici.
1. Utenti registrati e contenuti personalizzati
Evitate di pre-renderizzare pagine che offrono contenuti personalizzati, come dashboard di account o aree riservate. Caricarle in background utilizzando i dati di sessione di qualcun altro può creare confusione o persino rivelare informazioni sensibili.
Per evitare ciò, è possibile escludere completamente gli utenti registrati dall'attivazione del caricamento speculativo oppure filtrare URL specifici con contenuti basati sulla sessione utilizzando PHP.
2. Carrello eCommerce, Checkout e pagine di pagamento
Escludere pagine come /carrello/, /cassa/ o qualsiasi URL con parametri di query legati alla selezione dei prodotti. Queste pagine spesso si basano su aggiornamenti in tempo reale e potrebbero visualizzare informazioni errate se pre-renderizzate prima che l'utente confermi la propria intenzione.
Utilizzare il filtro plsr_speculation_rules_href_exclude_paths per rimuovere tali pagine dal caricamento speculativo:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/checkout/*'; $exclude_paths[] = '/cart/*'; return $exclude_paths; } );
In questo modo, gli URL principali di WordPress saranno ottimizzati solo per le pagine in cui il caricamento speculativo aggiunge valore, non per quelle in cui potrebbe interferire con azioni importanti dell'utente.
3. Pagine con stato JavaScript lato client
Le pagine che si basano in larga misura su JavaScript per caricare dati in modo dinamico, come dashboard in tempo reale, moduli o sistemi di prenotazione, non dovrebbero essere pre-renderizzate. Lo stato potrebbe diventare obsoleto o attivare eventi che non avrebbero dovuto essere eseguiti prima del clic dell'utente.
Se si desidera comunque precaricare tali pagine (senza renderle), utilizzare un'esclusione condizionale che disabiliti solo la modalità di prerendering:
add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/live-dashboard/*'; } return $exclude_paths; }, 10, 2 );4. Escludi l'uso di classi CSS
Puoi anche impedire che vengano recuperati link specifici aggiungendo classi CSS come no-prefetch o do-not-prerender. L'API Speculation Rules ti consente di utilizzare selector_matches nella tua configurazione JSON:
Ciò è particolarmente utile per gli sviluppatori di plugin o i creatori di temi che desiderano offrire un controllo più granulare senza modificare i file PHP.
Il caricamento speculativo è uno strumento fantastico, ma non è una soluzione universale. Con le giuste esclusioni e impostazioni, è possibile utilizzarlo per migliorare le prestazioni evitando errori.
Considerazioni finali: crea un sito WordPress più veloce e sicuro
Il caricamento speculativo è uno dei progressi più entusiasmanti nelle prestazioni web moderne e WordPress lo sta già adottando. Con strumenti come l'API Speculation Rules e il plugin Speculative Loading, proprietari di siti e sviluppatori possono ridurre drasticamente i tempi di caricamento delle pagine, migliorare la navigazione degli utenti e offrire esperienze più fluide a tutti i livelli.
Che tu stia creando un blog ricco di contenuti, un negozio WooCommerce o un sito WordPress dinamico, il caricamento speculativo rende le tue pagine più veloci senza dover toccare codice complesso. E grazie al supporto intelligente dei browser e alle impostazioni personalizzabili, si adatta perfettamente alla maggior parte delle configurazioni.
Prima di abilitarla su tutto il sito, assicurati di rivedere gli URL principali di WordPress, verificare la presenza di pagine dinamiche e applicare esclusioni condizionali dove necessario. Utilizza Chrome DevTools per convalidare il comportamento e monitora sempre l'impatto delle funzionalità speculative sulle tue analisi e sulle metriche delle prestazioni.
Se sei pronto a creare siti web più veloci, intelligenti e coinvolgenti , il caricamento speculativo potrebbe essere la tua arma segreta.
