Ein Bericht zur JavaScript-Codeabdeckung zeigt, welcher Code während einer Beobachtung ausgeführt wurde. Beim Seitenstart nicht ausgeführter Code kann für ein Menü, den Checkout oder eine andere Route erforderlich sein. Wählen Sie anhand des Berichts einen Ansatzpunkt und prüfen Sie die betroffenen Nutzerabläufe, bevor Sie das Bundle ändern.
Beginnen Sie mit der Ressource und den Bedingungen
Starten Sie Milten JS Scanner für die gewünschte Seite. Speichern Sie URL, Datum und Prüfbedingungen zusammen mit dem Ergebnis. Der Scanner beobachtet einen Seitenaufruf ohne Klicks oder Scrollen. Er erfasst das Laden von Skripten, deren Codeabdeckung und JavaScript-Fehler. Er kann nicht belegen, dass eine Datei auf der gesamten Website unnötig ist.
Vergleichen Sie die Ladedaten einer Datei mit ihren Ausführungsdaten. Ein großer Transfer, ein langer Ausführungszeitraum und ein hoher nicht ausgeführter Anteil sind unterschiedliche Beobachtungen. Ein Skript kann schnell heruntergeladen werden und dennoch den Hauptthread beschäftigen. Eine Datei, die nicht geladen wurde, verfügt über keine nützliche Ausführungsmessung für diesen Lauf.
Folgen Sie einem anschaulichen Checkout-Beispiel
Angenommen, app.js enthält Code sowohl für die Landingpage als auch für den Checkout. Die Checkout-Funktion wird beim Öffnen der Landingpage nicht ausgeführt. Dies ist ein Lehrbeispiel, kein gemessenes Kundenergebnis.
Ermitteln Sie die Ressourcen-URL und prüfen Sie, wie die Seite das Skript einbindet. Öffnen Sie den Checkout, bedienen Sie das Menü und besuchen Sie weitere Seiten, die dasselbe Bundle verwenden. Notieren Sie die geprüften Aktionen. Mit Chrome DevTools Coverage können Sie die Aufzeichnung während der Interaktion fortsetzen. Diese Beobachtung deckt mehr ab als ein Scan ausschließlich beim Seitenstart.
Wenn der Checkout den Code benötigt, würde das Entfernen eine nützliche Aktion unterbrechen. Das Laden dieser Funktion, wenn der Benutzer zur Kasse geht, könnte eine Untersuchung wert sein. Die Entscheidung hängt von der Anwendung und den Auswirkungen auf die nächste Interaktion ab.
Nutzen Sie verfügbare Source Maps
Eine Source Map ordnet ein erzeugtes Bundle seinen Quellmodulen zu. Die Modulansicht von Milten setzt eine gültige, unterstützte Source Map voraus, die der Scanner lesen kann. Fehlt sie, bleibt dieser Teil des Berichts unvollständig. Angaben zu Ressourcen und Fehlern können die Suche trotzdem eingrenzen.
Ohne nutzbare Source Map prüfen Sie den Importpfad der Ressource und die Build-Ausgabe. Eine fehlende Modulansicht beweist nicht, dass der gesamte Code ausgeführt wurde. Der MDN-Leitfaden zu Source Maps erklärt die Verbindung zwischen erzeugtem Code und Quellcode.
Ändern Sie eine Sache und testen Sie den betroffenen Ablauf
Wählen Sie eine bestätigte Verbesserungsmöglichkeit, etwa das Auslagern einer selten genutzten Funktion oder das verzögerte Laden einer optionalen Integration. Halten Sie die Änderung klein und vergleichbar. Prüfen Sie, ob die benötigte Funktion weiterhin arbeitet, keine neuen Konsolenfehler auftreten und der Browser die vorgesehenen Dateien lädt.
Prüfen Sie das Ladeergebnis mit Speed Scanner und untersuchen Sie eine langsame Interaktion mit INP Scanner. TBT und Long Tasks beim Seitenstart messen etwas anderes als INP aus realen Besuchen. Wenn sich nach wiederholter Navigation Objekte ansammeln, nutzen Sie Memory Leaks und reproduzieren Sie den gemeldeten Ablauf.
Vergleichen Sie vergleichbare Läufe
Wiederholen Sie dieselbe URL unter denselben Geräte-, Netzwerk- und Cache-Bedingungen. Bewahren Sie beide Berichte auf und zeichnen Sie auf, welche Interaktionen Sie manuell getestet haben. Überprüfen Sie den Produktions-Build nach der Veröffentlichung der Codeänderung. Ein Entwicklungspaket kann sich unterschiedlich verhalten.
Kann ich jedes nicht ausgeführte Byte entfernen?
Nein. Das Ergebnis beschreibt einen Beobachtungszeitraum, nicht alle möglichen Zustände der Anwendung. Testen Sie die relevanten Aktionen und die Routen mit gemeinsamem Bundle, bevor Sie Code entfernen.
Garantiert ein kleineres Paket eine schnellere Seite?
Nein, auch die Ladereihenfolge, die Serverantwort, die Ausführung und die nachfolgenden Interaktionen spielen eine Rolle. Vergleichen Sie die User Journey sowie die Dateigröße.
Analysieren Sie das JavaScript einer Seite. Für den breiteren Ladekontext lesen Sie Website-Geschwindigkeit und SEO.
