Abdeckung: Nicht verwendete JavaScript- und CSS-Elemente finden

Kayce Basken
Kayce Basken

Auf dem Tab „Abdeckung“ in den Chrome-Entwicklertools können Sie nicht verwendeten JavaScript- und CSS-Code finden. Durch das Entfernen von nicht verwendetem Code können Sie den Seitenaufbau beschleunigen und mobilen Nutzern mehr mobile Daten zur Verfügung stellen.

Codeabdeckung analysieren
Abbildung 1: Codeabdeckung analysieren

Überblick

Das Versenden von nicht verwendetem JavaScript oder CSS ist ein häufiges Problem in der Webentwicklung. Angenommen, Sie möchten auf Ihrer Seite die Schaltflächenkomponente von Bootstrap verwenden. Um die Schaltflächenkomponente zu verwenden, müssen Sie in Ihrem HTML-Code einen Link zum Bootstrap-Stylesheet hinzufügen:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Dieses Stylesheet enthält nicht nur den Code für die Schaltflächenkomponente. Sie enthält den CSS-Code für alle Bootstrap-Komponenten. Aber Sie verwenden keine der anderen Bootstrap-Komponenten. Ihre Seite lädt also eine Menge CSS herunter, das sie nicht benötigt. Dieser zusätzliche CSS-Code ist aus folgenden Gründen ein Problem:

  • Der zusätzliche Code verlangsamt die Ladezeit Ihrer Seite. Weitere Informationen finden Sie unter CSS mit dem Rendering blockieren.
  • Wenn ein Nutzer über ein Mobilgerät auf die Seite zugreift, verbraucht der zusätzliche Code seine mobilen Daten.

Tab „Abdeckung“ öffnen

  1. Öffnen Sie das Befehlsmenü.
  2. Geben Sie die ersten Buchstaben von coverage ein, wählen Sie den Befehl Abdeckung anzeigen aus und drücken Sie die Eingabetaste, um den Befehl auszuführen. Der Tab Abdeckung wird in der Leiste geöffnet.
Tab „Abdeckung“
Abbildung 2. Tab Abdeckung

Codeabdeckung aufzeichnen

  1. Klicken Sie auf dem Tab Abdeckung auf eine der folgenden Schaltflächen:
    • Klicken Sie auf Instrumentierung der Abdeckung starten und Seite aktualisieren Aktualisieren, wenn Sie sehen möchten, welcher Code zum Laden der Seite erforderlich ist.
    • Klicken Sie auf Abdeckung instrumentieren Aufnehmen, wenn Sie sehen möchten, welcher Code nach der Interaktion mit der Seite verwendet wird.
  2. Klicken Sie auf Instrumentierungsabdeckung beenden und Ergebnisse anzeigen Beenden, wenn Sie die Erfassung der Codeabdeckung beenden möchten.

Codeabdeckung analysieren

In der Tabelle auf dem Tab Abdeckung sehen Sie, welche Ressourcen analysiert wurden und wie viel Code in jeder Ressource verwendet wird. Klicken Sie auf eine Zeile, um die entsprechende Ressource im Bereich Quellen zu öffnen und eine Aufschlüsselung des verwendeten Codes und des nicht verwendeten Codes zu sehen. Nicht verwendete Codezeilen haben eine rote Linie am Anfang.

Ein Bericht zur Codeabdeckung
Abbildung 3: Ein Bericht zur Codeabdeckung
  • Die Spalte URL enthält die URL der analysierten Ressource.
  • In der Spalte Type (Typ) wird angegeben, ob die Ressource CSS, JavaScript oder beides enthält.
  • Die Spalte Total Bytes (Byte insgesamt) gibt die Gesamtgröße der Ressource in Byte an.
  • In der Spalte Unused Bytes (Nicht verwendete Byte) sehen Sie die Anzahl der nicht verwendeten Byte.
  • Die letzte, unbenannte Spalte enthält eine Visualisierung der Spalten Total Bytes (Gesamtbyte) und Unused Bytes. Der rote Abschnitt des Balkens enthält nicht verwendete Byte. Der grüne Abschnitt enthält Byte.