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.

In diesem Tutorial erfahren Sie, wie Sie Lighthouse in den Chrome-Entwicklertools verwenden.

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

Ich heiße 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 hört 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 neuem 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

Der Referenzwert ist ein Messwert für die Leistung der Website, bevor Sie Leistungsverbesserungen vorgenommen haben.

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

   Hinweis:Dieses Steuerfeld basiert auf dem gleichnamigen Tool Lighthouse, einem automatisierten Tool zur Verbesserung der Qualität Ihrer Webanwendungen.

   

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 verwenden möchten.
   • check_box JS-Sampling aktivieren Diese Option ist standardmäßig deaktiviert. Wenn diese Option aktiviert ist, werden dem Leistungs-Trace detaillierte JavaScript-Aufrufstapel hinzugefügt. Dies kann die Berichterstellung jedoch verlangsamen. Der Trace ist nach der Generierung des Lighthouse-Berichts unter more_vert 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. Die Bezeichnung „simuliert“ bezieht sich darauf, dass 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 in den DevTools (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. So wird sichergestellt, dass Chrome im sauberen Zustand ausgeführt wird. Insbesondere Chrome-Erweiterungen können die Prüfung beeinträchtigen.

Bericht auswerten

Die Zahl oben im Bericht ist der Gesamtwert für die Websiteleistung. 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 Ladeleistung dieser Seite.

Klicken Sie auf eine Empfehlung, um weitere Informationen zu erhalten.

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 zur Verbesserung der Leistung der Seite. In diesem Abschnitt implementieren Sie die empfohlenen Änderungen an der Codebasis und prüfen die Website nach jeder Änderung, um zu messen, wie sich diese 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.

Jede Zelle unter Größe enthält zwei Werte. 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 sowohl der obere als auch der untere Wert für bundle.js 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 gesetzt. 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 Codezeilen 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 Glitch den neuen Build der Website bereitgestellt hat. 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 höchste Wert von 269 KB für bundle.js ist die Größe der Datei, die über das Netzwerk gesendet wurde. Der unterste Wert von 1.4 MB ist die unkomprimierte Dateigröße.

   

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

   

Führen Sie den Lighthouse-Bericht noch einmal für die 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 Fortschritten 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 der Bilder eine weitere große Chance.

Wenn Sie die Größe von Bildern ändern, wird die Ladezeit verkürzt, da die Dateigröße der Bilder verringert wird. Wenn sich Ihre Nutzer Ihre Bilder auf einem Smartphone-Bildschirm mit einer Breite von 500 Pixeln ansehen, hat es keinen Sinn, ein 1.500 Pixel breites Bild zu senden. Idealerweise sollten Sie ein Bild mit maximal 500 Pixeln Breite senden.

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. Während der Laufzeit wählt der Browser die für das Gerät am besten geeignete Größe aus. Weitere Informationen finden Sie unter Bilder mit 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 Grundlegende 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% bzw. 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 eigentlich 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 Anfrageblockierung sehen Sie, was passiert, wenn Ressourcen nicht 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 gar nicht erforderlich.

   

5. Klicken Sie auf Alle Muster entfernen, um das Blockierungsmuster für /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 noch einmal über den Bereich Lighthouse. Ihre Gesamtbewertung sollte sich wieder verbessert haben.

   

Den kritischen Rendering-Pfad in der Praxis optimieren

Der kritische Rendering-Pfad bezieht sich auf den Code, der zum Laden einer Seite erforderlich ist. Im Allgemeinen können Sie das Seitenladetempo 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 geringfügige Einsparungen. 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.

Ziel ist es, im Bereich Leistung zu analysieren, welche Arbeit der Hauptthread während des Ladens der Seite ausführt, und nach Möglichkeiten zu suchen, unnötige Arbeit zu verschieben 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.

Wenn im Bereich Übersicht ein gelbes Feld zu sehen ist, war die CPU vollständig mit Scripting-Aktivitäten ausgelastet. 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 Protokoll der Aktivitäten im Hauptthread, 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 nach unten zum Ende des Abschnitts Haupt. Wenn Sie ein Framework verwenden, wird der Großteil der Aktivitäten durch das Framework verursacht, das Sie in der Regel nicht beeinflussen können. Die von Ihrer App verursachten Aktivitäten werden normalerweise unten angezeigt.

   

   In dieser App führt die Funktion App offenbar zu vielen Aufrufen der Funktion mineBitcoin. Anscheinend nutzt Tony die Geräte seiner Fans, um Kryptowährungen zu schürfen…

   Hinweis:Die Aufrufe, die Ihr Framework ausführt, liegen normalerweise nicht in Ihrer Kontrolle. Manchmal können Sie Ihre App jedoch 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 Eigenzeit 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 mineBitcoin-Funktion 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 im 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 Verbesserungsmöglichkeiten, z. B. die Messwerte Largest Contentful Paint und Cumulative Layout Shift zu reduzieren.

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

Weniger Hauptthread-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.
• In der Mailingliste können Sie über Funktionen und Änderungen diskutieren. 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.
• Senden Sie uns einfach einen Tweet an @ChromeDevTools.