Sideydelse giver et øjeblikkeligt ydelsesoverblik over enhver webside — indlæsningstidsmålinger (FCP, DOMContentLoaded, fuld indlæsning, TTI), DOM-statistik (elementantal, nestingsdybde, hændelseslyttere) og en ressourceopdeling, der viser antal og størrelse af JavaScript, CSS, billeder, skrifttyper og andre aktiver. En farvekoderet ydelses-score giver en hurtig sundhedsindikator.
Ydelses-profilering med Lighthouse eller WebPageTest giver dybdegående analyse, men tager tid at køre og producerer overvældende rapporter. Nogle gange har du bare brug for et hurtigt svar: Er denne side hurtig eller langsom? Hvad er det største problem? Sideydelse giver dig det øjeblikkelige overblik. Den læser timingdata fra browserens Performance API og Navigation Timing API (data, der allerede er indsamlet — ingen ekstra sideindlæsning nødvendig) og præsenterer det i et rent, visuelt dashboard. Den øverste sektion viser vigtige timingmålinger: First Contentful Paint (hvornår det første indhold vises), DOMContentLoaded (hvornår HTML er fuldt parsset), Fuld indlæsning (hvornår alle ressourcer er færdige) og Time to Interactive (hvornår siden reagerer). Hver måling er farvekoderet — grøn for hurtig, gul for moderat, rød for langsom — baseret på Web Vitals-tærskler. Nedenunder viser en ressourceopdeling, hvor meget båndbredde der bruges på JavaScript, CSS, billeder, skrifttyper og andre ressourcetyper med visuelle søjlediagrammer til nem sammenligning. DOM-statistiksektionen viser det samlede elementantal, maksimal nestingsdybde og antal hændelseslyttere — indikatorer for DOM-kompleksitet, der påvirker gengivelsesydelsen.
Viser First Contentful Paint (FCP), DOMContentLoaded, Fuld sideindlæsning og Time to Interactive (TTI) — de fire vigtigste ydelses-målinger. Hver er farvekoderet: grøn (hurtig), gul (moderat), rød (langsom) baseret på etablerede Web Vitals-tærskler.
Visuelt søjlediagram der viser antal og samlet størrelse af hver ressourcetype: JavaScript-filer, CSS-stilark, billeder, skrifttyper og andre aktiver. Se øjeblikkeligt, hvilken ressourcetype bidrager mest til sidevægten.
Viser det samlede DOM-elementantal, maksimal nestingsdybde og samlet antal hændelseslyttere. Store DOM-størrelser (2000+ elementer) og dyb nesting (15+ niveauer) markeres som potentielle ydelsesbegrænsninger.
En enkelt 0-100-score opsummerer sidens ydelsesstatus, farvekoderet grøn (85+), gul (50-84) eller rød (0-49). Baseret på en vægtet kombination af tidsmålinger og ressourceeffektivitet.
Viser den kombinerede størrelse af alle downloadede ressourcer i MB. Opdelt efter kategori, så du kan se, at 842 KB er JavaScript, 245 KB er billeder og 128 KB er CSS — identificerer de tungeste bidragydere.
Læser ydelses-data fra browserens Performance API — data, der allerede er indsamlet under den normale sideindlæsning. Ingen syntetisk gen-testning, ingen ekstra netværksanmodninger og ingen ydelsespåvirkning fra at køre værktøjet.
Åbn enhver side og få et øjeblikkeligt ydelsesoverblik. Er den hurtig (grøn score), moderat (gul) eller langsom (rød)? Dashboardet besvarer dette på under et sekund — ingen ventetid på at Lighthouse kører.
Hvis siden er langsom, viser ressourceopdelingen hvorfor. 1,2 MB JavaScript? Det er flaskehalsen. 800 KB ikke-optimerede billeder? Det er løsningen. Den visuelle opdeling gør de tungeste bidragydere indlysende.
Kør sideydelse før optimeringer, og noter målinger. Foretag dine ændringer, genindlæs og kør det igen. Sammenlign FCP, indlæsningstid og samlet sidevægt for at bekræfte, at dine optimeringer havde den forventede effekt.
Kør sideydelse på dit websted og dine konkurrenters websteder. Sammenlign indlæsningstider, sidevægte og ressourcefordelinger. Leverer konkurrenter mindre JavaScript? Er deres billeder bedre optimeret?
Kør værktøjet på nøglesider regelmæssigt under udvikling. Hvis ydelses-scoren falder eller sidevægten pludselig stiger, har du introduceret en regression — fang den, før den når produktion.
Åbn den flydende DevSuite Pro-dock og klik på ikonet for sideydelse. Dashboardet vises øjeblikkeligt med ydelses-data for den aktuelle sideindlæsning.
Kontroller de fire vigtige tidsmålinger øverst: FCP, DOMContentLoaded, Fuld indlæsning og TTI. Grønne værdier er hurtige, gul er moderat, rød kræver forbedring.
Se på ressource-søjlediagrammet for at se, hvilken aktivtype er tungest. JavaScript er ofte den største bidragyder — hvis JS er over 500 KB, kan det være værd at code-splitte eller lazy-loade.
Gennemgå DOM-statistikken. Hvis elementantallet overstiger 1500 eller nestingsdybden overstiger 15, overvej at forenkle markeringen for at forbedre gengivelsesydelsen.
Den samlede score giver et hurtigt benchmark. Kør værktøjet før og efter optimeringer for at måle forbedringen.
Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.
