Lighthouse: Websitegeschwindigkeit optimieren

Ziel der Anleitung

In dieser Anleitung erfahren Sie, wie Sie mit den Entwicklertools von Chrome Ihre Websites schneller laden.

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

Voraussetzungen

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

Sie müssen nichts über die Ladeleistung wissen.

Einführung

Das ist Tony. Tony ist in der Katzengesellschaft sehr berühmt. Er hat eine Website erstellt, auf der sich seine Fans über seine Lieblingsspeisen informieren können. Bei seinen Fans ist die Website sehr beliebt, aber Tony wird immer wieder beschwert, dass die Website nur 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, sollten Sie immer mit einer Prüfung beginnen. Die Prüfung hat zwei wichtige Funktionen:

• Damit wird eine Referenz erstellt, anhand derer nachfolgende Änderungen gemessen werden können.
• Sie erhalten praktische Tipps dazu, welche Änderungen die größten Auswirkungen haben.

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. Erstelle einen Remix des Websiteprojekts auf Glitch. Das neue Projekt wird in einem Tab geöffnet. Dieser Tab wird als Editor-Tab 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 eine Weile dauern, bis die Website geladen ist.

   

3. Öffnen Sie die Entwicklertools zusammen mit der Demo.

   

Baseline festlegen

Die Baseline gibt die Leistung der Website vor der Durchführung von Leistungsverbesserungen an.

1. Öffnen Sie das Steuerfeld Lighthouse. Es ist möglicherweise hinter double_arrow Weitere Steuerfelder verborgen.

   

2. Passen Sie die Konfigurationseinstellungen Ihres Lighthouse-Berichts an die auf dem Screenshot an. Im Folgenden werden die verschiedenen Optionen erläutert:

   • check_box Speicherinhalt löschen. Wenn Sie dieses Kästchen aktivieren, wird vor jedem Audit 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 wiederholte Besuche sehen möchten.
   • 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 des Prüfungsprozesses nicht tatsächlich drosselt. Stattdessen wird einfach hochgerechnet, wie lange die Seite unter mobilen Bedingungen zum Laden benötigt. Bei der Einstellung Drosselung in den Entwicklertools (erweitert) hingegen drosseln die CPU und das Netzwerk. Allerdings ist ein längerer Prüfprozess in Kauf genommen.
   • Modus > radio_button_checked Navigation (Standard). In diesem Modus wird ein einzelner Seitenaufbau analysiert. Das benötigen wir in dieser Anleitung. Weitere Informationen finden Sie unter Die drei Modi.
   • Gerät > radio_button_checked Mobilgerät. Mit der Option „Mobil“ wird der User-Agent-String geändert und ein mobiler Darstellungsbereich simuliert. Bei der Desktop-Option werden die mobilen Änderungen praktisch nur deaktiviert.
   • Kategorien > check_box Leistung: Wenn eine Kategorie aktiviert ist, erstellt Lighthouse nur einen Bericht mit den entsprechenden Prüfungen. Sie können die anderen Kategorien aktiviert lassen, wenn Sie sehen möchten, welche Arten von Empfehlungen sie enthalten. Durch das Deaktivieren irrelevanter Kategorien wird der Prüfungsprozess etwas beschleunigt.

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

   

Umgang mit Berichtsfehlern

Wenn im Lighthouse-Bericht ein Fehler auftritt, versuchen Sie, den Demo-Tab in einem Inkognitofenster ohne andere Tabs auszuführen. Dadurch wird sichergestellt, dass Sie Chrome in einem sauberen Zustand ausführen. Insbesondere Chrome-Erweiterungen können den Prüfprozess beeinträchtigen.

Bericht auswerten

Die Zahl oben im Bericht gibt die Gesamtleistung der Website an. Wenn Sie später Änderungen am Code vornehmen, sollten Sie diese Zahl erhöhen. 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 lesen möchten, klicken Sie auf Weitere Informationen.

Dieser Abschnitt enthält quantitative Messungen der Leistung der Website. Jeder Messwert gibt Aufschluss über einen anderen Leistungsaspekt. Mit First Contentful Paint werden Sie beispielsweise informiert, wann Inhalte zuerst auf dem Bildschirm dargestellt werden. Dies ist ein wichtiger Meilenstein für die Wahrnehmung des Seitenaufbaus durch den Nutzer. Mit Time To Interactive (Zeit bis Interaktivität) wird dagegen der Punkt markiert, an dem die Seite für Nutzerinteraktionen bereit ist.

Screenshots

Als Nächstes sehen Sie eine Sammlung von Screenshots, die Ihnen zeigen, wie die Seite während des Ladevorgangs aussah.

Empfehlungen

Im Abschnitt Empfehlungen finden Sie Tipps, wie Sie die Ladeleistung dieser Seite verbessern können.

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

Klicken Sie auf Weitere Informationen..., um zu erfahren, warum eine Empfehlung wichtig ist, und spezifische Empfehlungen, wie Sie sie beheben können.

Diagnose

Im Abschnitt Diagnose finden Sie weitere Informationen zu Faktoren, die sich auf die Ladezeit der Seite auswirken.

Bestandene Prüfungen

Im Bereich Bestandene Prüfungen sehen Sie, welche Aufgaben auf der Website korrekt ausgeführt werden. Klicken Sie, um den Abschnitt zu maximieren.

Schritt 2: Experiment

Im Bereich Empfehlungen Ihres Lighthouse-Berichts finden Sie Tipps zur Verbesserung der Seitenleistung. 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 Ihrem Bericht ist das Aktivieren der Textkomprimierung eine der besten Möglichkeiten zur Verbesserung der Seitenleistung.

Bei der Textkomprimierung reduzieren oder komprimieren Sie die Größe einer Textdatei, bevor sie über das Netzwerk gesendet wird. So wie Sie einen Ordner zippen, bevor Sie ihn per E-Mail versenden, um seine Größe zu verringern.

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

Öffnen Sie das Steuerfeld Netzwerk und aktivieren Sie settings Einstellungen > check_box Große Anfragezeilen verwenden.

Jede Zelle Size enthält zwei Werte. Der oberste Wert ist die Größe der heruntergeladenen Ressource. Der untere Wert ist die Größe der nicht komprimierten Ressource. Sind die beiden Werte identisch, wird die Ressource beim Senden über das Netzwerk nicht komprimiert. In diesem Beispiel sind der obere und der untere Wert für bundle.js beide 1.4 MB.

Sie können die Komprimierung auch anhand der HTTP-Header einer Ressource prü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. Diese sollte nicht angezeigt werden, was bedeutet, dass bundle.js nicht komprimiert wurde. Wenn eine Ressource komprimiert ist, ist dieser Header in der Regel auf gzip, deflate oder br festgelegt. Eine Erklärung dieser Werte finden Sie in den Anweisungen.

Das reicht mit den Erklärungen. Zeit, ein paar Änderungen vorzunehmen! Aktivieren Sie die Textkomprimierung, indem Sie einige Codezeilen hinzufügen:

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')) platziert werden.

   

3. Warte, bis Glitch den neuen Build der Website bereitgestellt hat. Ein glückliches Emoji links unten zeigt an, dass die Bereitstellung erfolgreich war.

Prüfen Sie mithilfe der zuvor gelernten Workflows manuell, ob die Komprimierung funktioniert:

1. Kehren Sie zum Tab „Demo“ 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, und der untere Wert von 1.4 MB ist die unkomprimierte Dateigröße.

   

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

   

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

1. Öffnen Sie das Steuerfeld Lighthouse und klicken Sie oben in der Aktionsleiste auf Audit durchführen....

   

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

   

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

Textkomprimierung in der Praxis

Die meisten Server haben wirklich einfache Korrekturen wie diese zur Aktivierung der Komprimierung. Suchen Sie einfach nach der Konfiguration des Servers, den Sie zum Komprimieren von Text verwenden.

Bildgröße anpassen

Dem neuen Bericht zufolge ist die Größenanpassung von Bildern eine weitere große Chance.

Durch das Ändern der Bildgröße wird die Ladezeit verkürzt, da die Dateigröße von Bildern reduziert wird. Wenn Nutzer sich Ihre Bilder auf einem Bildschirm eines Mobilgeräts ansehen, der eine Breite von 500 Pixeln hat, macht es keinen Sinn, ein Bild mit einer Breite von 1.500 Pixeln zu senden. Idealerweise senden Sie ein Bild mit einer Breite von maximal 500 Pixeln.

1. Klicken Sie in Ihrem Bericht auf Bilder in der richtigen Größe anpassen, um zu sehen, welche Bilder angepasst werden sollten. Alle vier Bilder sind größer als nötig.

   

2. Öffnen Sie im Editor-Tab 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 wirkt sich nur geringfügig auf die Gesamtleistung aus. Allerdings zeigt die Punktzahl nicht eindeutig, wie viele Netzwerkdaten Sie für Ihre Nutzer einsparen. Die Gesamtgröße der alten Fotos betrug etwa 6,1 MB, ist jetzt aber nur noch etwa 633 KB groß. Sie können das in der Statusleiste unten im Steuerfeld Netzwerk überprüfen.

Größe von Bildern in der realen Welt anpassen

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

• Passen Sie die Größe von Images während des Build-Prozesses an.
• Erstellen Sie während des Build-Prozesses mehrere Größen von jedem Image und verwenden Sie dann srcset in Ihrem Code. Während der Laufzeit wählt der Browser die optimale Größe für das Gerät aus, auf dem er ausgeführt wird. Siehe Bilder relativer Größe.
• Verwenden Sie ein Bild-CDN, mit dem Sie die Größe eines Bildes auf Anfrage dynamisch anpassen können.
• Optimieren Sie zumindest jedes Bild. Dadurch lassen sich oft enorme Einsparungen erzielen. Bei der Optimierung führen Sie ein Bild mit einem speziellen Programm aus, das die Größe der Bilddatei reduziert. Weitere Tipps finden Sie unter Wichtige Tipps zur Bildoptimierung.

Ressourcen entfernen, die das Rendering blockieren

Laut Ihrem neuesten Bericht ist es die größte Chance, Ressourcen zu eliminieren, die das Rendering blockieren.

Eine Ressource, die das Rendering blockiert, ist eine externe JavaScript- oder CSS-Datei, die vom Browser heruntergeladen, geparst und ausgeführt werden muss, bevor er die Seite anzeigen kann. Ziel ist es, nur den grundlegenden CSS- und JavaScript-Code auszuführen, der für die korrekte Darstellung der Seite erforderlich ist.

Die erste Aufgabe besteht darin, Code zu finden, der beim Seitenaufbau 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 folgende Taste, um das Befehlsmenü zu öffnen:

   • Auf einem Mac drücken Sie die Befehlstaste + Umschalt + P.
   • Unter 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 in der Leiste geöffnet.

   

4. Klicken Sie auf Aktualisieren. Auf dem Tab Abdeckung erhalten Sie einen Überblick darüber, wie viel des Codes in bundle.js, jquery.js und lodash.js ausgeführt wird, während die Seite geladen wird.

   

   Auf diesem Screenshot sehen Sie, dass ca. 74% bzw. 30% der jQuery- und Lodash-Dateien nicht verwendet werden.

5. Klicken Sie auf die Zeile jquery.js. Die Entwicklertools öffnet 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 sie nicht ausgeführt wurde, und wird beim Seitenaufbau definitiv nicht benötigt.

   

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, ist das Ausführen dieses Codes in einer Komprimierung, die Kommentare entfernt.

Kurz gesagt: Wenn Sie mit Ihrem eigenen Code arbeiten, können Sie Ihren Code auf dem Tab Abdeckung Zeile für Zeile analysieren und nur den Code senden, 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 Blockierung von Anfragen sehen Sie, was passiert, wenn keine Ressourcen verfügbar sind.

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

2. Geben Sie die ersten Buchstaben von blocking ein und wählen Sie dann Anfrageblockierung anzeigen aus. Der Tab Blockierung von Anfragen 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 Seite wird weiterhin geladen und ist interaktiv, sodass diese Ressourcen anscheinend nicht benötigt werden.

   

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

Im Allgemeinen ist der Tab Anfrageblockierung nützlich, um das Verhalten Ihrer Seite zu simulieren, 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 im 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 über das Steuerfeld Lighthouse noch einmal. Ihre Gesamtbewertung hätte sich wieder verbessern sollen.

   

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 den Seitenaufbau beschleunigen, indem Sie den wichtigsten Code nur während des Seitenaufbaus senden und dann alles andere per Lazy Loading laden.

• Es ist unwahrscheinlich, dass Sie Skripts vorfinden, die Sie sofort entfernen können. Viele Skripts müssen jedoch beim Laden der Seite nicht angefordert werden, sondern können stattdessen asynchron angefordert werden. Siehe Asynchron oder verzögert verwenden.
• Wenn Sie ein Framework verwenden, prüfen Sie, ob es einen Produktionsmodus hat. In diesem Modus können Funktionen wie das Baumwackeln verwendet werden, um unnötigen Code zu eliminieren, der das kritische Rendering blockiert.

Weniger Aufwand für den Hauptthread

Ihr letzter Bericht enthält einige kleinere potenzielle Einsparungen im Bereich Empfehlungen. Wenn Sie jedoch nach unten zum Abschnitt Diagnose scrollen, scheint der größte Engpass zu viele Hauptthreadaktivitäten zu sein.

Im Hauptthread übernimmt der Browser die meiste Arbeit, die zum Anzeigen einer Seite erforderlich ist, wie z. B. das Parsen und Ausführen von HTML, CSS und JavaScript.

Das Ziel besteht darin, im Bereich Leistung zu analysieren, welche Arbeit der Hauptthread während des Seitenaufbaus ausführt. Außerdem sollen Möglichkeiten gefunden werden, unnötige Arbeit aufzuschieben oder zu entfernen.

1. Öffnen Sie Leistung > Aufnahmeeinstellungen und setzen Sie Netzwerk auf Langsames 3G und CPU auf 6x verlangsamen.

   

   Bei Mobilgeräten gibt es in der Regel mehr Hardwareeinschränkungen als bei Laptops oder Desktops. Mit diesen Einstellungen können Sie den Seitenaufbau so erleben, als ob Sie ein weniger leistungsfähiges Gerät verwenden würden.

2. Klicken Sie auf Aktualisieren. DevTools lädt die Seite neu und erstellt dann eine Visualisierung aller Schritte, die zum Laden der Seite erforderlich waren. Diese Visualisierung wird als trace bezeichnet.

   

Der Trace zeigt die Aktivitäten chronologisch von links nach rechts an. Die Diagramme zu FPS, CPU und NET oben bieten Ihnen einen Überblick über Bilder pro Sekunde, CPU-Aktivität und Netzwerkaktivität.

Der gelbe Rand, der im Abschnitt Übersicht zu sehen ist, bedeutet, dass die CPU vollständig mit Scripting-Aktivität beschäftigt war. Dies ist ein Hinweis darauf, dass Sie den Seitenaufbau möglicherweise beschleunigen können, indem Sie weniger JavaScript-Aufwand ausführen.

Untersuchen Sie den Trace, um Möglichkeiten zu finden, weniger JavaScript-Arbeit zu reduzieren:

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 Tonys App den Entwicklungsmodus von React. Wenn du in den Produktionsmodus von React wechselst, kannst du damit wahrscheinlich leicht bessere Ergebnisse erzielen.

2. Klicken Sie noch einmal auf Timings, um diesen Bereich zu minimieren.

3. Durchsuchen Sie den Bereich Main (Hauptbereich). Dieser Abschnitt zeigt ein chronologisches Log der Hauptthreadaktivität von links nach rechts. Auf der Y-Achse (von oben nach unten) sehen Sie, warum Ereignisse aufgetreten sind.

   

   In diesem Beispiel hat das Evaluate Script-Ereignis dazu geführt, dass die Funktion (anonymous) ausgeführt wurde, wodurch __webpack__require__, ./src/index.jsx und so weiter ausgeführt wurden.

4. Scrollen Sie zum Ende des Abschnitts Main (Hauptseite). Wenn Sie ein Framework verwenden, wird der Großteil der oberen Aktivität durch das Framework verursacht, über das Sie normalerweise keine Kontrolle haben. Die von Ihrer App ausgelösten Aktivitäten werden normalerweise unten angezeigt.

   

   In dieser App verursacht eine Funktion namens App anscheinend viele Aufrufe einer mineBitcoin-Funktion. Es klingt, als würde Tony die Geräte seiner Fans nutzen, um Kryptowährung zu minen...

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

   

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

   Die Spalte Self Time (Eigene Zeit) gibt an, wie viel Zeit direkt mit der jeweiligen Aktivität verbracht wurde. In diesem Fall wurden etwa 82% der Zeit des Hauptthreads für die Funktion mineBitcoin aufgewendet.

Prüft, ob durch die Verwendung des Produktionsmodus und das Reduzieren der JavaScript-Aktivität der Seitenaufbau beschleunigt wird. Mit dem Produktionsmodus beginnen:

1. Öffnen Sie im Editor-Tab 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.

   

Reduziere die JavaScript-Aktivitäten, indem du den Aufruf von mineBitcoin entfernst:

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

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

Weniger Aufwand für Hauptthreads in der Praxis

Im Allgemeinen ist der Bereich Leistung die gängigste Methode, um nachzuvollziehen, welche Aktivitäten auf Ihrer Website beim Laden ausgeführt werden. Außerdem können Sie dort nach Möglichkeiten suchen, unnötige Aktivitäten zu entfernen.

Wenn Sie einen Ansatz bevorzugen, der dem console.log() ähnelt, können Sie mit der User Timing API bestimmte Phasen Ihres App-Lebenszyklus beliebig auszeichnen und so verfolgen, wie lange diese Phasen dauern.

Zusammenfassung

• Wann immer du die Ladeleistung einer Website optimieren möchtest, solltest du immer mit einer Prüfung beginnen. Die Prüfung dient als Basiswert und gibt Ihnen 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 isolierte Änderung auf die Leistung auswirkt.

Nächste Schritte

Führen Sie Audits auf Ihrer eigenen Website durch. Wenn Sie Hilfe bei der Interpretation Ihres Berichts oder zur Verbesserung der Ladeleistung benötigen, finden Sie in der DevTools-Community Hilfe.

• Melden Sie Programmfehler in diesem Dokument im Repository developer.chrome.com.
• Du kannst unter Chromium Bugs Fehlerberichte in den Entwicklertools einreichen.
• Diskutieren Sie Funktionen und Änderungen in der Mailingliste. Verwenden Sie die Mailingliste nicht für Supportanfragen. Verwenden Sie stattdessen Stack Overflow.
• Auf Stack Overflow erhalten Sie allgemeine Hilfe zur Verwendung der Entwicklertools. Verwende zum Einreichen von Fehleranfragen immer Chromium-Programmfehler.
• Schreiben Sie einen Tweet an @ChromeDevTools.