Skip to content

Performance: Perfmap für Bilder

Wasserfalldiagramme sind sehr gut für die Analyse der Frontendperformance einer Webseite geeignet. Es ist aber schwierig, Nichttechnikern Probleme auf deren Basis verständlich zu machen.

Wasserfalldiagramme

Wasserfalldiagramm am Beispiel gnuheidix.deEs ist eine Menge Vorwissen notwendig, um Wasserfalldiagramme, welche jeder vernünftige Browser auf Anfrage für einen Seitenladevorgang erstellt, deuten zu können.

Im Bild ist meine Blogstartseite als Wasserfall zu sehen. Lediglich die CSS-Ressource blockiert das Rendering während des Ladevorgangs.

Perfmap

Perfmap-Ergebnis für gnuheidix.deEs wird eine Heatmap durch das Bookmarklet Perfmap auf Basis der Informationen aus dem Resource Timing API in die Seite gezeichnet. Dies kann sehr einfach interpretiert werden und hilft, die Prioritäten bei der Frontendperformanceverbesserung bezüglich teurer Bilder richtig zu setzen. Im Bild ist zu sehen, dass meine Blogstartseite relativ unspektakulär ist.

Diese Heatmap ist bei bilderlastigen Seiten wesentlich sinnvoller. :-D

Fazit

Wasserfall und Heatmap haben ihre Daseinsberechtigung. Die Heatmap gibt uns neue Möglichkeiten, um ressourcenlastige Seiten zu analysieren. Versucht es doch auch einmal. :-)

Kommentare

Noch keine Kommentare

Kommentar schreiben

Wie heißt der Planet, auf dem wir leben?