Revision 637: Das Devtools Performance Tab

In dieser Episode tauchen wir tief in die Chrome DevTools ein und beschäftigen uns mit der Frage, wie wir das Performance-Tab optimal nutzen können, um wertvolle Einsichten in die Ladezeiten und Rendering-Prozesse unserer Webseiten zu gewinnen. SCHAUNOTIZEN [00:01:20] DAS DEVTOOLS PERFORMANCE TAB Wir nehmen alles mit, da bleibt kein Auge trocken: Recording mit Reload oder nicht? Was bedeuten die verschiedenen Tortenfarben? Wie funktioniert das mit den verschiedenen horizontalen Lanes und kann man dort auch die Core Web Vitals ablesen? Was zeigt der Callstack? Wann braucht man CPU-Throttling? Wofür macht man Screenshots und wann zeichnet man die Speicherauslastung mit auf? Welche Rolle spielen Browser-Extensions bei der Performance-Analyse? LINKS PERFORMANCE OF CSS VARIABLES Lisi Linhart stellte sich schon 2017 die Frage, ob und wenn ja wann CSS Variablen bzw. Custom Propeties einen Impact auf die Browser-Performance haben. BENCHMARKING THE PERFORMANCE OF CSS @PROPERTY Im Jahr 2024 wiederholte Bramus van Damme Lisis Test und ging zusätzlich der Frage nach, welchen Einfluss @property-Deklarationen dabei haben. CHROMIUM PERF TEST RUNNER Low Level Performance-Tests in Chrome automatisiert ausführen WEBPAGETEST Die Mutter aller Performance-Testing Tools. SPEEDCURVE SaaS, der auf Webpagetest aufbaut und es um viele nützliche Bestandteile ergänzt.

Om Podcasten

Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering. Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr. Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu. Supported uns bei Patreon: https://patreon.com/workingdraft