Lighthouse: Websitegeschwindigkeit optimieren

Kayce Basques

Sofia Emelianova

Übersicht

Im Bereich Lighthouse können Sie eine umfassende Analyse Ihrer Website durchführen. Im Bereich Lighthouse wird ein Bericht erstellt, der Ihnen folgende Informationen zu Ihrer Website liefert:

• Leistung
• Bedienungshilfen
• Best Practices
• SEO

...und viele weitere Messwerte.

Die folgende Anleitung hilft Ihnen beim Einstieg in Lighthouse in den Chrome-Entwicklertools.

Weitere Informationen dazu, wie Sie mit Lighthouse die Qualität Ihrer Website verbessern können, finden Sie in der Lighthouse-Dokumentation.

Ziel der Anleitung

In dieser Anleitung erfahren Sie, wie Sie mit den Chrome-Entwicklertools herausfinden, wie Sie Ihre Websites schneller laden können.

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an:

Dieses Video wurde mit Chrome 68 erstellt. Die meisten Angaben sind weiterhin gültig, einige Funktionen wurden jedoch aktualisiert. So heißt der Bereich Analysen jetzt Lighthouse und sieht anders aus. Die Optionen sind jedoch unverändert verfügbar.

Vorbereitung

Sie sollten grundlegende Kenntnisse in der Webentwicklung haben, ähnlich wie in diesem Kurs zur Einführung in die Webentwicklung vermittelt.

Sie müssen nichts über die Ladeleistung wissen.

Einführung

Das ist Tony. Tony ist in der Katzengesellschaft sehr bekannt. Er hat eine Website erstellt, auf der seine Fans erfahren können, was seine Lieblingsspeisen sind. Seine Fans lieben die Website, aber Tony erhält immer wieder Beschwerden, dass die Website langsam geladen wird. Tony bittet Sie, ihm dabei zu helfen, die Website zu beschleunigen.

Tony die Katze.

Schritt 1: Website prüfen

Wenn Sie die Ladeleistung einer Website verbessern möchten, sollten Sie immer mit einer Analyse beginnen. Die Prüfung hat zwei wichtige Funktionen:

• So wird ein Referenzwert erstellt, anhand dessen Sie spätere Änderungen messen können.
• Sie erhalten umsetzbare Tipps dazu, welche Änderungen sich am stärksten auswirken.

Einrichten

Zuerst müssen Sie eine neue Arbeitsumgebung für die Website von Tony einrichten, damit Sie später Änderungen daran vornehmen können:

1. Remix des Projekts der Website auf Glitch Ihr neues Projekt wird in einem Tab geöffnet. Dieser Tab wird als Editor bezeichnet.

   

   Der Name des Projekts ändert sich von tony in einen zufällig generierten Namen. Sie haben jetzt eine eigene bearbeitbare Kopie des Codes. Später nehmen Sie Änderungen an diesem Code vor.

2. Klicken Sie unten auf dem Tab „Editor“ auf Vorschau > Vorschau in einem neuen Fenster. Die Demo wird in einem neuen Tab geöffnet. Dieser Tab wird als Demo-Tab bezeichnet. Es kann einige Zeit dauern, bis die Website geladen ist.

   

3. Öffnen Sie die Entwicklertools neben der Demo.

   

Wichtiger Hinweis: In den restlichen Screenshots in dieser Anleitung werden die DevTools in einem separaten Fenster angezeigt.

Baseline festlegen

Die Baseline ist eine Aufzeichnung der Leistung der Website vor jeder Leistungssteigerung.

1. Öffnen Sie den Bereich Lighthouse. Möglicherweise ist er hinter  Weitere Steuerfelder ausgeblendet.

   Hinweis:Dieser Bereich basiert auf dem gleichnamigen Lighthouse, einem automatisierten Tool zur Verbesserung der Qualität Ihrer Web-Apps.

   

2. Passen Sie die Konfigurationseinstellungen für Lighthouse-Berichte an die im Screenshot gezeigten an. Hier eine Erklärung der verschiedenen Optionen:

   • check_box Speicherinhalt löschen. Wenn Sie dieses Kästchen aktivieren, wird vor jeder Analyse der gesamte mit der Seite verknüpfte Speicherplatz gelöscht. Lassen Sie diese Einstellung aktiviert, wenn Sie prüfen möchten, wie Ihre Website bei Erstbesuchern ankommt. Deaktivieren Sie diese Einstellung, wenn Sie die Funktion für wiederholte Besuche nutzen möchten.
   • check_box JS-Sampling aktivieren Diese Option ist standardmäßig deaktiviert. Wenn diese Option aktiviert ist, werden dem Leistungs-Trace detaillierte JavaScript-Aufrufstacks hinzugefügt. Dies kann die Berichterstellung jedoch verlangsamen. Der Trace ist nach der Generierung des Lighthouse-Berichts unter Dreipunkt-Menü Tools > Ungedrosselten Trace ansehen verfügbar.
   • Simulierte Drosselung (Standard) . Mit dieser Option werden die typischen Bedingungen für das Surfen auf einem Mobilgerät simuliert. Sie wird als „simuliert“ bezeichnet, da Lighthouse die Leistung während der Prüfung nicht tatsächlich drosselt. Stattdessen wird nur extrapoliert, wie lange das Laden der Seite unter mobilen Bedingungen dauern würde. Die Einstellung Drosselung über die Entwicklertools (erweitert) hingegen drosselt die CPU und das Netzwerk. Dies führt jedoch zu einem längeren Analyseprozess.
   • Modus > Navigation (Standard). In diesem Modus wird ein einzelner Seitenaufbau analysiert. Das ist in dieser Anleitung erforderlich. Weitere Informationen finden Sie unter Die drei Modi.
   • Gerät > Mobilgeräte. Mit der Option „Mobil“ wird der User-Agent-String geändert und ein mobiler Viewport simuliert. Mit der Option „Desktop“ werden die Änderungen für Mobilgeräte praktisch deaktiviert.
   • Kategorien > check_box Leistung. Wenn nur eine Kategorie aktiviert ist, generiert Lighthouse nur einen Bericht mit den entsprechenden Prüfungen. Sie können die anderen Kategorien aktiviert lassen, wenn Sie die entsprechenden Empfehlungen sehen möchten. Wenn Sie irrelevante Kategorien deaktivieren, wird der Audit-Prozess etwas beschleunigt.

3. Klicken Sie auf Seitenaufbau analysieren. Nach 10 bis 30 Sekunden wird im Bereich Lighthouse ein Bericht zur Leistung der Website angezeigt.

   

Umgang mit Berichtsfehlern

Wenn in Ihrem Lighthouse-Bericht ein Fehler auftritt, versuchen Sie, den Demo-Tab in einem Inkognitofenster auszuführen, in dem keine anderen Tabs geöffnet sind. Dadurch wird sichergestellt, dass Chrome in einem sauberen Zustand ausgeführt wird. Insbesondere Chrome-Erweiterungen können den Prüfungsprozess beeinträchtigen.

Bericht auswerten

Die Zahl oben im Bericht gibt die Gesamtleistung der Website an. Später, wenn Sie Änderungen am Code vornehmen, sollte diese Zahl steigen. Je höher der Wert, desto besser die Leistung.

Messwerte

Scrollen Sie nach unten zum Bereich Messwerte und klicken Sie auf Ansicht maximieren. Wenn Sie die Dokumentation zu einem Messwert aufrufen möchten, klicken Sie auf Weitere Informationen.

In diesem Abschnitt finden Sie quantitative Messwerte zur Leistung der Website. Jeder Messwert gibt Aufschluss über einen anderen Aspekt der Leistung. So gibt der Messwert First Contentful Paint beispielsweise an, wann Inhalte zum ersten Mal auf dem Bildschirm angezeigt werden. Dies ist ein wichtiger Meilenstein für die Nutzerwahrnehmung des Seitenaufbaus. Der Messwert Time To Interactive gibt hingegen an, wann die Seite für Nutzerinteraktionen bereit ist.

Screenshots

Im Folgenden sehen Sie eine Reihe von Screenshots, die zeigen, wie die Seite beim Laden aussah.

Verkaufschancen

Im nächsten Abschnitt Empfehlungen finden Sie konkrete Tipps zur Verbesserung der Ladezeit dieser Seite.

Klicken Sie auf eine Empfehlung, um mehr darüber zu erfahren.

Klicken Sie auf Weitere Informationen, um zu erfahren, warum eine Verbesserungsmöglichkeit wichtig ist, und um konkrete Empfehlungen zur Behebung des Problems zu erhalten.

Diagnose

Im Bereich Diagnose finden Sie weitere Informationen zu Faktoren, die zur Ladezeit der Seite beitragen.

Bestandene Prüfungen

Im Bereich Überprüfungen bestanden sehen Sie, was auf der Website richtig funktioniert. Klicken Sie, um den Bereich zu maximieren.

Schritt 2: Testen

Im Abschnitt Empfehlungen Ihres Lighthouse-Berichts finden Sie Tipps dazu, wie Sie die Leistung der Seite verbessern können. In diesem Abschnitt implementieren Sie die empfohlenen Änderungen an der Codebasis und prüfen die Website nach jeder Änderung, um zu messen, wie sie sich auf die Websitegeschwindigkeit auswirkt.

Textkomprimierung aktivieren

Laut Bericht ist die Textkomprimierung eine der besten Möglichkeiten, die Leistung der Seite zu verbessern.

Bei der Textkomprimierung wird die Größe einer Textdatei reduziert, bevor sie über das Netzwerk gesendet wird. Ähnlich wie Sie einen Ordner komprimieren, bevor Sie ihn per E-Mail senden, um seine Größe zu verringern.

Bevor Sie die Komprimierung aktivieren, können Sie manuell prüfen, ob Textressourcen komprimiert sind.

Öffnen Sie den Bereich Netzwerk und aktivieren Sie Einstellungen > Große Anfragezeilen verwenden.

Wichtig: Wenn die Spalte Größe in der Tabelle mit den Netzwerkanfragen nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf die Tabellenüberschrift und wählen Sie Größe aus.

In jeder Zelle Größe werden zwei Werte angezeigt. Der höchste Wert ist die Größe der heruntergeladenen Ressource. Der untere Wert ist die Größe der unkomprimierten Ressource. Wenn die beiden Werte übereinstimmen, wird die Ressource nicht komprimiert, wenn sie über das Netzwerk gesendet wird. In diesem Beispiel sind der obere und der untere Wert für bundle.js beide 1.4 MB.

Sie können auch die HTTP-Header einer Ressource prüfen, um nach einer Komprimierung zu suchen:

1. Klicken Sie auf bundle.js und öffnen Sie den Tab Header.

   

2. Suchen Sie im Abschnitt Antwortheader nach einem content-encoding-Header. Sie sollte nicht angezeigt werden. Das bedeutet, dass bundle.js nicht komprimiert wurde. Wenn eine Ressource komprimiert ist, wird dieser Header normalerweise auf gzip, deflate oder br festgelegt. Eine Erläuterung dieser Werte finden Sie unter Anweisungen.

Schluss mit den Erklärungen. Zeit für einige Änderungen! Aktivieren Sie die Textkomprimierung, indem Sie ein paar Zeilen Code hinzufügen:

1. Öffnen Sie auf dem Tab „Editor“ die Datei server.js und fügen Sie die folgenden beiden (markierten) Zeilen hinzu:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Achten Sie darauf, app.use(compression()) vor app.use(express.static('build')) zu setzen.

   

   Hinweis: Normalerweise müssten Sie das compression-Paket über etwas wie npm i -S compression installieren. Das wurde jedoch bereits für Sie erledigt.

3. Warten Sie, bis der neue Build der Website über Glitch bereitgestellt wurde. Ein glückliches Emoji links unten zeigt an, dass die Bereitstellung erfolgreich war.

Verwenden Sie die zuvor beschriebenen Workflows, um manuell zu prüfen, ob die Komprimierung funktioniert:

1. Kehren Sie zum Demo-Tab zurück und aktualisieren Sie die Seite.

   Die Spalte Größe sollte jetzt zwei verschiedene Werte für Textressourcen wie bundle.js enthalten. Der obere Wert von 269 KB für bundle.js ist die Größe der Datei, die über das Netzwerk gesendet wurde. Der untere Wert von 1.4 MB ist die Größe der unkomprimierten Datei.

   

2. Der Abschnitt Response Headers (Antwortheader) für bundle.js sollte jetzt einen content-encoding: gzip-Header enthalten.

   

Führen Sie den Lighthouse-Bericht noch einmal auf der Seite aus, um die Auswirkungen der Textkomprimierung auf die Ladeleistung der Seite zu messen:

1. Öffnen Sie den Bereich Lighthouse und klicken Sie oben in der Aktionsleiste auf  Analyse ausführen….

   

2. Lassen Sie die Einstellungen unverändert und klicken Sie auf Seitenladezeit analysieren.

   

Endlich! Das sieht nach Fortschritt aus. Der Wert für die Gesamtleistung sollte gestiegen sein, was bedeutet, dass die Website schneller wird.

Textkomprimierung in der Praxis

Die meisten Server haben wirklich einfache Lösungen wie diese, um die Komprimierung zu aktivieren. Suche einfach nach der Konfiguration des Servers, den du zum Komprimieren von Text verwendest.

Bildgröße anpassen

Laut Ihrem neuen Bericht ist die richtige Größe von Bildern eine weitere große Chance.

Wenn Sie die Größe von Bildern anpassen, wird die Ladezeit verkürzt, da die Dateigröße der Bilder verringert wird. Wenn sich Ihre Nutzer Ihre Bilder auf einem Mobilgerätebildschirm mit einer Breite von 500 Pixeln ansehen, hat es keinen Sinn, ein 1.500 Pixel breites Bild zu senden. Idealerweise sollte das Bild maximal 500 Pixel breit sein.

1. Klicken Sie im Bericht auf Bilder richtig dimensionieren, um zu sehen, welche Bilder die richtige Größe haben. Offenbar sind alle vier Bilder größer als nötig.

   

2. Öffnen Sie auf dem Editor-Tab src/model.js.

3. Ersetzen Sie const dir = 'big' durch const dir = 'small'. Dieses Verzeichnis enthält Kopien derselben Bilder, die neu skaliert wurden.

4. Prüfen Sie die Seite noch einmal, um zu sehen, wie sich diese Änderung auf die Ladeleistung auswirkt.

   

Offenbar hat die Änderung nur geringe Auswirkungen auf die Gesamtbewertung der Leistung. Der Wert gibt jedoch nicht genau an, wie viel Netzwerkdaten Sie Ihren Nutzern sparen. Die Gesamtgröße der alten Fotos betrug etwa 6,1 MB, jetzt sind es nur noch etwa 633 KB. Sie können dies in der Statusleiste unten im Bereich Netzwerk prüfen.

Bilder in der realen Welt verkleinern

Bei einer kleinen App reicht eine einmalige Größenänderung in diesem Fall möglicherweise aus. Bei einer großen App ist dies jedoch offensichtlich nicht skalierbar. Hier sind einige Strategien für die Verwaltung von Bildern in großen Apps:

• Größe der Bilder während des Build-Prozesses anpassen
• Erstellen Sie während des Build-Prozesses mehrere Größen jedes Bildes und verwenden Sie dann srcset in Ihrem Code. Zur Laufzeit wählt der Browser die beste Größe für das Gerät aus, auf dem er ausgeführt wird. Siehe Bilder in relativer Größe.
• Verwenden Sie ein Bild-CDN, mit dem Sie ein Bild bei der Anfrage dynamisch skalieren können.
• Optimieren Sie mindestens jedes Bild. Das kann oft zu enormen Einsparungen führen. Bei der Optimierung wird ein Bild durch ein spezielles Programm geleitet, das die Größe der Bilddatei reduziert. Weitere Tipps finden Sie unter Wichtige Bildoptimierung.

Ressourcen entfernen, die das Rendering blockieren

Laut Ihrem letzten Bericht besteht die größte Optimierungsmöglichkeit darin, Ressourcen zu entfernen, die das Rendering blockieren.

Eine Ressource, die das Rendering blockiert, ist eine externe JavaScript- oder CSS-Datei, die der Browser herunterladen, parsen und ausführen muss, bevor die Seite angezeigt werden kann. Ziel ist es, nur den CSS- und JavaScript-Kerncode auszuführen, der für die korrekte Darstellung der Seite erforderlich ist.

Die erste Aufgabe besteht also darin, Code zu finden, der beim Laden der Seite nicht ausgeführt werden muss.

1. Klicken Sie auf Ressourcen entfernen, die das Rendering blockieren, um die blockierenden Ressourcen aufzurufen: lodash.js und jquery.js.

   

2. Drücken Sie je nach Betriebssystem die folgende Taste, um das Befehlsmenü zu öffnen:

   • Mac: Befehlstaste + Umschalttaste + P
   • Windows, Linux oder ChromeOS: Strg + Umschalttaste + P

3. Geben Sie Coverage ein und wählen Sie Abdeckung anzeigen aus.

   

   Der Tab Abdeckung wird im Schieberegler geöffnet.

   

4. Klicken Sie auf Aktualisieren Neu laden. Auf dem Tab Abdeckung sehen Sie, wie viel Code in bundle.js, jquery.js und lodash.js beim Laden der Seite ausgeführt wird.

   

   In diesem Screenshot ist zu sehen, dass etwa 74 % und 30 % der jQuery- und Lodash-Dateien nicht verwendet werden.

5. Klicken Sie auf die Zeile jquery.js. In den DevTools wird die Datei im Bereich Quellen geöffnet. Eine Codezeile wurde ausgeführt, wenn neben ihr ein grüner Balken angezeigt wird. Ein roter Balken neben einer Codezeile bedeutet, dass sie nicht ausgeführt wurde und beim Laden der Seite definitiv nicht erforderlich ist.

   

6. Scrollen Sie ein wenig durch den jQuery-Code. Einige der Zeilen, die "ausgeführt" werden, sind in Wirklichkeit nur Kommentare. Eine weitere Möglichkeit, die Größe dieser Datei zu reduzieren, besteht darin, diesen Code durch einen Minifier zu führen, der Kommentare entfernt.

Wenn Sie mit Ihrem eigenen Code arbeiten, können Sie mit dem Tab Abdeckung Ihren Code zeilenabwärts analysieren und nur den Code ausliefern, der für das Laden der Seite erforderlich ist.

Sind die Dateien jquery.js und lodash.js überhaupt erforderlich, um die Seite zu laden? Auf dem Tab Request Blocking (Anfrageblockierung) sehen Sie, was passiert, wenn keine Ressourcen verfügbar sind.

1. Klicken Sie auf den Tab Netzwerk und öffnen Sie das Befehlsmenü noch einmal.

2. Geben Sie blocking ein und wählen Sie dann Anfrageblockierung anzeigen aus. Der Tab Anfrageblockierung wird geöffnet.

   

3. Klicken Sie auf  Muster hinzufügen, geben Sie /libs/* in das Textfeld ein und drücken Sie die Eingabetaste, um die Eingabe zu bestätigen.

   

4. Lade die Seite neu. Die jQuery- und Lodash-Anfragen sind rot, was bedeutet, dass sie blockiert wurden. Die Seite wird weiterhin geladen und ist interaktiv. Offenbar sind diese Ressourcen also nicht erforderlich.

   

5. Klicken Sie auf Alle Muster entfernen, um das Blockiermuster /libs/* zu löschen.

Im Allgemeinen ist der Tab Anfrageblockierung nützlich, um zu simulieren, wie sich Ihre Seite verhält, wenn eine bestimmte Ressource nicht verfügbar ist.

Entfernen Sie jetzt die Verweise auf diese Dateien aus dem Code und prüfen Sie die Seite noch einmal:

1. Öffnen Sie auf dem Editor-Tab template.html.

2. Löschen Sie die entsprechenden <script>-Tags:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. Warten Sie, bis die Website neu erstellt und bereitgestellt wurde.

4. Prüfen Sie die Seite im Bereich Lighthouse noch einmal. Ihre Gesamtbewertung sollte sich wieder verbessert haben.

   

Den kritischen Rendering-Pfad in der Praxis optimieren

Der kritische Rendering-Pfad bezieht sich auf den Code, den Sie zum Laden einer Seite benötigen. Im Allgemeinen können Sie das Seitenladen beschleunigen, indem Sie beim Seitenaufbau nur kritischen Code senden und alles andere per Lazy Loading laden.

• Es ist unwahrscheinlich, dass Sie Scripts finden, die Sie sofort entfernen können. Sie werden jedoch häufig feststellen, dass viele Scripts nicht beim Laden der Seite angefordert werden müssen, sondern stattdessen asynchron angefordert werden können. Weitere Informationen finden Sie unter async oder defer verwenden.
• Wenn Sie ein Framework verwenden, prüfen Sie, ob es einen Produktionsmodus hat. In diesem Modus wird möglicherweise eine Funktion wie Tree Shaking verwendet, um unnötigen Code zu entfernen, der das kritische Rendern blockiert.

Weniger Arbeit im Hauptthread

Ihr aktueller Bericht zeigt im Bereich Mögliche Einsparungen einige kleinere Einsparpotenziale. Wenn Sie jedoch zum Bereich Diagnose scrollen, sieht es so aus, als wäre das größte Nadelöhr zu viel Aktivität im Haupt-Thread.

Im Haupt-Thread führt der Browser die meisten Aufgaben aus, die zum Anzeigen einer Seite erforderlich sind, z. B. das Parsen und Ausführen von HTML, CSS und JavaScript.

Hinweis: Dieser Abschnitt bietet eine kurze Einführung in den Bereich „Leistung“. Weitere Informationen zur Analyse der Seitenleistung mithilfe dieser Funktion finden Sie in der Referenz zu Leistungsfunktionen.

Das Ziel besteht darin, im Bereich Leistung zu analysieren, welche Arbeit der Hauptthread während des Ladens der Seite ausführt, und Möglichkeiten finden, unnötige Arbeit aufzuschieben oder zu entfernen.

1. Öffnen Sie Leistung > Aufnahmeeinstellungen und legen Sie für Netzwerk die Option Langsames 3G und für CPU die Option 6-fache Verlangsamung fest.

   

   Mobilgeräte haben in der Regel mehr Hardwareeinschränkungen als Laptops oder Desktop-Computer. Mit diesen Einstellungen können Sie die Seite so laden, als würden Sie ein weniger leistungsstarkes Gerät verwenden.

2. Klicken Sie auf Aktualisieren Neu laden. In den Entwicklertools wird die Seite neu geladen und dann eine Visualisierung aller Vorgänge erstellt, die zum Laden der Seite erforderlich waren. Diese Visualisierung wird als Trace bezeichnet.

   

Die Aktivitäten werden chronologisch von links nach rechts dargestellt. Die Diagramme „FPS“, „CPU“ und „NET“ oben geben Aufschluss über Frames pro Sekunde, CPU-Aktivität und Netzwerkaktivität.

Die gelbe Fläche im Bereich Übersicht bedeutet, dass die CPU vollständig mit Scripting-Aktivitäten ausgelastet war. Dies ist ein Hinweis darauf, dass Sie den Seitenaufbau möglicherweise beschleunigen können, indem Sie weniger JavaScript verwenden.

Prüfen Sie den Trace, um Möglichkeiten zu finden, weniger JavaScript-Code zu verwenden:

1. Klicken Sie auf den Bereich Zeitpunkte, um ihn zu maximieren.

   

   Es gibt eine Reihe von Nutzerzeitmessungen von React. Offenbar verwendet Tonys App den Entwicklungsmodus von React. Der Wechsel zum Produktionsmodus von React wird wahrscheinlich zu einigen einfachen Leistungssteigerungen führen.

2. Klicken Sie noch einmal auf Zeitangaben, um den Bereich zu minimieren.

3. Rufen Sie den Bereich Haupt auf. Dieser Abschnitt enthält ein chronologisches Log der Aktivitäten des Hauptthreads, von links nach rechts. Die Y-Achse (von oben nach unten) zeigt, warum Ereignisse aufgetreten sind.

   

   In diesem Beispiel hat das Ereignis Evaluate Script dazu geführt, dass die Funktion (anonymous) ausgeführt wurde, was wiederum zur Ausführung von __webpack__require__ und dann von ./src/index.jsx geführt hat.

4. Scrollen Sie im Main-Bereich ganz nach unten. Wenn Sie ein Framework verwenden, ist der Großteil der aktiven Zugriffe auf das Framework zurückzuführen, das Sie in der Regel nicht beeinflussen können. Die von Ihrer App verursachten Aktivitäten werden normalerweise unten angezeigt.

   

   In dieser App scheint es so, als ob eine Funktion namens App viele Aufrufe einer mineBitcoin-Funktion verursacht. Anscheinend nutzt Tony die Geräte seiner Fans, um Kryptowährungen zu schürfen…

   Hinweis:Auch wenn die Aufrufe Ihres Frameworks normalerweise außerhalb Ihrer Kontrolle liegen, können Sie Ihre App manchmal so strukturieren, dass das Framework ineffizient ausgeführt wird. Wenn Sie Ihre App so umstrukturieren, dass das Framework effizient genutzt wird, können Sie weniger Arbeit im Hauptthread erledigen. Dazu ist ein umfassendes Verständnis der Funktionsweise des Frameworks und der Art der Änderungen erforderlich, die Sie an Ihrem eigenen Code vornehmen können, um das Framework effizienter zu nutzen.

5. Öffnen Sie unten den Tab Bottom-Up. Auf diesem Tab sehen Sie, welche Aktivitäten am meisten Zeit in Anspruch genommen haben. Wenn im Bereich Bottom-Up nichts angezeigt wird, klicken Sie auf das Label für den Bereich Haupt.

   

   Im Bereich Bottom-Up werden nur Informationen zu der Aktivität oder Aktivitätsgruppe angezeigt, die Sie aktuell ausgewählt haben. Wenn Sie beispielsweise auf eine der mineBitcoin-Aktivitäten geklickt haben, werden im Bereich Bottom-Up nur Informationen zu dieser Aktivität angezeigt.

   In der Spalte Selbstzeit sehen Sie, wie viel Zeit direkt für die einzelnen Aktivitäten aufgewendet wurde. In diesem Fall wurden etwa 82% der Zeit des Hauptthreads für die Funktion mineBitcoin aufgewendet.

Sehen wir uns an, ob sich das Laden der Seite durch die Verwendung des Produktionsmodus und die Reduzierung der JavaScript-Aktivität beschleunigen lässt. So starten Sie den Produktionsmodus:

1. Öffnen Sie auf dem Tab „Editor“ die Datei webpack.config.js.
2. Ändern Sie "mode":"development" zu "mode":"production".
3. Warten Sie, bis der neue Build bereitgestellt wurde.

4. Prüfen Sie die Seite noch einmal.

   

Reduzieren Sie die JavaScript-Aktivität, indem Sie den Aufruf von mineBitcoin entfernen:

1. Öffnen Sie auf dem Tab „Editor“ die Datei src/App.jsx.
2. Kommentieren Sie den Aufruf von this.mineBitcoin(1500) in constructor aus.
3. Warten Sie, bis der neue Build bereitgestellt wurde.
4. Prüfen Sie die Seite noch einmal.

Wie immer gibt es noch etwas zu tun, zum Beispiel die Messwerte Largest Contentful Paint und Cumulative Layout Shift.

Erfolg: Die letzte Änderung hat aber offenbar zu einem enormen Leistungssprung geführt.

Weniger Haupt-Thread-Arbeit in der Praxis

Im Bereich Leistung können Sie in der Regel nachvollziehen, welche Aktivitäten auf Ihrer Website beim Laden ausgeführt werden, und unnötige Aktivitäten entfernen.

Wenn Sie einen Ansatz bevorzugen, der eher console.log() ähnelt, können Sie mit der User Timing API bestimmte Phasen des App-Lebenszyklus beliebig markieren, um zu verfolgen, wie lange jede dieser Phasen dauert.

Zusammenfassung

• Wenn Sie die Ladezeit einer Website optimieren möchten, sollten Sie immer mit einer Analyse beginnen. Die Analyse liefert einen Referenzwert und Tipps zur Verbesserung.
• Nehmen Sie jeweils nur eine Änderung vor und prüfen Sie die Seite nach jeder Änderung, um zu sehen, wie sich diese einzelne Änderung auf die Leistung auswirkt.

Nächste Schritte

Führen Sie Audits für Ihre eigene Website durch. Wenn Sie Hilfe bei der Auswertung Ihres Berichts oder bei der Verbesserung der Ladeleistung benötigen, finden Sie hier alle Möglichkeiten, wie Sie sich von der DevTools-Community unterstützen lassen können:

• Melden Sie Fehler zu diesem Dokument im Repository developer.chrome.com.
• Sie können Fehlerberichte in den Entwicklertools unter Chromium-Fehler einreichen.
• Besprechen Sie Funktionen und Änderungen in der Mailingliste. Bitte verwenden Sie die Mailingliste nicht für Supportanfragen. Verwenden Sie stattdessen Stack Overflow.
• Allgemeine Informationen zur Verwendung der DevTools finden Sie auf Stack Overflow. Verwenden Sie immer Chromium-Fehler, um Fehler zu melden.
• Twittern Sie uns unter @ChromeDevTools.