Chrome DevTools: Hilfreiche Funktionen und Einstellungen kurz erklärt

Damit alle Schritte dieses Artikels nachvollzogen werden können müssen wir zunächst sicherstellen, dass wir alle dieselben Spracheinstellungen verwenden.

Spracheinstellungen der Chrome DevTools

Genau wie beim Chrome selbst kann man auch die Sprache der Dev Tools einstellen. Diese Spracheinstellung ist unabhängig vom Rest des Browsers. Meine DevTools habe ich auf Englisch (US) eingestellt, da die meisten Anleitungen zu technischen Themen in englischer Sprache verfasst sind, sowie auch alle relevanten technischen Spezifikationen, und ich viele Übersetzungen auch nicht sonderlich gelungen finde. Der ganze Artikel bezieht sich daher auf DevTools mit englischer Spracheinstellung.

Die Sprache lässt sich einfach in den Preferences beziehungsweise Einstellungen umstellen:

Network-Tab der Chrome DevTools

Eines der wohl am meisten verwendeten Tools in den Chrome Developer Tools ist der Network Tab. Der Network Tab zeigt alle Requests an die der Browser während des Renderns einer Seite abgesetzt hat.  Ohne Anpassungen werden hier nur wenige Informationen dargestellt wie Status Code, Type, Initiator, Size und Time. Weitere wichtige Informationen wie zum Beispiel Host und Protokoll, Übertragungsprotokoll sowie Informationen zur Komprimierung und bzgl. Caching fehlen. Die Darstellung kann einfach angepasst werden, um diese zusätzlichen Informationen direkt mit aufzuführen.

Über die Einstellungen können wir „Big Request Rows“ aktivieren und bekommen dadurch neben der Übertragungsgröße auch noch die tatsächliche Größe der Ressource in unkomprimierter Form mit angezeigt.

Zusätzlich können wir der Tabelle über einen Rechtsklick auf die Kopfzeile weitere Spalten hinzufügen.

Hier empfiehlt es sich die folgenden Spalten „Path“, „Scheme“ und „Domain“ zu aktivieren, damit man alle Bestandteile einer URL immer direkt ablesen kann.

Darüber hinaus aktiviere ich immer noch die Spalte „Protocol“, sowie weitere wichtige Felder die im Bereich „Response Headers“ versteckt sind wie „Content-Encoding“ und „Vary“ sowie bei Bedarf auch „Cache-Control“, „ETag“ und „Last-Modified“ um Caching-Einstellungen schnell überblicken zu können.

In der Folge haben wir jetzt eine Darstellung des Netzwerk-Tabs bei der wir deutlich mehr wichtige Informationen auf einen Blick einsehen können, wobei ein Monitor mit hoher Auflösung natürlich von Vorteil ist:

Der jetzige Überblick erlaubt es schnell zu erkennen ob veraltete Protokolle eingesetzt werden, ob und mit welchem Algorithmus Inhalte komprimiert sind Und ob es Probleme bei den Vary Headern gibt.

Durch einen auf Caching angepassten View mit „Cache-Control“, „ETag“ und „Last-Modified“ lassen sich analog dazu Caching Probleme einfach aufdecken und debuggen. 

Coverage Tool der Chrome DevTools

Die meisten sind mit dem Google Lighthouse Audit gut vertraut und haben ein grundlegendes Verständnis davon was zu tun ist, um die Performance einer Seite zu optimieren. Die wenigsten wissen jedoch, dass es mit dem Coverage Tool ein Hilfsmittel gibt und Performance Problemen durch unnötiges und unbenutzte CSS und JavaScript auf den Grund zu gehen. Das Tool ist standardmäßig nicht in den Tabs sichtbar und muss daher erst über den Unterpunkt der Einstellungen „More Tools“, „Coverage“ aktiviert werden.

Hat man das Tool aktiviert so muss man einen Audit der Seite anstoßen, bei dem diese neu geladen wird, und erhält dann in der Folge Auswertungen darüber in welchem Umfang die in die Seite eingebundenen CSS und JavaScript Dateien genutzt werden. Klickt man eine der aufgelisteten Dateien an so werden die genutzten und ungenutzten Bereiche der Datei farbig hervorgehoben. Ungenutzte Bereiche sind dabei rot markiert.

Für die Arbeit mit dem Tool ist wichtig zu verstehen, dass sich die CSS-Abdeckung ändert, wenn man mit der Seite interagiert, und bei dieser Interaktion weitere Styles oder weiterer Code verwendet werden. Es empfiehlt sich also Menüs auf- und zuzuklappen und über alle Seitenelemente zu hovern, um ein besseres Verständnis davon zu bekommen was tatsächlich verwendet wird.

Analog dazu ändert sich die JavaScript Coverage, wenn durch die Interaktion mit Elementen auf der Seite zusätzlicher Code ausgeführt wird.

Optimierungen, die man hieraus ableiten kann, sind zum Beispiel die vollständige Entfernung von unbenutztem CSS und JavaScript oder die Aufspaltung in mehrere Dateien. Insbesondere CSS mit Media-Queries (für zum Beispiel Mobile- und Desktop-Bildschirmbreiten) lässt sich in mehrere CSS-Dateien aufteilen und die jeweils passende CSS-Datei kann dann vom Browser in Abhängigkeit des Media-Queries geladen werden.

Performance Tab der Chrome DevTools

Das letzte Tool, welches ich vorstellen möchte, ist der Performance-Tab der Chrome Developer Tools. Diese Ansicht eignet sich ganz hervorragend, um die Probleme zu diagnostizieren die hinter schlechten Core Web Vitals Werten stecken. Da wir im Web inzwischen auf eine mobile Nutzung optimieren sollten wir hier zunächst über die richtigen Einstellungen sicherstellen, dass wir einem mobilen Mainstream-Endgerät nahekommen und Caching ebenfalls deaktiviert ist, um den ersten Seitenaufruf zu simulieren. Hilfreich ist es auch Screenshots und Memory zu aktivieren bevor wir die Analyse starten und damit unseren Report erhalten.

Der Report ist gespickt mit Informationen und häufig erhält man durch Klicken oder Hovern noch weitere Informationen, was etwas verwirrend sein kann.

Im unteren Bereich des Reports findet man zunächst eine Zusammenfassung, welche die prozentuale zeitliche Verteilung der einzelnen Tasks darstellt. Die hier verwendeten Farben finden sich auch im Zeitstrahl am oberen Ende wieder und man kann damit ablesen zu welchem Zeitpunkt der Browser mit welchen Aufgaben beschäftigt ist.

Durch Hovern über den Zeitstrahl kann man sich den jeweiligen Stand des Renderings zum jeweiligen Zeitpunkt anzeigen lassen, was sehr hilfreich ist, um die einzelnen Paints und Layout Shifts nachzuvollziehen. 

Sofern Shifts auftreten, lassen diese sich aber auch noch in den Timings beziehungsweise der Layout Shift Zeile nachvollziehen und durch einen Klick auf die jeweiligen Symbole werden sie im Layout View hervorgehoben.

Die Zeilen Network, Frames und Animations lassen sich aufklappen, um weitere Informationen zu erhalten und auch hier kann man jeweils durch Hovern noch mehr Details einsehen.

Das detaillierte Logging ermöglicht es den Rendering Prozess zu verstehen und diesen durch Optimierung stark zu beschleunigen, was sich letztendlich positiv auf Nutzerinteraktionen und die Conversionrates auswirkt.

Neben der Zeitstrahl Darstellung ist auch die tabellarische Darstellung über Bottom-up und Call Tree immer sehr hilfreich bei der Optimierung. Insbesondere die Angabe wie lange der Browser zum Kompilieren des JavaScript Codes braucht schaue ich mir häufig an. Auch diese Ansicht kann man wieder aufklappen, um noch mehr Informationen zu bekommen.

Fazit

Google hat uns mit den Chrome DevTools mächtige Werkzeuge an die Hand gegeben mit denen wir Webseiten und deren Verarbeitung durch den Browser im Detail besser verstehen können. Da es sich dazu noch um ein kostenloses Tool handelt, empfehle ich jedem SEO sich mit den Ansichten im Detail stärker auseinander zu setzen. Für die tägliche Arbeit eines technischen SEOs unverzichtbar!

FAQ

Was sind Chrome DevTools und wofür werden sie verwendet?

Chrome DevTools sind ein integriertes Entwicklungswerkzeug im Chrome-Browser, das Entwicklern hilft, Webseiten zu analysieren und zu optimieren. Sie bieten Funktionen wie Debugging, Performance-Analyse und das Testen von responsivem Design.

Wie kann ich mit Chrome DevTools die Ladezeit meiner Webseite verbessern?

Du kannst die Netzwerk-Tab in den DevTools nutzen, um die Ladezeiten von Ressourcen zu analysieren und Engpässe zu identifizieren. Optimiere Bilder, minimiere CSS und JavaScript und nutze Caching, um die Performance zu steigern.

Welche Möglichkeiten bieten die Chrome DevTools zur Fehlerbehebung im JavaScript-Code?

Mit dem Sources-Tab kannst du Breakpoints setzen, den Code schrittweise durchlaufen und Variablen überwachen, um Fehler im JavaScript-Code zu identifizieren und zu beheben.

Wie kann ich das responsive Design meiner Webseite mit Chrome DevTools testen?

Nutze den Device-Toolbar-Modus, um deine Webseite auf verschiedenen Bildschirmgrößen und Geräten zu simulieren. So kannst du sicherstellen, dass das Design auf mobilen und Desktop-Geräten gut aussieht.

Welche Vorteile bietet die Nutzung der Chrome DevTools für SEO?

Mit den DevTools kannst du die Ladegeschwindigkeit, die mobile Optimierung und die Struktur deiner Webseite analysieren, um SEO-Verbesserungen vorzunehmen. Tools wie der Lighthouse-Bericht helfen dir, die SEO-Leistung zu bewerten und zu optimieren.

Wie kann ich mit Chrome DevTools CSS-Probleme auf meiner Webseite identifizieren?

Im Elements-Tab kannst du den CSS-Code deiner Webseite inspizieren und Änderungen in Echtzeit vornehmen, um Probleme wie fehlerhafte Stile oder Layout-Fehler zu beheben.