Resource Waterfall disegna ogni richiesta effettuata dalla pagina su una sequenza temporale, ogni barra suddivisa nelle sue fasi reali - coda, DNS, TCP, TLS, attesa e download - con indicatori per FCP, LCP, DOMContentLoaded e caricamento.
Quando una pagina sembra lenta, la domanda è sempre la stessa: cosa sta aspettando? La risposta del browser si trova nel pannello Rete, il che significa aprire DevTools, agganciare un cassetto sulla pagina che stai controllando e ricaricare per riprendere l'inizio del caricamento.
Resource Waterfall inserisce la timeline in un pannello mobile accanto alla pagina. Ogni richiesta appare come una barra posizionata in base al momento dell'avvio e segmentata in base al tempo effettivamente trascorso: in coda o in stallo, ricerca DNS, connessione TCP, handshake TLS, attesa del server, quindi download. Un lungo segmento blu indica un server lento; uno lungo verde è un file grosso; uno lungo e grigio significa che la richiesta è rimasta in attesa del suo turno. La distinzione decide cosa dovresti correggere.
Gli indicatori tratteggiati sulla sequenza temporale mostrano First Contentful Paint, Largest Contentful Paint, DOMContentLoaded e caricati, in modo da poter vedere quali richieste terminano prima che l'utente veda qualcosa e quali sono ancora in corso dopo. Le risorse di blocco del rendering e gli accessi alla cache vengono contrassegnati su ogni riga e un singolo filtro di blocco riduce l'elenco a ciò che sta effettivamente ritardando la prima verniciatura.
Filtra per tipo, cerca per URL o ordina in base al più lento o al più grande per trovare rapidamente il peggiore trasgressore. Fare clic su qualsiasi riga per visualizzarne l'URL completo, il protocollo, le dimensioni di trasferimento e decodifica, lo stato e la suddivisione completa delle fasi. Le richieste che arrivano mentre il pannello è aperto vengono trasmesse direttamente e Export JSON copia l'intera sequenza temporale, tappe fondamentali incluse, in modo che i risultati delle prestazioni possano essere consegnati a qualcun altro senza uno screenshot.
Ogni barra è suddivisa in coda, DNS, TCP, TLS, attesa e download, quindi un server lento, un file fat e una richiesta in coda sono immediatamente distinguibili.
Le linee tratteggiate per FCP, LCP, DOMContentLoaded e load mostrano quali richieste vengono completate prima che l'utente veda il contenuto e quali sono ancora in esecuzione dopo di esso.
Un clic riduce l'elenco alle risorse che effettivamente trattengono la prima vernice, con il conteggio totale dei blocchi nella barra di riepilogo.
Le risorse servite dalla cache sono contrassegnate ed etichettate invece di apparire come misteriose righe a zero byte, in modo da poter verificare che la memorizzazione nella cache funzioni davvero.
Restringi per tipo (documento, CSS, JS, immagini, caratteri, XHR, media) cerca per URL oppure ordina in base al più lento o al più grande per raggiungere il peggiore trasgressore in pochi secondi.
Copia l'intera cascata come JSON, inclusi i traguardi, i totali e le fasi per richiesta, da allegare a un ticket o confrontare con un'esecuzione successiva.
Filtra per risorse che bloccano la visualizzazione e visualizza i fogli di stile e gli script esatti che si frappongono tra il tuo visitatore e il contenuto visibile.
Ordina in base al più lento e guarda un provider di analisi, carattere o chat apparire in alto con una lunga fase di attesa che non ha nulla a che fare con il tuo codice.
Leggi i colori delle fasi: il tempo trascorso in attesa è un problema di backend o CDN, il tempo trascorso a scaricare è un problema di dimensioni del file. La correzione è diversa per ciascuno.
Ricarica e conferma che le risorse provengono dalla cache e che le dimensioni di trasferimento sono molto inferiori a quelle decodificate, dimostrando che la compressione è effettivamente attiva.
Esporta la sequenza temporale come JSON e allegala a un ticket in modo che la persona successiva veda gli stessi numeri invece di provare a riprodurre la tua sessione.
Fare clic sull'icona Resource Waterfall nel dock DevSuite Pro. Tutto ciò che la pagina ha caricato finora appare immediatamente sulla timeline.
Ricarica con il pannello aperto per acquisire il carico fin dalla prima richiesta, incluso il documento stesso e le tappe fondamentali della verniciatura.
Premi il chip di blocco per visualizzare solo le risorse che bloccano la visualizzazione oppure scegli un tipo come js o img. Ordina per più lento per mettere in cima il peggiore trasgressore.
Fai clic su qualsiasi riga per visualizzarne l'URL completo, il protocollo, le dimensioni, lo stato e una suddivisione fase per fase in millisecondi e copia l'URL se ne hai bisogno.
Esporta JSON copia l'intera sequenza temporale con traguardi e totali, pronta per essere incollata in un ticket o conservata come record prima e dopo.
Installa DevSuite Pro gratuitamente e sblocca più di 71 strumenti per sviluppatori per il tuo browser.
