Negli ultimi due moduli, hai scoperto concetti come differire il
caricamento di JavaScript, caricamento lento di immagini ed elementi <iframe>.
Il differimento del caricamento delle risorse riduce l'utilizzo di rete e CPU durante il processo iniziale
caricamento pagina scaricando le risorse nel momento in cui sono necessarie,
anziché caricarli in anticipo, dove potrebbero potenzialmente rimanere inutilizzati.
Ciò può migliorare i tempi di caricamento iniziali della pagina, ma le successive interazioni potrebbero comportare
un ritardo se le risorse necessarie per alimentarle non sono già caricate al momento
si verificano.
Ad esempio, se una pagina contiene un selettore di date personalizzato, puoi posticipare la data delle risorse del selettore finché l'utente non interagisce con l'elemento. Tuttavia, il caricamento le risorse on demand del selettore della data possono comportare un ritardo, forse lieve, ma forse no, a seconda della connessione di rete, delle funzionalità del dispositivo o entrambi, fino a quando le risorse non vengono scaricate, analizzate e disponibili per l'esecuzione.
Si tratta di un equilibrio un po' complicato: non vuoi sprecare larghezza di banda caricando risorse che potrebbero rimanere inutilizzate, ma ritardando le interazioni e la pagina successiva i carichi di lavoro potrebbero non essere ideali. Per fortuna, esistono diversi strumenti per trovare un migliore equilibrio tra questi due estremi. In questo modulo alcune tecniche che puoi utilizzare per arrivarci, come il precaricamento delle risorse, il prerendering di intere pagine e la pre-memorizzazione delle risorse nella cache mediante un service worker.
Precarica le risorse necessarie nel prossimo futuro con priorità bassa
È possibile recuperare preventivamente le risorse, tra cui immagini, fogli di stile
o JavaScript, usando il suggerimento della risorsa <link rel="prefetch">. La
Il suggerimento prefetch indica al browser che è probabile che sia richiesta una risorsa in
nel prossimo futuro.
Quando viene specificato un hint prefetch, il browser può quindi avviare una richiesta
per quella risorsa alla priorità più bassa per evitare di contendersi con le risorse
richiesta per la pagina corrente.
Il precaricamento delle risorse può migliorare l'esperienza utente, in quanto l'utente non necessario attendere che le risorse necessarie vengano scaricate nel prossimo futuro, come possono essere recuperate istantaneamente dalla cache del disco quando necessario.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Lo snippet HTML precedente informa il browser che può eseguire il precaricamento
date-picker.js e date-picker.css quando è inattivo. È possibile anche
precarica le risorse in modo dinamico man mano che l'utente interagisce con la pagina in
JavaScript.
prefetch è supportato su tutti i browser moderni ad eccezione di Safari, dove è
disponibili dietro una bandiera. Se devi caricare preventivamente
per il tuo sito web in un modo che funzioni su tutti i browser e che tu stia utilizzando
un service worker. Leggi la sezione successiva di questo modulo sulla pre-memorizzazione nella cache
mediante un service worker.
Precarica le pagine per velocizzare le navigazioni future
È anche possibile precaricare una pagina e tutte le relative risorse secondarie specificando
Attributo as="document" quando rimanda a un documento HTML:
<link rel="prefetch" href="/page" as="document">
Quando il browser è inattivo, potrebbe essere avviata una richiesta a bassa priorità per /page.
Nei browser basati su Chromium, puoi precaricare i documenti utilizzando API Speculation Rules. Le regole di speculazione sono definite come un oggetto JSON incluse nel codice HTML della pagina o aggiunte dinamicamente tramite JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
L'oggetto JSON descrive una o più azioni, che al momento supportano solo
prefetch e prerender e un elenco di URL associati all'azione. Nella
lo snippet HTML precedente, il browser riceve istruzioni per precaricare /page-a
e /page-b. Analogamente a <link rel="prefetch">, le regole di speculazione sono
suggerimento che il browser potrebbe ignorare in determinate circostanze.
Le librerie come Quicklink migliorano la navigazione nelle pagine tramite di precaricamento o di prerendering dei link alle pagine quando queste sono visibili all'interno dell'area visibile dell'utente. Ciò aumenta la probabilità che l'utente prima o poi per giungere a quella pagina, a differenza del precaricamento di tutti i link presenti nella pagina.
Pagine di prerendering
Oltre a precaricare le risorse, è anche possibile suggerire al browser per eseguire il prerendering di una pagina prima che l'utente vi acceda. In questo modo, puoi raggiungere si carica immediatamente, mentre la pagina e le relative risorse vengono recuperate ed elaborate sullo sfondo. Quando l'utente accede alla pagina, questa viene inserita nel in primo piano.
Il prerendering è supportato tramite l'API Speculation Rules:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Precarica demo e prerendering
Pre-memorizzazione nella cache dei service worker
È anche possibile precaricare le risorse in modo speculativo utilizzando un service worker.
La pre-memorizzazione nella cache dei service worker può recuperare e salvare risorse utilizzando l'API Cache,
consentendo al browser di gestire la richiesta utilizzando l'API Cache senza andare
in rete. La pre-memorizzazione nella cache dei service worker utilizza un service worker molto efficace
strategia di memorizzazione nella cache, nota come strategia solo per la cache. Questo pattern è molto
efficace perché, una volta inserite le risorse nella cache dei service worker,
vengono recuperati quasi istantaneamente
su richiesta.
Per prememorizzare nella cache le risorse utilizzando un service worker, puoi usare Workbox. Se è preferibile scrivere codice personalizzato per memorizzare nella cache un insieme . In ogni caso, decidi di utilizzare un service worker per prememorizzare nella cache è importante sapere che la pre-memorizzazione nella cache ha luogo quando il servizio worker è installato. Dopo l'installazione, le risorse prememorizzate nella cache vengono disponibili per il recupero in qualsiasi pagina controllata dal service worker sul tuo sito web.
Workbox utilizza un manifest di precache per determinare quali risorse devono essere prememorizzati nella cache. Un manifest pre-cache è un elenco di file e informazioni sul controllo delle versioni che funge da "fonte di dati" le risorse vengano prememorizzate nella cache.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Il codice precedente è un manifest di esempio che include due file:
script.ffaa4455.js e /index.html. Se una risorsa contiene versione
le informazioni presenti nel file stesso (noto come hash del file), il revision
può essere lasciato come null, perché il file è già sottoposto al controllo delle versioni (ad esempio,
ffaa4455 per la risorsa script.ffaa4455.js nel codice precedente). Per
risorse senza controllo delle versioni, è possibile generare una revisione al momento della build.
Una volta configurato, un service worker può essere utilizzato per prememorizzare nella cache le pagine statiche o per velocizzare le navigazioni nelle pagine successive.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Ad esempio, in una pagina della scheda di prodotto di e-commerce, è possibile utilizzare un service worker
prememorizzare nella cache i CSS e JavaScript necessari per il rendering della pagina dei dettagli del prodotto,
rendendo molto più veloce la navigazione verso la pagina dei dettagli del prodotto. Nella
nell'esempio precedente, product-page.ac29.css e product-page.39a1.js sono
prememorizzati nella cache. Il metodo precacheAndRoute disponibile in workbox-precaching
registra automaticamente i gestori necessari per garantire che le risorse prememorizzate nella cache
vengono recuperati dall'API dei service worker quando necessario.
Poiché i service worker sono ampiamente supportati, puoi utilizzare il service worker la pre-memorizzazione nella cache su qualsiasi browser moderno laddove richiesto dalla situazione.
di Gemini Advanced.Verifica le tue conoscenze
Con quale priorità viene applicato un suggerimento prefetch?
Qual è la differenza tra il prerecupero e eseguire il rendering di una pagina?
La cache del service worker e la cache HTTP sono uguali.
A seguire: una panoramica dei web worker
Ora che sai in che modo il precaricamento, il prerendering e la pre-memorizzazione dei service worker ad esempio quando si tratta di accelerare la navigazione verso il futuro. pagine, sei nella posizione di prendere decisioni informate su come questo per il tuo sito web e per i suoi utenti.
A seguire, viene fornita una panoramica dei web worker e di come possono impiegare costose a partire dal thread principale e dare a quest'ultimo più spazio per le interazioni degli utenti. Se ti è mai capitato di chiederti cosa potresti fare per fornire alla Fissa un po' di respiro, allora i prossimi due moduli ti valse la pena!