El Rendiment de la pàgina proporciona una visió general instantània del rendiment de qualsevol pàgina web — mètriques de temps de càrrega (FCP, DOMContentLoaded, càrrega completa, TTI), estadístiques DOM (recompte d'elements, profunditat d'anidament, listeners d'esdeveniments) i un desglossament de recursos que mostra el recompte i la mida de JavaScript, CSS, imatges, fonts i altres actius. Una puntuació de rendiment codificada per colors ofereix un indicador ràpid de l'estat.
La perfilació del rendiment amb Lighthouse o WebPageTest proporciona una anàlisi profunda però requereix temps i genera informes aclaparadors. De vegades només necessiteu una resposta ràpida: «Aquesta pàgina és ràpida o lenta? Quin és el problema principal?» El Rendiment de la pàgina us ofereix aquesta visió general instantània. Llegeix les dades de temporització de l'API de rendiment del navegador i l'API de temporització de navegació (dades que ja es recullen — no cal cap càrrega addicional de la pàgina) i les presenta en un tauler visual i net. La secció superior mostra les mètriques de temporització clau: First Contentful Paint (quan apareix el primer contingut), DOMContentLoaded (quan l'HTML s'analitza completament), Càrrega completa (quan finalitzen tots els recursos) i Temps fins a la interactivitat (quan la pàgina es torna responsiva). Cada mètrica es codifica per colors — verd per a ràpid, groc per a moderat, vermell per a lent — basant-se en els llindars de Web Vitals. A continuació, un desglossament de recursos mostra quant d'amplada de banda es dedica a JavaScript, CSS, imatges, fonts i altres tipus de recursos, amb gràfics de barres visuals per a una comparació fàcil. La secció d'estadístiques DOM mostra el recompte total d'elements, la profunditat màxima d'anidament i el recompte de listeners d'esdeveniments — indicadors de la complexitat del DOM que afecten el rendiment de la renderització.
Mostra el First Contentful Paint (FCP), DOMContentLoaded, la càrrega completa de la pàgina i el Temps fins a la interactivitat (TTI) — les quatre mètriques de rendiment més importants. Cada una es codifica per colors: verd (ràpid), groc (moderat), vermell (lent) basant-se en els llindars establerts de Web Vitals.
Gràfic de barres visual que mostra el recompte i la mida total de cada tipus de recurs: fitxers JavaScript, fulls d'estil CSS, imatges, fonts i altres actius. Veieu instantàniament quin tipus de recurs contribueix més al pes de la pàgina.
Mostra el recompte total d'elements DOM, la profunditat màxima d'anidament i el recompte total de listeners d'esdeveniments. Les mides del DOM grans (2000+ elements) i l'anidament profund (15+ nivells) s'identifiquen com a possibles colls d'ampolla de rendiment.
Una puntuació única de 0 a 100 resumeix l'estat de rendiment de la pàgina, codificada per colors en verd (85+), groc (50-84) o vermell (0-49). Basada en una combinació ponderada de mètriques de temporització i eficiència de recursos.
Mostra la mida combinada de tots els recursos descarregats en MB. Desglossat per categoria per veure que 842 KB és JavaScript, 245 KB són imatges i 128 KB és CSS — identificant els contribuïdors més pesants.
Llegeix les dades de rendiment de l'API de rendiment del navegador — dades que ja es recullen durant la càrrega normal de la pàgina. Cap retest sintètic, cap sol·licitud de xarxa addicional i cap impacte en el rendiment per executar l'eina.
Obriu qualsevol pàgina i obteniu una visió general instantània del rendiment. És ràpida (puntuació verda), moderada (groga) o lenta (vermella)? El tauler respon en menys d'un segon — sense esperar que Lighthouse s'executi.
Si la pàgina és lenta, el desglossament de recursos mostra per què. 1,2 MB de JavaScript? Aquí és el coll d'ampolla. 800 KB d'imatges sense optimitzar? Aquí és la solució. El desglossament visual fa evidents els contribuïdors més pesants.
Executeu el Rendiment de la pàgina abans de fer les optimitzacions i anoteu les mètriques. Feu els canvis, recarregueu i torneu-lo a executar. Compareu FCP, temps de càrrega i pes total de la pàgina per verificar que les optimitzacions han tingut l'impacte esperat.
Executeu el Rendiment de la pàgina al vostre lloc i als llocs dels vostres competidors. Compareu els temps de càrrega, els pesos de les pàgines i les distribucions de recursos. Els competidors envien menys JavaScript? Les seves imatges estan millor optimitzades?
Executeu l'eina en pàgines clau regularment durant el desenvolupament. Si la puntuació de rendiment baixa o el pes de la pàgina augmenta sobtadament, heu introduït una regressió — detecteu-la abans d'arribar a producció.
Obriu el dock flotant de DevSuite Pro i feu clic a la icona de Rendiment de la pàgina. El tauler apareix instantàniament amb les dades de rendiment de la càrrega de la pàgina actual.
Comproveu les quatre mètriques de temporització clau a la part superior: FCP, DOMContentLoaded, Càrrega completa i TTI. Els valors en verd són ràpids, el groc és moderat i el vermell necessita millora.
Mireu el gràfic de barres de recursos per veure quin tipus d'actiu és més pesat. JavaScript sovint és el contribuïdor més gran — si JS supera els 500 KB, pot valer la pena fer code-splitting o lazy-loading.
Reviseu les estadístiques DOM. Si el recompte d'elements supera 1500 o la profunditat d'anidament supera 15, considereu simplificar el marcatge per millorar el rendiment de la renderització.
La puntuació global ofereix un referent ràpid. Executeu l'eina abans i després de les optimitzacions per mesurar la millora.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
