Resource Waterfall dibuixa cada sol·licitud de la pàgina en una línia de temps, cada barra dividida en les seves fases reals: cua, DNS, TCP, TLS, espera i descàrrega, amb marcadors per a FCP, LCP, DOMContentLoaded i càrrega.
Quan una pàgina se sent lenta, la pregunta sempre és la mateixa: a què està esperant? La resposta del navegador es troba al tauler Xarxa, el que significa obrir DevTools, acoblar un calaix a la pàgina que inspeccioneu i tornar a carregar per detectar l'inici de la càrrega.
Resource Waterfall posa aquesta línia de temps en un tauler flotant al costat de la pàgina. Cada sol·licitud apareix com una barra posicionada per quan va començar i segmentada per on va passar el seu temps: en cua o aturada, cerca de DNS, connexió TCP, encaix de mans TLS, esperant el servidor i després descàrrega. Un segment blau llarg és un servidor lent; un de verd llarg és un fitxer gras; un gris llarg significa que la petició es va asseure esperant el seu torn. La distinció decideix què heu de solucionar.
Els marcadors discontinus de la línia de temps mostren la primera pintura de contingut, la pintura de contingut més gran, el DOMContentLoaded i es carreguen, de manera que podeu veure quines sol·licituds acaben abans que l'usuari vegi res i quines segueixen funcionant després. Els recursos de bloqueig de renderització i les visites de memòria cau es marquen a cada fila, i un únic filtre de bloqueig redueix la llista al que realment retarda la primera pintura.
Filtra per tipus, cerca per URL o ordena per més lent o més gran per trobar el pitjor delinqüent ràpidament. Feu clic a qualsevol fila per veure l'URL complet, el protocol, la transferència i les mides descodificades, l'estat i el desglossament complet de la fase. Les sol·licituds que arriben mentre el tauler està obert es transmeten directament i Exportar JSON copia tota la línia de temps, fites incloses, de manera que es pot lliurar una constatació de rendiment a algú més sense cap captura de pantalla.
Cada barra es divideix en cua, DNS, TCP, TLS, espera i descàrrega, de manera que es poden distingir immediatament un servidor lent, un fitxer gras i una sol·licitud en cua.
Les línies discontínues per a FCP, LCP, DOMContentLoaded i la càrrega mostren quines sol·licituds s'han completat abans que l'usuari vegi contingut i quines encara s'estan executant després d'ell.
Un clic redueix la llista als recursos que realment contenen la primera pintura, amb el recompte total de bloqueig a la barra de resum.
Els recursos que es distribueixen des de la memòria cau es marquen i s'etiqueten en lloc d'aparèixer com a misterioses files de zero bytes, de manera que podeu verificar que la memòria cau realment funciona.
Restringeix el tipus (document, CSS, JS, imatges, tipus de lletra, XHR, multimèdia) cerca per URL o ordena per més lent o més gran per arribar al pitjor infractor en qüestió de segons.
Copieu tota la cascada com a JSON, incloses les fites, els totals i les fases per sol·licitud, per adjuntar-la a un bitllet o comparar-la amb una execució posterior.
Filtreu els recursos que bloquegen la representació i consulteu els fulls d'estil i els scripts exactes que hi ha entre el vostre visitant i el contingut visible.
Ordena pel més lent i mira com un proveïdor d'anàlisi, tipus de lletra o xat apareix a la part superior amb una llarga fase d'espera que no té res a veure amb el teu codi.
Llegiu els colors de la fase: el temps dedicat a l'espera és un problema de backend o CDN, el temps dedicat a la descàrrega és un problema de mida del fitxer. La solució és diferent per a cadascun.
Torneu a carregar i confirmeu que els recursos provenen de la memòria cau i que les mides de transferència són molt més petites que les mides descodificades, demostrant que la compressió està activada.
Exporteu la línia de temps com a JSON i adjunteu-la a un bitllet perquè la següent persona vegi els mateixos números en lloc d'intentar reproduir la vostra sessió.
Feu clic a la icona Resource Waterfall al moll de DevSuite Pro. Tot el que la pàgina ha carregat fins ara apareix a la línia de temps immediatament.
Torneu a carregar amb el tauler obert per capturar la càrrega des de la primera sol·licitud, inclòs el document en si i les fites de pintura.
Premeu el xip de bloqueig per veure només els recursos de bloqueig de renderització o trieu un tipus com ara js o img. Ordena per més lent per posar el pitjor delinqüent al damunt.
Feu clic a qualsevol fila per veure l'URL complet, el protocol, les mides, l'estat i un desglossament fase per fase en mil·lisegons i copieu l'URL si ho necessiteu.
Exportar JSON copia la cronologia completa amb fites i totals, a punt per enganxar-la a un bitllet o conservar-la com a registre abans i després.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 71 eines de desenvolupador per al teu navegador.
