Differenziare correttamente tra precaricamento, prefetch e preconnessione.
Il precaricamento assegna priorità a una risorsa, il precaricamento prepara le possibili pagine successive e la preconnessione stabilisce una connessione. Un utilizzo scorretto consuma risorse.
Per gli sviluppatori web e i gestori di siti web, gli aspetti chiave per "differenziare precaricamento, precaricamento e preconnessione" sono la "pertinenza della navigazione" e l'"alto tasso di successo". La prospettiva di "risorse, compressione e caching" mostra come questi due punti interagiscono nella pratica.
Pubblicato: 3 minuti di lettura · Autore: Sebastian Geier
Quali sono gli scopi rispettivi di precaricamento, precaricamento e preconnessione?
Loading. . .
Elevata percentuale di successo
Il flusso di ricerca è suddiviso in risorse correnti scoperte in ritardo, risorse successive probabili e connessioni esterne costose.
Per ogni collo di bottiglia, viene aggiunto solo il riferimento semanticamente appropriato con attributi di recupero perfettamente corrispondenti.
Le misurazioni prima e dopo verificano la data di inizio, l'effetto della priorità, i riferimenti non utilizzati e le potenziali richieste duplicate.
Esempio pratico: "Competizione di larghezza di banda"
Un font principale dalla sorgente viene scoperto in ritardo tramite CSS e precaricato selettivamente. Per un fornitore di mappe esterno, la preconnessione è sufficiente solo poco prima della probabile richiesta della mappa; un articolo successivo, anche solo potenzialmente, riceve al massimo un precaricamento.
Identità corretta
Tempo risparmiato fino all'effettivo recupero o all'avvio della connessione della risorsa indirizzata.
Percentuale di suggerimenti non utilizzati, download duplicati e richieste critiche soppresse.
Competizione di larghezza di banda
Competizione di larghezza di banda Il precaricamento non necessario può sopprimere CSS, script o immagini più importanti per lo stato visibile.
Connessione orfana Troppi suggerimenti di preconnessione consumano risorse di connessione, anche se alcune origini nella visita non vengono utilizzate.
Richieste duplicate Le discrepanze tra il suggerimento e l'utilizzo effettivo possono causare il ricaricamento dello stesso file da parte del browser.
Riferimento di navigazione
Criterio di test
Riferimento di navigazione
Deve essere chiaro se la risorsa è necessaria ora, se sarà probabilmente necessaria in seguito o se si trova su una fonte esterna.
Criterio di test
Elevata percentuale di successo
Una notifica è utile solo se è altamente probabile che la risorsa o la connessione vengano utilizzate nella situazione descritta.
Identità corretta – URL, tipo di risorsa, modalità CORS e fonte devono corrispondere al successivo recupero per evitare un secondo download.
Cosa deriva da "Distinguere tra precaricamento, prefetch e preconnessione"
È disponibile una risorsa approfondita adeguata. Definire i tempi di esecuzione della cache in base al tipo di file e al rischio di modifica."Come determinare i tempi di esecuzione della cache in base al tipo di file e al rischio di modifica? "
Inoltre: Come la profondità dei link interni influisce sulla frequenza di scansione.
Se si desidera implementare concretamente "Distinguere tra precaricamento, prefetch e preconnessione", è possibile fare riferimento a: Sistemi web robusti Questo documento si concentra su "Risorse, compressione e cache" e "Riferimento alla navigazione".
Conclusione: Distinguere tra precaricamento, prefetch e preconnessione
I suggerimenti sulle risorse sono efficaci solo con la corretta dimensione temporale e un'elevata probabilità di utilizzo. Un maggior numero di suggerimenti non si traduce automaticamente in un percorso critico più veloce.
Fonti e ulteriori informazioni
Queste fonti primarie rendono comprensibili le ipotesi, i limiti del sistema e i metodi di test per "Distinguere tra precaricamento, prefetch e preconnessione".
RFC 9111: Cache HTTPSpecifica IETF principale per la semantica della cache, l'aggiornamento, la rivalidazione e le intestazioni HTTP associate.
Precaricare le risorse critiche per migliorare la velocità di caricamento – web. devPrassi ufficiale del team di Chrome sul precaricamento mirato, le risorse LCP, i font e i costi di una prioritizzazione errata
Tesi chiave
La scelta segue il collo di bottiglia: risorsa corrente sicura, probabile recupero successivo, o costosa risorsa di terze parti. Ogni istruzione viene utilizzata con parsimonia e la sua tempistica viene verificata per accertare un beneficio misurabile.
Cosa non riguarda
Precaricamento, precaricamento e preconnessione non sono tag di accelerazione intercambiabili e, per precauzione, non dovrebbero essere applicati a ogni risorsa esterna.
Di cosa si tratta
Ogni istruzione si riferisce a un diverso scenario futuro: caricare la risorsa corrente, preparare una possibile pagina successiva o stabilire una connessione probabile in anticipo.
Parametri vitali e prestazioni del sito Web
Dare priorità alle immagini invece di caricare tutto in modo differito
"Distinguere tra precaricamento, precaricamento e preconnessione" include, come verifica separata, la domanda: quali immagini dovrebbe essere prioritarie per un sito web e quali dovrebbero essere caricate con un ritardo?
Parametri vitali e prestazioni del sito Web
Mitigazione efficace dei file CSS che bloccano il rendering
"Distinguere tra precaricamento, precaricamento e preconnessione" è integrato da una decisione separata: come si possono mitigare i file CSS che bloccano il rendering senza creare errori di visualizzazione?
Panoramica degli Insight
Tutti gli Insight di VELUNO in sintesi
Ulteriori analisi sui sistemi web, la visibilità digitale e modelli di lavoro robusti.
Identità corretta: primo test di qualità
Un diagramma a cascata con una risorsa importante che si avvia in ritardo è il punto di partenza ideale. Il suo riferimento di navigazione determina quindi se utilizzare il precaricamento, il prefetch o la preconnessione.