Langsamen Drittanbieter-JavaScript-Code erkennen

Erweitere deine Kompetenz bei der Leistungserkennung mit Lighthouse und den Chrome-Entwicklertools.

Milica Mihajlija

Als Entwickler haben Sie oft keine Kontrolle darüber, welche Drittanbieter-Skripts auf Ihrer Website geladen werden. Bevor Sie die Inhalte von Drittanbietern optimieren können, müssen Sie ermitteln, warum Ihre Website langsam ist. 🕵️

In diesem Beitrag erfahren Sie, wie Sie mit Lighthouse und den Chrome-Entwicklertools langsame Drittanbieterressourcen erkennen. In diesem Beitrag werden immer zuverlässigere Techniken vorgestellt, die sich am besten in Kombination einsetzen lassen.

Wenn Sie nur 5 Minuten Zeit haben,

Mithilfe der Leistungsprüfung in Lighthouse können Sie ermitteln, wie sich Seiten schneller laden lassen. Langsame Drittanbieter-Skripts werden wahrscheinlich im Bereich Diagnose in den Prüfungen JavaScript-Ausführungszeit reduzieren und Große Netzwerknutzlasten vermeiden angezeigt.

So führen Sie ein Audit durch:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Lighthouse.
  3. Klicken Sie auf Mobil.
  4. Klicken Sie das Kästchen Leistung an. (Sie können die restlichen Kontrollkästchen im Bereich Audits deaktivieren.)
  5. Klicken Sie auf Simulated Fast 3G, 4x CPU Slowdown.
  6. Klicken Sie das Kästchen Speicherinhalt löschen an.
  7. Klicken Sie auf Audits ausführen.

Screenshot des Bereichs „Audits“ in den Chrome-Entwicklertools.

Nutzung durch Drittanbieter

Die Lighthouse-Prüfung Drittanbieternutzung enthält eine Liste der Drittanbieter, die auf einer Seite verwendet werden. Diese Übersicht hilft Ihnen, das große Ganze zu verstehen und redundanten Drittanbietercode zu identifizieren. Die Prüfung ist in der Lighthouse-Erweiterung verfügbar und wird bald in den Entwicklertools in Chrome 77 hinzugefügt.

Screenshot, der zeigt, dass 51 Dritte gefunden wurden, und eine Liste von imaginären Start-ups.
Namen von Drittanbietern, die mit Start-up-Generator generiert wurden. Jegliche Ähnlichkeit mit echten Start-ups, ob lebend oder verstorben, ist reiner Zufall.

JavaScript-Ausführungszeit reduzieren

Bei der Prüfung der Lighthouse-Prüfung JavaScript-Ausführung reduzieren werden Skripts hervorgehoben, deren Analyse, Kompilierung oder Auswertung lange dauert. Klicken Sie das Kästchen Drittanbieterressourcen anzeigen an, um CPU-intensive Drittanbieterskripts zu erkennen.

Screenshot, auf dem zu sehen ist, dass das Kästchen „Ressourcen von Drittanbietern anzeigen“ angeklickt ist.

Sehr große Netzwerknutzlasten vermeiden

In der Lighthouse-Prüfung Keine extremen Netzwerknutzlasten werden Netzwerkanfragen – auch von Drittanbietern – identifiziert, die die Seitenladezeit verlangsamen können. Die Prüfung schlägt fehl,wenn Ihre Netzwerknutzlast 4.000 KB überschreitet.

Screenshot der Prüfung „Keine enorme Netzwerknutzlast“ in den Chrome-Entwicklertools.

Netzwerkanfragen in den Chrome-Entwicklertools blockieren

Mit der Blockierung von Netzwerkanfragen in den Chrome-Entwicklertools können Sie sehen, wie sich Ihre Seite verhält, wenn ein bestimmtes Skript, Stylesheet oder eine andere Ressource nicht verfügbar ist. Nachdem Sie Drittanbieter-Skripts identifiziert haben, die sich auf die Leistung auswirken, können Sie messen, wie sich die Ladezeit ändert, indem Sie die Anfragen an diese Skripts blockieren.

So aktivieren Sie die Blockierung von Anfragen: 1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen. 1. Klicken Sie auf den Tab Netzwerk. 1. Klicken Sie im Bereich Netzwerk mit der rechten Maustaste auf eine beliebige Anfrage. 1. Wählen Sie Anfrage-URL blockieren aus.

Screenshot des Kontextmenüs im Bereich „Leistung“ der Chrome-Entwicklertools. Die Option „Anfrage-URL blockieren“ ist markiert.

In der Leiste für die Entwicklertools wird der Tab Blockierung von Anfragen angezeigt. Dort können Sie festlegen, welche Anfragen blockiert werden.

So messen Sie die Wirkung von Drittanbieter-Skripts:

  1. Im Bereich Netzwerk können Sie messen, wie lange Ihre Seite zum Laden benötigt. Wenn Sie reale Bedingungen emulieren möchten, aktivieren Sie Netzwerkdrosselung und CPU-Drosselung. Bei schnelleren Verbindungen und Desktop-Hardware sind teure Skripts möglicherweise nicht so repräsentativ wie auf einem Mobiltelefon.
  2. Blockieren Sie die URLs oder Domains, die für Skripts von Drittanbietern verantwortlich sind, bei denen Sie glauben, dass ein Problem vorliegt.
  3. Aktualisieren Sie die Seite und messen Sie noch einmal, wie lange es dauert, bis die Drittanbieterskripts blockiert sind.

Wir hoffen, dass die Geschwindigkeit verbessert wird. Gelegentlich kann es aber vorkommen, dass Drittanbieter-Scripts nicht die erwartete Wirkung haben. Reduzieren Sie in diesem Fall die Liste der blockierten URLs, bis Sie diejenige isolieren, die die Leistung beeinträchtigt.

Wenn Sie drei oder mehr Messungen ausführen und sich die Medianwerte ansehen, erhalten Sie wahrscheinlich stabilere Ergebnisse. Da Drittanbieterinhalte gelegentlich beim Seitenaufbau unterschiedliche Ressourcen abrufen können, erhalten Sie mit diesem Ansatz eine realistischere Schätzung. Die Entwicklertools unterstützen jetzt mehrere Aufzeichnungen im Bereich Leistung, was dies etwas einfacher macht.