{"id":77553,"date":"2024-05-07T11:46:49","date_gmt":"2024-05-07T10:46:49","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77553&preview=true&preview_id=77553"},"modified":"2025-03-05T17:01:01","modified_gmt":"2025-03-05T16:01:01","slug":"speculative-loading","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/speculative-loading\/","title":{"rendered":"Come sfruttare lo Speculative Loading per aumentare la velocit\u00e0 delle pagine di un sito WordPress"},"content":{"rendered":"

Oggi le pagine web sono ricche di immagini, video ed elementi interattivi che mirano a migliorare l’esperienza dell’utente. Tuttavia, questi elementi possono rallentare il caricamento della pagina.<\/p>\n

Con il progredire della tecnologia, un obiettivo rimane costante: le prestazioni<\/em>. Tutti vogliono pagine web che si carichino alla velocit\u00e0 della luce<\/a>.<\/p>\n

Un modo per rendere pi\u00f9 veloce il caricamento delle pagine \u00e8 quello di effettuare il prerendering o il prefetch prima che l’utente vi acceda.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Breve storia del prerendering<\/h2>\n

Nel 2011, il team di Chromium ha introdotto una prima forma di prerendering<\/a> nel browser Chrome attraverso il tag <link rel=\"prerender\" \u2026 ><\/code>.<\/p>\n

Questo permetteva agli sviluppatori<\/a> di suggerire ai browser<\/a> le pagine che un utente avrebbe potuto visitare successivamente. Il browser recuperava e renderizzava silenziosamente queste pagine in background, riducendo drasticamente<\/em> il tempo di caricamento quando l’utente navigava verso quelle pagine.<\/p>\n

Nonostante i vantaggi, questa prima implementazione del prerendering utilizzava molte risorse di banda e CPU e poteva causare problemi di privacy se l’utente non visitava le pagine prerenderizzate. Inoltre, era necessario selezionare manualmente i link di cui effettuare il prerendering, il che non era sempre efficace o fattibile.<\/p>\n

Per risolvere questi problemi, Chrome ha deprecato il prerendering che utilizzava il suggerimento rel=prerender<\/code> in favore del metodo NoState Prefetch<\/a>, che prevede il recupero delle risorse di una pagina senza eseguire JavaScript o altre azioni potenzialmente invasive per la privacy.<\/p>\n

Il metodo NoState Prefetch migliorava il caricamento delle risorse ma non poteva garantire un caricamento istantaneo della pagina come un prerendering completo.<\/p>\n

La Speculation Rules API<\/h2>\n

La Speculation Rules API<\/a> \u00e8 una nuova API sperimentale definita da JSON che precarica in modo speculativo gli URL prima di navigare verso di essi, con tempi di rendering pi\u00f9 rapidi e una migliore esperienza utente.<\/p>\n

L’API consente agli sviluppatori di configurare regole con una struttura definita in formato JSON all’interno di uno script script type=\"speculationrules\"<\/code> che il browser pu\u00f2 utilizzare per decidere di quali URL eseguire il prerendering.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Lo stesso vale per il prefetching, che spesso pu\u00f2 essere un buon primo passo verso il prerendering:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
I frammenti di codice qui sopra mostrano come funziona la Speculation Rules API: specificando un elenco di URL di cui eseguire il prefetch o il prerender.<\/p>\n
Recentemente, Google ha annunciato nuovi miglioramenti alla Speculation Rules API<\/a>, che ora offre la possibilit\u00e0 di trovare automaticamente i link utilizzando le regole dei documenti<\/em>. L’API fa s\u00ec che vengano recuperati gli URL dal documento in base a una condition where<\/code>.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
In questo frammento di codice, tutti gli URL della pagina vengono considerati per il prerendering, tranne quelli che portano alle pagine di login<\/a> e di amministrazione di WordPress. \u00c8 anche possibile specificare un livello di eagerness<\/code> – eager<\/code> (subito), moderate<\/code> (al passaggio del mouse dopo 200 ms) e conservative<\/code> (al passaggio del mouse o al tocco).<\/p>\n
Per trovare i link nella pagina corrente, possono essere utilizzati selettori CSS<\/a> in alternativa o insieme a href<\/code> :<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Quando si utilizza la Speculation Rules API, la si pu\u00f2 ispezionare utilizzando i servizi in background degli speculative loads<\/strong> (carichi speculativi) nella scheda Application<\/strong> di Chrome.<\/p>\n
\"Ispezionare
Ispezionare la Speculation Rules API con i servizi in background Speculative loads nella scheda Application di Chrome.<\/figcaption><\/figure>\n
C’\u00e8 dell’altro: lo vedremo nella sezione dedicata al debug.<\/p>\n
Supporto dei browser<\/h3>\n
La Speculation Rules API \u00e8 supportata<\/a> dai browser moderni basati su Chromium<\/a>, tra cui Chrome ed Edge, a partire da specifiche versioni.<\/p>\n
\"Il
Il supporto dei browser per la Speculation Rules API (fonte: Mozilla<\/a>).<\/figcaption><\/figure>\n
Questo garantisce che gli utenti dei browser supportati possano beneficiare di tempi di caricamento pi\u00f9 rapidi, mentre quelli degli altri browser non subiranno effetti negativi, perch\u00e9 l’API \u00e8 uno strumento che rispetta il progressive enhancement.<\/p>\n
Il plugin Speculative Loading per WordPress<\/h2>\n
Per sfruttare i vantaggi della Speculation Rules API in WordPress, il team WordPress Performance<\/a> (di cui fanno parte sviluppatori di Google) ha recentemente rilasciato il plugin Speculative Loading<\/a>, che consente il caricamento speculativo degli URL di frontend collegati alla pagina.<\/p>\n
Finora il plugin \u00e8 stato poco adottato perch\u00e9 l’API \u00e8 ancora in fase iniziale, ma ha ricevuto alcune recensioni positive.<\/p>\n
\"Recensioni
Recensioni dalla comunit\u00e0 di WordPress per il plugin Speculative Loading.<\/figcaption><\/figure>\n
Di default, il plugin \u00e8 configurato per eseguire il prerendering degli URL del frontend di WordPress quando l’utente passa il mouse su un link pertinente. Questo pu\u00f2 essere personalizzato tramite la sezione Speculative loading<\/strong> in Settings<\/strong> > Reading<\/strong>.<\/p>\n
\"Personalizzare
Personalizzare il plugin Speculative Loading nelle impostazioni di WordPress.<\/figcaption><\/figure>\n
Ci\u00f2 significa che tutti gli URL collegati alla pagina vengono prerenderizzati con una configurazione eagerness<\/code> di livello moderate<\/code>, che di solito si attiva quando si passa il mouse su un link. Per questo motivo, non \u00e8 necessario fare nulla dopo aver attivato il plugin: funziona subito<\/em>.<\/p>\n
Supponiamo che abbiate gi\u00e0 installato il plugin Speculative Loading<\/strong> su un sito WordPress. Usate i DevTools di Chrome<\/a> per ispezionare il sito e cliccate sulla scheda Elements<\/strong>. Scorrendo verso il basso, noterete che \u00e8 gi\u00e0 stato aggiunto uno script script type=\"speculationrules\"<\/code> con le varie regole di speculazione.<\/p>\n
\"Ispezionando
Ispezionando il sito WordPress si vede che il plugin Speculative Loading aggiunge automaticamente le regole speculative.<\/figcaption><\/figure>\n
Il plugin utilizza una Regex per specificare i link che devono essere prerenderizzati, i link da non prerenderizzare e per impostare l’eagerness. Le sezioni seguenti spiegano nel dettaglio queste regole.<\/p>\n
Limiti per prevenire l’uso eccessivo<\/h3>\n
Chrome ha dei limiti per evitare un uso eccessivo dell’API:<\/p>\n\n\n\n\n\n
Eagerness<\/strong><\/td>\nPrefetch<\/strong><\/td>\nPrerender<\/strong><\/td>\n<\/tr>\n
immediate\/eager<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
moderate\/conservative<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Questi limiti prevengono l’uso eccessivo dell’API attraverso varie impostazioni basate sull’urgenza e sull’interazione con l’utente.<\/p>\n