Il riquadro Rete nel DevTools del browser consente di identificare le risorse e quando vengono caricate. Ogni riga nel riquadro Network corrisponde a un URL specifico caricato dalla tua app web.
Scopri cosa carichi
Per trovare la giusta strategia di memorizzazione nella cache per la tua applicazione web, devi avere un handle per cosa stai caricando esattamente. Quando crei un'applicazione web affidabile, la rete può essere soggetta a forze oscure di ogni tipo. Devi comprendere le vulnerabilità della rete se vuoi affrontarle nella tua app.
Potresti pensare di avere già un'idea piuttosto chiara di cosa carica la tua applicazione web. Se utilizzi solo qualche piccolo dettaglio di file HTML, JavaScript, CSS e immagine statici, potrebbe essere questo il caso. Tuttavia, non appena inizi a mixare risorse di terze parti ospitate su reti CDN (Content Delivery Network) utilizzando richieste API dinamiche e risposte generate dal server, il quadro diventa rapidamente più cupo.
Ad esempio, una strategia di memorizzazione nella cache appropriata per pochi file CSS di piccole dimensioni probabilmente non ha senso per centinaia di immagini di grandi dimensioni.
Scopri quando carichi
Un'altra parte dell'immagine complessiva del caricamento avviene quando viene caricato tutto.
Alcune richieste alla rete, ad esempio la richiesta di navigazione per il codice HTML iniziale, vengono effettuate incondizionatamente non appena un utente visita un determinato URL. Questo codice HTML potrebbe contenere riferimenti impostati come hardcoded a file CSS o JavaScript fondamentali che devono essere caricati anch'essi per poter visualizzare la pagina interattiva. Tutte queste richieste si trovano nel tuo percorso di caricamento critico. ma dovrai memorizzarli nella cache per ottenere una velocità affidabile.
Altre risorse, come le richieste API o gli asset con caricamento lento, potrebbero non iniziare a caricarsi molto tempo dopo il completamento del caricamento iniziale. Se queste richieste si verificano solo in seguito a una specifica sequenza di interazioni degli utenti, potrebbe essere richiesto un insieme di risorse completamente diverso in più visite alla stessa pagina. Una strategia di memorizzazione nella cache meno aggressiva è spesso appropriata per contenuti che hai identificato come esterni al percorso di caricamento critico.
Le colonne Nome e Tipo consentono di sapere che cosa
Le colonne Nome e Tipo contribuiscono a fornire un quadro significativo dei contenuti caricati. La risposta alla domanda "cosa si sta caricando?" nell'esempio precedente è un totale di quattro URL, ognuno dei quali rappresenta un tipo univoco di contenuti.
Il nome rappresenta l'URL richiesto dal browser, anche se nell'elenco vedrai solo l'ultima parte del percorso dell'URL. Ad esempio, se viene caricato
https://example.com/main.css, finirai per vedere solo main.css
elencato sotto Nome.
Gli ultimi caratteri del percorso dell'URL, dopo il punto (ad es. "css"), sono noti come estensione dell'URL.
L'estensione dell'URL in genere indica il tipo di risorsa richiesta e si mappa direttamente alle informazioni mostrate nella colonna Tipo. Ad esempio, v2.html è un documento e main.css è un foglio di stile.
La colonna con struttura a cascata aiuta a capire quando
Esamina la colonna Struttura a cascata, partendo dall'alto e procedendo verso il basso. La lunghezza di ogni barra rappresenta la quantità totale di tempo dedicata al caricamento di ogni risorsa. Come è possibile distinguere una richiesta effettuata come parte del percorso di caricamento critico e una richiesta che viene attivata dinamicamente, molto tempo dopo il completamento del caricamento iniziale della pagina?
La prima richiesta nella struttura a cascata riguarda sempre il documento HTML, ad esempio v2.html. Tutte le richieste successive partiranno (come una struttura a cascata) da questa richiesta di navigazione iniziale, in base alle immagini, agli script e agli stili a cui fa riferimento il documento HTML.
La struttura a cascata mostra che non appena v2.html termina il caricamento, le richieste degli asset a cui fa riferimento (chiamate anche risorse secondarie) iniziano. Il browser può richiedere più sottorisorse contemporaneamente, come mostrato dalle barre sovrapposte nella colonna con struttura a cascata per main.css e logo.svg. Infine, dallo screenshot puoi notare che il caricamento di main.js inizia per ultimo e termina anche il caricamento degli altri tre URL.