Lighthouse: Websitegeschwindigkeit optimieren

Übersicht

Führen Sie im Lighthouse-Bereich eine umfassende Prüfung Ihrer Website durch. Im Steuerfeld Lighthouse wird ein Bericht mit folgenden Informationen zu Ihrer Website erstellt:

• 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 die Qualität Ihrer Website mit Lighthouse verbessern können, finden Sie in der Lighthouse-Dokumentation.

Ziel des Tutorials

In dieser Anleitung erfahren Sie, wie Sie mit den Chrome-Entwicklertools dafür sorgen, dass Ihre Websites schneller geladen werden.

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

Vorbereitung

Sie sollten über grundlegende Kenntnisse in der Webentwicklung verfügen, ähnlich wie im Kurs dieser Einführung in die Webentwicklung.

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, sodass seine Fans sehen können, was seine Lieblingsinhalte Lebensmittel sind. Seine Fans lieben die Website, aber Tony hört immer wieder Beschwerden, dass die Website langsam geladen wird. Tony hat Sie gebeten, ihm zu helfen, die Website zu beschleunigen.

Schritt 1: Website prüfen

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

• Es wird eine Referenz erstellt, anhand derer Sie spätere Änderungen messen können.
• Sie erhalten umsetzbare Tipps dazu, welche Änderungen sich am stärksten auswirken.

Einrichten

Zunächst müssen Sie eine neue Arbeitsumgebung für Tonys Website, damit Sie Änderungen vornehmen können später hinzufügen:

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

   

   Der Name des Projekts wird von tony in einen zufällig generierten Namen geändert. Sie haben jetzt eine eigene bearbeitbare Kopie des Codes. Später werden Sie diesen Code ändern.

2. Klicken Sie unten auf dem Tab „Editor“ auf Vorschau > Vorschau in einem neuen Fenster anzeigen: Die Demo wird in einem neuen Tab geöffnet. Dieser Tab wird als Tab „Demo“ bezeichnet. Das Laden der Website kann eine Weile dauern.

   

3. Öffne die Entwicklertools neben der Demo.

   

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 double_arrow Weitere Steuerfelder ausgeblendet.

   

2. Gleichen Sie die Konfigurationseinstellungen des Lighthouse-Berichts mit denen im Screenshot ab. Im Folgenden finden Sie eine Erklärung zur verschiedene Optionen:

   • check_box Speicherinhalt löschen. Wenn Sie dieses Kästchen aktivieren, wird vor jeder Prüfung der gesamte mit der Seite verknüpfte Speicher gelöscht. Lassen Sie diese Einstellung aktiviert, wenn Sie prüfen möchten, wie Erstbesucher Ihre Website erleben. 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. Die Berichterstellung kann jedoch verlangsamt werden. Den Trace finden Sie unter more_vert im Menü Tools > Sehen Sie sich den ungedrosselten Trace an, nachdem der Lighthouse-Bericht erstellt wurde.
   • Simulierte Drosselung (Standardeinstellung) arrow_drop_down. Diese Option simuliert die typischen Bedingungen beim Surfen auf einem Mobilgerät. Sie heißt „simuliert“, da Lighthouse während der Prüfung nicht gedrosselt wird. Stattdessen wird nur extrapoliert, wie lange das Laden der Seite unter mobilen Bedingungen dauern würde. Die Einstellung DevTools-Drosselung (erweitert) hingegen drosselt Ihre CPU und Ihr Netzwerk, was zu einem längeren Prüfungsprozess führt.
   • Modus > radio_button_checked Navigation (Standard): In diesem Modus wird ein einzelner Seitenaufbau analysiert, den wir in dieser Anleitung benötigen. Weitere Informationen finden Sie unter Die drei Modi.
   • Gerät > radio_button_checked Mobilgerät. Die Option für Mobilgeräte ändert den User-Agent-String und simuliert eine mobile Darstellungsbereich. Bei der Desktop-Option werden die Änderungen auf Mobilgeräten praktisch nur deaktiviert.
   • Kategorien > check_box Leistung: Wenn nur eine aktivierte Kategorie aktiviert ist, erstellt 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 einem Lighthouse-Bericht ein Fehler auftritt, öffnen Sie den Tab „Demo“. in einem Inkognitofenster, in dem keine anderen Tabs geöffnet sind. So wird sichergestellt, dass Chrome im sauberen Zustand ausgeführt wird. Chrome-Erweiterungen können den Auditing-Prozess zu behindern.

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. Ein höherer Wert bedeutet eine bessere Leistung.

Messwerte

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

Dieser Abschnitt enthält quantitative Messungen der Website-Leistung. Jeder Messwert gibt Aufschluss über einen anderen Aspekt der Leistung. Beispiel: First Contentful Paint erfahren Sie, wann Inhalte zum ersten Mal auf den Bildschirm gezeichnet werden. Dies ist ein wichtiger Meilenstein Wahrnehmung des Seitenaufbaus, während mit Zeit bis Interaktivität der Punkt markiert wird, an dem die Seite scheint für die Nutzerinteraktionen bereit genug zu sein.

Screenshots

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

Verkaufschancen

Als Nächstes finden Sie den Abschnitt Empfehlungen mit konkreten Tipps, wie Sie die Ladezeit dieser Seite verbessern können. die Leistung.

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

Klicken Sie auf Weitere Informationen, um zu erfahren, warum eine Empfehlung wichtig und spezifisch ist. und Empfehlungen zu deren Behebung.

Diagnose

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

Bestandene Prüfungen

Im Bereich Bestandene Prüfungen sehen Sie, was die Website korrekt macht. Klicken Sie zum Maximieren auf .

Schritt 2: Experimentieren

Im Abschnitt Empfehlungen Ihres Lighthouse-Berichts finden Sie Tipps, wie Sie die die Leistung. In diesem Abschnitt implementieren Sie die empfohlenen Änderungen an der Codebasis und prüfen die Website nach jeder Änderung überprüfen, um deren Auswirkung auf die Websitegeschwindigkeit zu messen.

Textkomprimierung aktivieren

Laut Ihrem Bericht ist die Aktivierung der Textkomprimierung eine der wichtigsten Möglichkeiten zur Verbesserung der die Leistung der Seite.

Bei der Textkomprimierung wird die Größe einer Textdatei reduziert oder komprimiert, bevor sie Netzwerk. So könnten Sie einen Ordner vor dem E-Mail-Versand komprimieren, um seine Größe zu reduzieren.

Bevor Sie die Komprimierung aktivieren, haben Sie einige Möglichkeiten, wie Sie manuell prüfen können, ob Text Ressourcen komprimiert.

Öffnen Sie das Steuerfeld Netzwerk und prüfen Sie settings Einstellungen > check_box Große Anfragezeilen verwenden:

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

Sie können die Komprimierung auch überprüfen, indem Sie die HTTP-Header einer Ressource überprüfen:

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

   

2. Suchen Sie im Abschnitt Response Headers nach einem content-encoding-Header. Sie sollten keine sehen, Das bedeutet, dass bundle.js nicht komprimiert wurde. Wenn eine Ressource komprimiert ist, wird dieser Header normalerweise auf gzip, deflate oder br festgelegt. Eine Erklärung finden Sie in den Anweisungen. Werte.

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

1. Öffnen Sie im Editor-Tab server.js und fügen Sie die folgenden zwei (hervorgehobenen) Zeilen hinzu:

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

2. app.use(compression()) muss vor app.use(express.static('build')) gesetzt werden.

   

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.

Überprüfen Sie anhand der bereits bekannten Workflows manuell, ob die Komprimierung funktioniert:

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

   In der Spalte Größe sollten jetzt zwei verschiedene Werte für Textressourcen wie bundle.js angezeigt werden. 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 für die Seite aus, um die Auswirkung der Textkomprimierung auf die Ladezeit der Seite zu messen Leistung:

1. Öffnen Sie den Lighthouse-Bereich und klicken Sie oben in der Aktionsleiste auf Prüfung durchführen....

   

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

   

Endlich! Das sieht nach Fortschritt aus. Ihre Gesamtleistung sollte gestiegen sein, was bedeutet, dass die Website schneller wird.

Textkomprimierung in der realen Welt

Bei den meisten Servern gibt es einfache Lösungen wie diese, um die Komprimierung zu aktivieren. Suchen Sie einfach nach um den Server zu konfigurieren, den Sie für die Komprimierung von Text verwenden.

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 ändern, wird die Ladezeit verkürzt, da die Dateigröße der Bilder verringert wird. Wenn Ihre Nutzenden auf einem 500 Pixel breiten Bildschirm eines Mobilgeräts zu betrachten, ein 1.500 Pixel breites Bild gesendet wird. Im Idealfall senden Sie ein Bild mit einer Breite von höchstens 500 Pixeln.

1. Klicken Sie im Bericht auf Bilder richtig groß, um zu sehen, an welchen Bildern die Größe angepasst werden muss. Es sieht so aus, als wären alle 4 Bilder größer als nötig.

   

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

3. Ersetzen Sie const dir = 'big' durch const dir = 'small'. Dieses Verzeichnis enthält Kopien derselben Bilder, deren Größe angepasst wurde.

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

   

Die Änderung hat anscheinend nur einen geringen Einfluss auf die Gesamtleistung. Eine Sache sollte jedoch nicht deutlich erkennen lässt, wie viele Netzwerkdaten Sie Ihren Nutzern einsparen. Der Gesamtwert Die Größe der alten Fotos betrug rund 6,1 MB, jetzt sind sie nur noch 633 KB groß. Sie können dies in der Statusleiste unten im Bereich Netzwerk prüfen.

Größe von Bildern in der realen Umgebung anpassen

Bei einer kleinen App kann eine einmalige Größenänderung wie diese ausreichen. Bei einer großen App ist natürlich nicht skalierbar. Hier sind einige Strategien für die Verwaltung von Bildern in großen Apps:

• Passen Sie die Größe der Images während des Build-Prozesses an.
• Erstellen Sie während des Build-Prozesses mehrere Größen jedes Images 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 zumindest jedes Bild. Das führt häufig zu enormen Einsparungen. Bei der Optimierung kommt es zu Sie führen ein Bild über ein spezielles Programm aus, das die Größe der Bilddatei reduziert. Siehe Wichtige Informationen Weitere Tipps zur Bildoptimierung

Ressourcen eliminieren, die das Rendering blockieren

Laut Ihrem aktuellen Bericht ist die Eliminierung von Ressourcen, die das Rendering blockieren, jetzt die größte Chance.

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

Die erste Aufgabe besteht 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 Ressourcen aufzurufen, die blockieren: lodash.js und jquery.js.

   

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

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

3. Geben Sie die ersten Buchstaben von Coverage ein und wählen Sie Abdeckung anzeigen aus.

   

   Der Tab Abdeckung wird im Schieberegler geöffnet.

   

4. Klicken Sie auf Aktualisieren Aktualisieren. Auf dem Tab Abdeckung erhalten Sie einen Überblick darüber, welcher Anteil des Codes 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. Die Entwicklertools öffnen die Datei im Bereich Quellen. Eine Codezeile wurde ausgeführt, wenn daneben ein grüner Balken angezeigt wird. Ein roter Balken neben einer Codezeile bedeutet, dass der Code nicht ausgeführt wurde. auf keinen Fall beim Laden der Seite.

   

6. Scrollen Sie ein wenig durch den jQuery-Code. Einige der Zeilen, die „ausgeführt“ werden, sind eigentlich nur Kommentare. Das Ausführen dieses Codes über einen Minifier, mit dem Kommentare entfernt werden, ist eine weitere Möglichkeit, Größe dieser Datei.

Kurz gesagt: Wenn Sie mit Ihrem eigenen Code arbeiten, können Sie ihn über den Tab Abdeckung analysieren. und senden Sie nur den Code, der für den Seitenaufbau erforderlich ist.

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

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

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 zur Bestätigung die Eingabetaste.

   

4. Lade die Seite neu. Die jQuery- und Lodash-Anfragen sind rot, was bedeutet, dass sie blockiert wurden. Die wird immer noch geladen und ist interaktiv. Es sieht so aus, als würden diese Ressourcen überhaupt nicht benötigt.

   

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 nun die Verweise auf diese Dateien aus dem Code und prüfen Sie die Seite noch einmal:

1. Öffnen Sie auf dem Tab „Editor“ 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 Gesamtpunktzahl sollte sich wieder verbessert haben.

   

Den kritischen Rendering-Pfad in der realen Welt optimieren

Der kritische Rendering-Pfad bezieht sich auf den Code, den Sie zum Laden einer Seite benötigen. 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 Skripte finden, die Sie sofort entfernen können, aber häufig werden Sie feststellen, Viele Skripts müssen nicht beim Seitenaufbau angefordert werden und können stattdessen asynchron programmiert. Weitere Informationen finden Sie unter Asynchron oder verzögert verwenden.
• Wenn Sie ein Framework verwenden, prüfen Sie, ob es einen Produktionsmodus hat. In diesem Modus kann eine Funktion wie als Baumbewegung, um unnötigen Code zu entfernen, der das kritische Rendering blockiert.

Weniger Arbeit mit dem Hauptthread

Im Bereich Empfehlungen werden im neuesten Bericht kleinere potenzielle Einsparungen angezeigt. Diagnose sehen, scheint der größte Engpass zu viel Hauptthread Aktivitäten.

Im Hauptthread erledigt der Browser die meisten Aufgaben, die zum Anzeigen einer Seite erforderlich sind, z. B. das Parsen. und HTML, CSS und JavaScript ausführen.

Das Ziel besteht darin, im Bereich Leistung zu analysieren, welche Arbeit der Hauptthread während der Seitenladevorgänge und finden Möglichkeiten, unnötige Arbeiten aufzuschieben oder zu entfernen.

1. Öffnen Sie Leistung > Erfasse die Einstellungen und setze Netzwerk auf Langsames 3G und CPU auf 6-mal langsamer.

   

   Für Mobilgeräte gelten in der Regel mehr Hardwarebeschränkungen als für Laptops oder Desktop-Computer. Mit diesen Einstellungen können Sie den Seitenaufbau also so erleben, als würden Sie ein weniger leistungsstarkes Gerät verwenden.

2. Klicken Sie auf Aktualisieren Aktualisieren. Die Entwicklertools laden die Seite neu und erstellen dann eine Visualisierung dessen, was zum Laden der Seite erforderlich war. Diese Visualisierung wird als Trace bezeichnet.

   

Im Trace wird die Aktivität chronologisch von links nach rechts angezeigt. Die fps-, CPU- und NET-Diagramme oben erhalten Sie einen Überblick über Bilder 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 beschleunigen können, indem Sie weniger JavaScript-Aufwand benötigen.

Untersuchen Sie den Trace, um Möglichkeiten zu finden, weniger JavaScript auszuführen:

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

   

   Es gibt eine Reihe von Messwerten für das Nutzertiming von React. Anscheinend nutzt Tony den Entwicklungsmodus von React. Der Wechsel in den Produktionsmodus von React wird wahrscheinlich zu leichten Leistungssteigerungen führen.

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

3. Gehen Sie den Hauptbereich durch. Dieser Abschnitt enthält ein chronologisches Protokoll der Aktivitäten im Hauptthread. von links nach rechts. Die Y-Achse (oben nach unten) zeigt, warum Ereignisse aufgetreten sind.

   

   In diesem Beispiel hat das Evaluate Script-Ereignis die (anonymous)-Funktion ausgelöst, wodurch __webpack__require__, ./src/index.jsx usw. ausgeführt wurde.

4. Scrollen Sie im Main-Bereich ganz nach unten. 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 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…

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

   

   Der Abschnitt Bottom-up zeigt nur Informationen für die Aktivität oder Gruppe von Aktivitäten an, aktuell ausgewählt ist. Wenn Sie beispielsweise auf eine der mineBitcoin-Aktivitäten geklickt haben, Im Abschnitt Bottom-Up werden nur Informationen für diese eine 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.

Zeit prüfen, ob der Produktionsmodus verwendet und die JavaScript-Aktivität reduziert wird um den Seitenaufbau zu beschleunigen. Mit dem Produktionsmodus beginnen:

1. Öffnen Sie im Tab „Editor“ 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 im Tab „Editor“ src/App.jsx.
2. Kommentieren Sie den Anruf an this.mineBitcoin(1500) in der 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.

Weniger Hauptthread-Arbeit in der Praxis

Im Bereich Leistung lässt sich am häufigsten nachvollziehen, welche Aktivitäten auf Ihrer Website ausgeführt werden. beim Laden und finden Möglichkeiten, unnötige Aktivitäten zu entfernen.

Wenn Sie einen Ansatz bevorzugen, der sich eher wie console.log() anfühlt, können Sie mit der User Timing API beliebige Phasen Ihres App-Lebenszyklus auszeichnen, um zu verfolgen, wie lange jede dieser Phasen Phasen dauern kann.

Zusammenfassung

• Wenn Sie die Ladeleistung einer Website optimieren möchten, beginnen Sie immer mit ein Audit. 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 auf Ihrer eigenen Website durch! Wenn du Hilfe beim Interpretieren deines Berichts oder bei der Verbesserung der Ladeleistung benötigst, sieh dir an, wie du Hilfe von der Entwicklertools-Community erhalten kannst:

• In diesem Dokument können Sie Fehler im Repository developer.chrome.com melden.
• Du kannst Fehlerberichte in den Entwicklertools unter Chromium Bugs einreichen.
• Besprechen Sie Funktionen und Änderungen in der Mailingliste. Bitte verwenden Sie die Mailingliste nicht für Supportanfragen. Verwenden Sie stattdessen Stack Overflow.
• Allgemeine Hilfe zur Verwendung der Entwicklertools auf Stack Overflow erhalten. Wenn du Anfragen zu Fehlern einreichen möchtest, verwende immer Chromium-Programmfehler.
• Twittern Sie uns unter @ChromeDevTools.