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
Es 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
Es 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. 
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