Langsamen Drittanbieter-JavaScript-Code erkennen

Mit Lighthouse und Chrome DevTools können Sie Ihre Fähigkeiten zur Leistungsanalyse verbessern.

Milica Mihajlija

Als Entwickler haben Sie oft keinen Einfluss darauf, welche Drittanbieter-Scripts auf Ihrer Website geladen werden. Bevor Sie Drittanbieterinhalte optimieren können, müssen Sie ein wenig detektivische Arbeit leisten, um herauszufinden, was Ihre Website verlangsamt. 🕵️

In diesem Beitrag erfahren Sie, wie Sie mit Lighthouse und den Chrome-Entwicklertools langsame Drittanbieterressourcen identifizieren. Der Artikel führt Sie durch immer robustere Verfahren, die sich am besten in Kombination einsetzen lassen.

Wenn Sie nur 5 Minuten Zeit haben

Mit der Lighthouse-Leistungsanalyse können Sie Möglichkeiten finden, das Laden von Seiten zu beschleunigen. Langsame Drittanbieterscripts werden wahrscheinlich im Bereich Diagnose unter den Prüfungen Ausführungszeit von JavaScript reduzieren und Enorme Netzwerknutzlasten vermeiden angezeigt.

So führen Sie eine Prüfung durch:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Lighthouse.
  3. Klicken Sie auf Mobilgeräte.
  4. Klicken Sie das Kästchen Leistung an. Sie können die restlichen Kästchen im Bereich „Audits“ deaktivieren.
  5. Klicken Sie auf Simuliertes schnelles 3G, 4-fache CPU-Verlangsamung.
  6. Klicken Sie das Kästchen Speicherplatz freigeben an.
  7. Klicken Sie auf Analysen ausführen.

Screenshot des Bereichs „Audits“ in den Chrome-Entwicklertools

Nutzung von Drittanbieter-Code

Die Lighthouse-Analyse Drittanbieter-Nutzung enthält eine Liste der Drittanbieter, die auf einer Seite verwendet werden. Diese Übersicht kann Ihnen helfen, das Gesamtbild besser zu verstehen und redundanten Drittanbietercode zu identifizieren. Die Prüfung ist in der Lighthouse-Erweiterung verfügbar und wird bald in den DevTools in Chrome 77 hinzugefügt.

Screenshot, der zeigt, dass 51 Drittanbieter gefunden wurden, und eine Liste mit fiktiven Start-ups
Namen von Drittanbietern, die mit dem Startup-Generator generiert wurden. Jegliche Ähnlichkeit mit tatsächlichen Start-ups, ob aktiv oder nicht, ist rein zufällig.

Ausführungszeit von JavaScript reduzieren

Bei der Lighthouse-Prüfung Ausführungszeit von JavaScript reduzieren werden Scripts hervorgehoben, deren Parsen, Kompilieren oder Bewerten viel Zeit in Anspruch nimmt. Klicken Sie das Kästchen Drittanbieterressourcen anzeigen an, um CPU-intensive Drittanbieter-Scripts zu finden.

Screenshot, in dem zu sehen ist, dass das Kästchen „Drittanbieterressourcen anzeigen“ angeklickt ist

Sehr große Netzwerknutzlasten vermeiden

Bei der Lighthouse-Analyse Sehr große Netzwerknutzlasten vermeiden werden Netzwerkanfragen erkannt, die die Seitenladezeit verlängern können, einschließlich Anfragen von Drittanbietern. Die Prüfung schlägt fehl,wenn die Netzwerknutzlast 4.000 KB überschreitet.

Screenshot der Prüfung „Sehr große Netzwerknutzlasten vermeiden“ in den Chrome DevTools

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 Script, Stylesheet oder eine andere Ressource nicht verfügbar ist. Nachdem Sie Drittanbieter-Scripts identifiziert haben, die sich Ihrer Meinung nach auf die Leistung auswirken, messen Sie, wie sich die Ladezeit ändert, indem Sie die Anfragen an diese Scripts blockieren.

So aktivieren Sie die Blockierung von Anfragen: 1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem 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 Entwicklertools-Leiste wird der Tab Anfrageblockierung angezeigt. Dort können Sie verwalten, welche Anfragen blockiert wurden.

So messen Sie die Auswirkungen von Drittanbieter-Scripts:

  1. Im Bereich Netzwerk können Sie messen, wie lange es dauert, bis Ihre Seite geladen ist. Aktivieren Sie die Netzwerkdrosselung und die CPU-Drosselung, um realistische Bedingungen zu emulieren. Bei schnelleren Verbindungen und Desktop-Hardware sind die Auswirkungen teurer Scripts möglicherweise nicht so repräsentativ wie auf einem Smartphone.
  2. Blockieren Sie die URLs oder Domains, die für Drittanbieter-Scripts verantwortlich sind, die Ihrer Meinung nach ein Problem darstellen.
  3. Laden Sie die Seite neu und messen Sie noch einmal, wie lange das Laden ohne die blockierten Drittanbieter-Scripts dauert.

Hoffentlich sollte sich die Geschwindigkeit verbessern. Manchmal hat das Blockieren von Drittanbieter-Scripts jedoch nicht die erwartete Wirkung. In diesem Fall reduzieren Sie die Liste der blockierten URLs, bis Sie die URL gefunden haben, die die Verzögerung verursacht.

Wenn Sie drei oder mehr Messungen durchführen und sich die Medianwerte ansehen, erhalten Sie wahrscheinlich stabilere Ergebnisse. Da Drittanbieterinhalte gelegentlich unterschiedliche Ressourcen pro Seitenladevorgang abrufen können, erhalten Sie mit diesem Ansatz eine realistischere Schätzung. In den DevTools werden jetzt mehrere Aufzeichnungen im Bereich Leistung unterstützt, was die Sache etwas einfacher macht.