Optimieren der Websitegeschwindigkeit mit Lighthouse

In diesem Tutorial erfahren Sie, wie Sie Lighthouse und andere Tools in DevTools verwenden, um Möglichkeiten zu finden, wie Ihre Websites schneller geladen werden können.

Das Lighthouse-Tool stellt Links zu Inhalten bereit, die auf Websites von Drittanbietern gehostet werden. Microsoft ist nicht verantwortlich für und hat keine Kontrolle über den Inhalt dieser Websites und alle Daten, die möglicherweise gesammelt werden.

Voraussetzungen

• Installieren Sie Visual Studio Code , um den Quellcode zu bearbeiten.

• Installieren Sie Node.js , um es als lokalen Webserver zu verwenden.

Einführung

In diesem Tutorial verbessern Sie die Leistung von Margies Reisen, einer fiktiven Reisewebsite, die Reisebilder, Textbeschreibungen, einige JavaScript-basierte Benutzerinteraktionen und eine interaktive Karte enthält.

Die Quelldateien für die Website finden Sie unter MicrosoftEdge / Demos > travel-site.

Schritt 1: Lokales Einrichten der Website

Richten Sie zunächst die Website lokal ein, damit Sie später Änderungen daran vornehmen können:

1. Lokales Abrufen des Quellcodes der Website: Laden Sie das Demos-Repository herunter, oder klonen Sie es.

2. Öffnen Sie den Ordner, den Sie soeben in Visual Studio Code heruntergeladen oder geklont haben.

3. Wählen Sie in Visual Studio CodeTerminalanzeigen> aus. Oder drücken Sie STRG+'.

   Visual Studio Code zeigt die Quelldateien in der Explorer Randleiste und das Terminal an:

   

4. Geben Sie im Terminal ein npx http-server , um einen lokalen Webserver zu starten.

   Dieser lokale Webserver wird beendet, wenn Sie Visual Studio Code schließen.

5. Navigieren Sie in Microsoft Edge zu http://localhost:8080/travel-site , um die Website zu öffnen:

   

Schritt 2: Überwachen der Website

Wenn Sie die Ladeleistung eines Standorts verbessern möchten, beginnen Sie immer mit einer Überwachung.

Die Überwachung hat zwei wichtige Funktionen:

• Es wird eine Baseline erstellt, anhand derer Sie nachfolgende Änderungen messen können.

• Es bietet Ihnen umsetzbare Tipps dazu, welche Änderungen die Leistung am meisten verbessern.

Einrichten einer Baseline

Die Baseline ist eine Aufzeichnung der Leistung der Website, bevor Sie Leistungsverbesserungen vorgenommen haben.

1. Öffnen Sie in Microsoft Edge DevTools, indem Sie mit der rechten Maustaste auf die Webseite klicken und dann Untersuchen auswählen. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).

2. Wählen Sie in DevTools auf der Symbolleiste Standard die Registerkarte Lighthouse aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Registerkarten () oder auf die Schaltfläche Weitere Tools ().

3. Wählen Sie die Kategorie Leistung aus, und löschen Sie alle anderen Kategorien. Behalten Sie vorerst die anderen Standardoptionen bei. Mögliche Optionen:

   • Modus: Um Tests während des Ladens der Webseite auszuführen, legen Sie diese Option auf Navigation (Standard) fest. Um Tests während eines bestimmten Zeitraums auszuführen, legen Sie die Option auf Timespan fest. Um Tests auf der Webseite auszuführen, wie sie jetzt angezeigt wird, legen Sie die Option auf Momentaufnahme fest.

   • Gerät: Legen Sie diese Option auf Mobile fest, um eine Agent-Zeichenfolge für mobile Benutzer und einen mobilen Viewport zu simulieren. Um die Webseite ohne Simulation zu testen, legen Sie diese Option auf Desktop fest.

   • Kategorien: Mit dieser Option können Sie nur eine Teilmenge der in Lighthouse verfügbaren Tests ausführen.

4. Klicken Sie auf Seitenladevorgang analysieren:

   

5. Nach 10 bis 30 Sekunden wird ein Bericht über die Leistung der Website angezeigt:

   

Behandeln von Berichtsfehlern

Wenn der Lighthouse-Bericht Fehler anzeigt, versuchen Sie erneut, Lighthouse über ein InPrivate-Fenster auszuführen, ohne dass andere Registerkarten geöffnet sind. Wenn Lighthouse über ein InPrivate-Fenster ausgeführt wird, wird sichergestellt, dass der Überwachungsprozess ohne Störungen ausgeführt wird.

So öffnen Sie ein InPrivate-Fenster :

1. Klicken Sie auf der Microsoft Edge-Symbolleiste (oberhalb der DevTools-Symbolleiste) auf die Schaltfläche Einstellungen und mehr (...).

2. Klicken Sie auf Neues InPrivate-Fenster.

3. Einrichten einer neuen Baseline in Lighthouse:

   

Grundlegendes zu Ihrem Bericht

Gesamtleistungsbewertung

Die Zahl oben im Bericht ist die Gesamtleistungsbewertung für die Webseite. Wenn Sie später Änderungen am Code vornehmen, sollte die angezeigte Zahl steigen. Eine höhere Bewertung bedeutet eine bessere Leistung.

Metriken

Der Abschnitt Metriken enthält quantitative Messungen der Leistung der Webseite:

Jede Metrik bietet Einblicke in einen anderen Aspekt der Leistung. Zum Beispiel:

• First Contentful Paint gibt an, wann Inhalte zum ersten Mal auf dem Bildschirm angezeigt werden. Dies ist ein wichtiger Meilenstein in der Wahrnehmung des Benutzers vom Laden der Seite.
• Zeit bis Interaktiv markiert den Punkt, an dem die gerenderte Seite bereit ist, Benutzerinteraktionen zu verarbeiten.

Klicken Sie auf Ansicht erweitern , um eine Beschreibung für jede Metrik anzuzeigen. Klicken Sie dann auf Weitere Informationen , um die Dokumentation dazu zu lesen:

Screenshots

Unter dem Abschnitt Metriken finden Sie eine Sammlung von Screenshots, die zeigen, wie die Seite während des Ladens aussähte:

Möglichkeiten

Der Abschnitt Verkaufschancen enthält spezifische Tipps zum Verbessern der Ladeleistung dieser speziellen Webseite:

Klicken Sie auf eine Verkaufschance, um weitere Informationen dazu anzuzeigen, und klicken Sie dann auf Weitere Informationen , um zu erfahren, warum eine Verkaufschance wichtig ist, und spezifische Empfehlungen zur Behebung:

Diagnose

Der Abschnitt Diagnose enthält weitere Informationen zu Faktoren, die zur Ladezeit der Seite beitragen:

Bestandene Audits

Im Abschnitt Bestandene Überwachungen wird angezeigt, was die Website ordnungsgemäß ausführt. Klicken Sie auf Anzeigen , um den Abschnitt zu erweitern:

Schritt 3: Experimentieren

Im Abschnitt Verkaufschancen Ihres Berichts erhalten Sie Tipps zum Verbessern der Leistung der Webseite. In diesem Abschnitt implementieren Sie die empfohlenen Änderungen an der Codebasis und überwachen die Website nach jeder Änderung erneut, um zu messen, wie sich diese Änderung auf die Websitegeschwindigkeit auswirkt.

Ändern der Größe von Bildern

Ihr Bericht gibt an, dass die Bereitstellung von Bildern mit angemessener Größe eine der wichtigsten Möglichkeiten ist, die Leistung der Seite zu verbessern. Das Ändern der Größe von Images trägt dazu bei, die Größe der Netzwerknutzlast zu reduzieren. Wenn Ihr Benutzer Ihre Bilder auf einem 500 Pixel breiten Bildschirm eines mobilen Geräts anzeigt, ist es wirklich sinnlos, ein Bild mit einer Breite von 1500 Pixeln zu senden. Im Idealfall senden Sie höchstens ein Bild mit einer Breite von 500 Pixeln.

Klicken Sie im Abschnitt Verkaufschancen Ihres Berichts auf Bilder richtig skalieren , um anzuzeigen, welche Bilder ihre Größe ändern sollen. Lighthouse listet vier .jpg Dateien auf, deren Größe Sie ändern können, um die Ladezeit zu verbessern:

Bevor Sie die Größe dieser Bilder ändern, überprüfen Sie die Menge der Daten, die der Server an den Browser senden muss, um diese Bilder anzuzeigen:

1. Öffnen Sie das Netzwerktool .

   Wenn das Tool leer ist, aktualisieren Sie die Seite.

2. Geben Sie im Textfeld Filter ein .jpg , um die Liste der Anforderungen zu filtern und nur die vier Bilder anzuzeigen.

   Weitere Informationen zum Filtern von Anforderungen im Netzwerktool finden Sie unter Filtern von Anforderungen in der Referenz zu Netzwerkfeatures.

3. Überprüfen Sie die untere Symbolleiste im Netzwerktool , um die Menge der aufgrund der Bilder übertragenen Daten zu überprüfen:

   

   Die untere Symbolleiste zeigt, dass die vier Bilder 16,4 MB der insgesamt 17,3 MB übertragenen Daten für diese Webseite beitragen.

Ändern Sie als Nächstes die Größe der Images, und führen Sie eine neue Überwachung aus:

1. Öffnen Sie in Visual Studio Code den /travel-site/assets/img/optimized/ Ordner im Explorer, der eine Kopie der vier Bilder enthält, die auf der Webseite angezeigt werden, aber bereits für Sie optimiert sind. Diese Bilder sind 1000 Pixel breit und verwenden das optimierte .webp Format.

   Das Ändern der Größe von Images hängt von Ihrem Betriebssystem ab. Um beispielsweise die Größe von Bildern unter Windows zu ändern, können Sie PowerToys verwenden. Weitere Informationen finden Sie unter Hilfsprogramm zur Bildänderung.

2. Öffnen Sie die /travel-site/index.html Datei, und ersetzen Sie die vier Bildpfade wie folgt:

   • Ersetzen Sie die vier Instanzen von assets/img/ in der Datei durch assets/img/optimized.

   • Ersetzen Sie die vier Instanzen von .jpg in der Datei durch .webp.

3. Klicken Sie in Lighthouse auf Überwachung ausführen ("), um zur Seite Standard Lighthouse zurückzukehren, ohne Den Baselinebericht zu verlieren.

4. Klicken Sie erneut auf Seitenladevorgang analysieren , um zu sehen, wie sich die Änderung auf die Ladeleistung auswirkt:

   

Ihre Punktzahl stieg von 18 auf 26. Um zu überprüfen, wie viele Daten Sie gespeichert haben, verwenden Sie das Netzwerktool wie zuvor:

Jetzt müssen die Bilder auf der Webseite nur noch 360 KB Daten übertragen, statt 16,4 MB.

Automatisches Ändern der Größe von Bildern

Für eine kleine App ist eine einmalige Größenänderung wie diese möglicherweise ausreichend. Für eine große App sollten Sie jedoch die folgenden Strategien zum Verwalten von Bildern in Betracht ziehen:

• Ändern Sie die Größe von Images während des Buildprozesses automatisch.

• Erstellen Sie während des Buildprozesses mehrere Größen für jedes Image, und verwenden Sie srcset sie dann in Ihrem Code. Zur Laufzeit übernimmt der Browser die Auswahl der für das Gerät am besten geeigneten Größe. Weitere Informationen finden Sie unter Reaktionsfähige Bilder unter web.dev.

• Verwenden Sie ein Image-CDN, mit dem Sie die Größe eines Images dynamisch ändern können, wenn Sie es anfordern.

• Optimieren Sie zumindest jedes Bild. Dies kann oft zu enormen Einsparungen führen.

Optimierung bedeutet, dass ein Bild über ein Programm ausgeführt wird, das die Größe der Bilddatei reduziert. Weitere Tipps finden Sie unter Optimieren Ihrer Bilder in schnellen Ladezeiten bei web.dev.

Reduzieren nicht verwendeter JavaScript-Code

Ihr neuester Lighthouse-Bericht besagt, dass die Webseite nicht verwendeten JavaScript-Code enthält und dass das Laden dieses Codes nur bei Bedarf die Datenmenge verringern würde, die beim Laden der Seite übertragen wird.

Klicken Sie auf Nicht verwendetes JavaScript reduzieren , um die JavaScript-Dateien anzuzeigen, die den am häufigsten verwendeten Code enthalten:

Die gemeldeten JavaScript-Dateien stammen aus der www.bing.com Domäne, was bedeutet, dass der nicht verwendete Code von der auf der Webseite verwendeten Bing-Kartenkomponente stammt. Scrollen Sie auf der Website der Reisedemo von Margie nach unten, um die Karte anzuzeigen:

Verwenden Sie das Abdeckungstool , um die Menge des nicht verwendeten Codes zu bestätigen und möglicherweise andere Ressourcen zu finden, die nicht verwendet werden:

1. Drücken Sie in DevTools STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen, mit der Eingabe Coveragezu beginnen, und wählen Sie dann Abdeckung anzeigen in der Liste aus.

   

2. Klicken Sie im Abdeckungstool auf Instrumentierungsabdeckung starten, und aktualisieren Sie die Seite (). Das Abdeckungstool bietet eine Übersicht darüber, wie viel JavaScript- und CSS-Code, der auf der Seite geladen wurde, tatsächlich ausgeführt wurde.

   

Der Abdeckungsbericht bestätigt, dass die Bing-Kartenabhängigkeiten Code enthalten, der beim Laden der Seite nicht verwendet wird. Die Karte auf der Demowebsite ist beim ersten Laden der Seite nicht sichtbar. Es gibt eine gute Möglichkeit, die Leistung zu verbessern, indem die Bing-Karte nur dann geladen wird, wenn dieser Abschnitt der Seite für Benutzer sichtbar wird.

Verwenden Sie die Intersection Observer-API, um zu erkennen, wann die Zuordnung für den Benutzer sichtbar wird. Die Intersection Observer-API bietet eine Möglichkeit, Änderungen an der Schnittmenge eines Zielelements (in diesem Fall die Karte) mit dem Viewport der Webseite zu beobachten. Weitere Informationen finden Sie unter Schnittmengenbeobachter-API bei MDN.

1. Öffnen Sie in Visual Studio Code die /travel-site/index.html Datei, und scrollen Sie nach unten bis zum Ende der Datei. Die Bing-Karten-API wird mit einem <script> Tag geladen:

   

   Unterhalb dieser Zeile befindet sich eine weitere Zeile, die für die Konfiguration und das Laden der Karte an der richtigen Stelle zuständig ist: <script src="assets/map.js"></script>

2. Löschen Sie diese beiden Zeilen, und fügen Sie stattdessen diese neue Zeile hinzu: <script src="assets/map-on-demand.js"></script>.

   

3. Öffnen Sie die /travel-site/assets/map-on-demand.js Datei in Visual Studio Code, und lesen Sie den Code durch, um zu verstehen, wie die Bing-Kartenkomponente geladen und initialisiert wird. Hier ist ein Codeausschnitt aus diesem Code zusammen mit einer Beschreibung der Funktionsweise:

   const MAP_CONTAINER_EL = document.querySelector('.place-discover-map');
   
   const mapElIntersectionObserver = new IntersectionObserver(loadMapOnDemand);
   mapElIntersectionObserver.observe(MAP_CONTAINER_EL);
   
   let map = null;
   
   function loadMapOnDemand(entries) {
      if (map) {
        return;
      }
   
      if (!entries.some(entry => entry.isIntersecting)) {
        return;
      }
   
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=Ap_eazGgpq5468v9MXr7Wu0zh30LQActgaT-tI_QxZQSm-Bd5qJxVKs_2B7NsqR4';
      document.body.appendChild(script);
   }
   
   function GetMap() { /* ... */ }
   

   Der Code initialisiert die mapElIntersectionObserver Variable mit einem neuen IntersectionObserver -Objekt. Dieser Beobachter beginnt dann mit der Beobachtung des MAP_CONTAINER_EL Elements, das das Element auf der Seite ist, die die Karte enthalten soll.

   Während der Benutzer scrollt, wird die Rückruffunktion des Beobachters loadMapOnDemand ausgeführt. Diese Funktion führt keine Aktionen aus, wenn die Zuordnung bereits vorhanden ist oder wenn das Kartencontainerelement den aktuellen Viewport nicht überschneidet.

   Wenn der Benutzer zu einem Punkt scrollt, an dem das Kartencontainerelement im Viewport sichtbar wird, und wenn die Karte noch nicht initialisiert wurde, erstellt der Code ein neues script Element, legt sein src Attribut auf die Bing-Karten-API fest und fügt die script in die Seite ein.

   Der Rest der map-on-demand.js Datei ist identisch mit der map.js Datei. Sobald die Bing-Karten-API geladen wird, wird die GetMap Funktion ausgeführt. GetMap konfiguriert und zeigt die Zuordnung im Containerelement an.

4. Speichern Sie Ihre Änderungen in Visual Studio Code, aktualisieren Sie dann die Webseite in Microsoft Edge, und führen Sie eine neue Überwachung im Lighthouse-Tool aus, um zu sehen, wie sich Ihre Änderungen auf die Ladeleistung auswirken:

   

   Ihr Lighthouse-Score liegt jetzt bei 31, was eine Verbesserung gegenüber früher ist, aber es gibt noch mehr Dinge zu optimieren.

Beseitigen von Renderblockierungsressourcen

Die nächste Gelegenheit, die im Abschnitt Verkaufschancen des Lighthouse-Tools angezeigt wird, bezieht sich auf die Beseitigung von Render-blockierenden Ressourcen.

Eine Renderblockierungsressource ist eine externe JavaScript- oder CSS-Datei, die der Browser herunterladen, analysieren und ausführen muss, bevor die Seite angezeigt wird. Je mehr Render-blockierende Ressourcen verarbeitet werden müssen, wenn eine Webseite geladen wird, desto länger benötigt die Webseite, um im Browser angezeigt zu werden. Versuchen Sie, nur den css- und JavaScript-Kerncode auszuführen, der erforderlich ist, um den Anfangszustand der Seite ordnungsgemäß anzuzeigen.

Die erste Aufgabe besteht dann darin, Code zu finden, den Sie beim Laden der Seite nicht ausführen müssen.

1. Klicken Sie auf Render blockierende Ressourcen entfernen , um die blockierenden Ressourcen anzuzeigen:

   

   Lighthouse zeigt eine Liste der Stylesheets an, die von der Demowebseite verwendet werden, z. B.: base.css, home.cssund map.css.

2. Öffnen Sie das Abdeckungstool erneut: Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), geben Sie Coverage ein, und wählen Sie dann Abdeckung anzeigen aus.

3. Klicken Sie auf Instrumentierungsabdeckung starten, und aktualisieren Sie die Seite (), um den Abdeckungsbericht anzuzeigen, und geben Sie css dann im Feld URL-Filter ein, um nur die CSS-Dateien anzuzeigen:

   

   Der Bericht zeigt, dass die contact-form.css Dateien und gallery.css überhaupt nicht verwendet werden. Beide weisen 100 % nicht verwendete Bytes auf.

4. Klicken Sie im Bericht auf die contact-form.css Datei. DevTools öffnet die Datei im Quellentool . Wenn eine Codezeile ausgeführt wurde, wird daneben ein blauer Balken angezeigt. Ein roter Balken bedeutet, dass die Codezeile nicht ausgeführt wurde und beim Laden der Webseite definitiv nicht benötigt wird.

   

   In dieser Quelldatei werden nur rote Balken angezeigt, was bedeutet, dass die Webseite diese Datei überhaupt nicht benötigt.

Entfernen Sie nun die Verweise auf diese Dateien aus dem Code:

1. Öffnen Sie die /travel-site/index.html Datei in Visual Studio Code.

2. Suchen Sie am Anfang der Datei die Liste der <link> Tags, die die Stylesheets auf der Seite laden.

3. Löschen Sie die beiden Codezeilen, die die contact-form.css Dateien und gallery.css laden:

   

4. Speichern Sie Ihre Änderungen in Visual Studio Code, aktualisieren Sie dann die Webseite in Microsoft Edge, und führen Sie erneut eine neue Überwachung im Lighthouse-Tool aus, um zu sehen, wie sich Ihre Änderungen auf die Ladeleistung auswirken.

Nicht kritisches CSS automatisch entfernen

Im vorherigen Schritt hat sich Ihre Punktzahl leicht verbessert, aber Lighthouse kennzeichnet weiterhin andere CSS-Dateien, die das anfängliche Rendern der Seite blockieren.

Die Webseite verwendet die verbleibenden CSS-Dateien, sodass Sie sie nicht entfernen können. Es ist jedoch möglich, sie in zwei Gruppen aufzuteilen:

• Kritischer CSS-Code, der das Rendern der Webseite blockieren muss, da er sich visuell auf den Stil und das Layout des Teils der Webseite auswirkt, der Benutzern beim Laden angezeigt wird.

  Der Titel auf der Webseite verwendet beispielsweise die header h1 CSS-Regel in der /travel-site/assets/base.css Datei.

• Nicht kritischer CSS-Code, der zum Rendern von Teilen der Seite verwendet wird, die beim Laden der Seite nicht sichtbar sind.

  Die Datei wird beispielsweise nur benötigt, /travel-site/assets/desktop.css wenn der Viewport größer als 665pxist.

Um Ihren CSS-Code auf diese Weise automatisch aufzuteilen, können Sie das Tool Kritisch verwenden. Weitere Informationen finden Sie im Repository kritischer Projekte.

Anschließend können Sie Ihren nicht kritischen CSS-Code so laden, dass das anfängliche Rendern der Seite nicht blockiert wird. Weitere Informationen finden Sie unter Zurückstellen von nicht kritischem CSS auf web.dev.

Es ist auch gut, Ihren CSS-Code zu minimieren und nicht benötigte Leerzeichen und Kommentare zu entfernen. Weitere Informationen finden Sie unter Minify CSS unter web.dev.

Reduzieren Sie die Layoutverschiebung, indem Sie explizite Breite und Höhe für Bilder festlegen.

In Ihrem Lighthouse-Bericht schlägt der Abschnitt Diagnose vor, explizite width und height für Bildelemente zu definieren. Klicken Sie auf Bildelemente weisen keine explizite Breite und Höhe auf, um weitere Informationen anzuzeigen:

Der Bericht besagt, dass das Bild oben auf der Webseite keine expliziten width Attribute und aufweist height , was zu Layoutverschiebungen führen kann.

Layoutverschiebungen treten auf, wenn Teile einer Webseite anfänglich an einer Stelle angezeigt werden, dann aber während des Ladens der Seite an eine andere Position verschoben werden. Wenn beispielsweise ein Bild geladen wird, weiß der Browser nicht, wie viel Speicherplatz dafür reserviert werden soll, bis das Bild vollständig geladen ist.

Führen Sie eine der folgenden Schritte aus, um Layoutverschiebungen zu verhindern, die durch das Laden von Bildern auf einer Webseite verursacht werden:

• Definieren Sie die Attribute und height jedes Bilds width im HTML-Code.
• Reservieren Sie den Platz in CSS mithilfe der CSS-Eigenschaft aspect-ratio .

Weitere Informationen finden Sie unter Bilder ohne Dimensionen unter Optimieren der kumulativen Layoutverschiebung bei web.dev.

In den folgenden Schritten verwenden Sie die aspect-ratio CSS-Eigenschaft, um Layoutverschiebungen zu vermeiden:

1. Öffnen Sie in Visual Studio Code die /travel-site/assets/home.css Datei, und suchen Sie dann nach der CSS-Regel, die über den .hero-image img Selektor verfügt.

2. Ändern Sie die CSS-Regel so, dass sie wie folgt aussieht:

   .hero-image img {
     width: calc(100% + 2 * var(--main-margin));
     position: relative;
     left: calc(-1 * var(--main-margin));
     aspect-ratio: 1.5;
     object-fit: cover;
   }
   

   Vor dieser Änderung enthielt die CSS-Regel bereits eine width Eigenschaft, sodass der Browser wusste, wie viel horizontaler Platz für das Bild reserviert werden sollte. Durch Hinzufügen der aspect-ratio -Eigenschaft teilen Sie dem Browser außerdem mit, wie viel vertikaler Platz reserviert werden soll. Durch Hinzufügen der object-fit -Eigenschaft vermeiden Sie eine Verzerrung des Bilds, wenn seine CSS-Abmessungen nicht mit den Tatsächlichen Abmessungen der Bilddatei übereinstimmen.

3. Öffnen Sie die /travel-site/assets/desktop.css Datei, und suchen Sie dann nach der CSS-Regel, die über denselben .hero-image img Selektor verfügt.

   Die desktop.css Datei wird nur verwendet, wenn der Viewport größer als 665pxist, wenn die Webseite auf einem großen Bildschirm angezeigt wird, z. B. bei Verwendung auf einem Laptopcomputer.

4. Ändern Sie die CSS-Regel so, dass sie wie folgt aussieht:

   .hero-image img {
       width: 100%;
       position: static;
       aspect-ratio: 2.5;
       object-fit: cover;
   }
   

   Dieses Mal wurde für die CSS-Regel bereits und widthobject-fit definiert. Anstatt jedoch eine max-height für das Bild zu definieren, verwenden Sie die aspect-ratio -Eigenschaft, um sicherzustellen, dass der Browser genau weiß, wie viel Platz für das Bild auf Desktopgeräten reserviert werden muss.

5. Speichern Sie Ihre Änderungen in Visual Studio Code, aktualisieren Sie dann die Webseite in Microsoft Edge, und führen Sie eine neue Überwachung im Lighthouse-Tool aus, um zu sehen, wie sich Ihre Änderungen auf die Ladeleistung auswirken:

   Ihr Ergebnis ist jetzt bis zu 37, aber noch wichtiger ist, dass die Kumulative Layoutverschiebung auf 0 (0) fällt, was darauf hinweist, dass das Layout beim Laden der Seite nicht mehr verschoben wird.

   

Weniger Arbeit im Standard Thread ausführen

Ihr neuester Bericht zeigt hohe Metrikwerte für die Zeit bis zur interaktiven Zeit und die Gesamtblockierungszeit an. Dies bedeutet, dass auf der Webseite noch etwas vorhanden ist, dessen Ausführung sehr lange dauert und verhindert, dass die Seite mehrere Sekunden lang verwendet werden kann.

Scrollen Sie nach unten zum Abschnitt Diagnose, der zu Minimieren Standard Threadarbeit und Reduzieren der JavaScript-Ausführungszeit steht. Der Standard Thread ist der Ort, an dem der Browser die meisten Aufgaben ausführt, die zum Anzeigen einer Seite erforderlich sind, z. B.:

• Analysieren und Ausführen von HTML.
• Analysieren und Anwenden von CSS auf DOM-Elemente.
• Ausführen von JavaScript.

In diesem Fall sieht es so aus, als ob der größte Engpass darin besteht, dass die Seite beim Laden der Seite zu viel JavaScript-Code ausführt.

Verwenden Sie das Leistungstool, um zu analysieren, welche Arbeit der Standard Thread ausführt, während die Seite geladen wird, und nach Möglichkeiten zu suchen, unnötige Arbeit zu verzögern oder zu entfernen:

1. Öffnen Sie das Leistungstool .

2. Klicken Sie im Leistungstool auf Profilerstellung starten, und laden Sie die Seite erneut () und dann auf Beenden , sobald die Seite vollständig geladen wurde.

   DevTools zeigt eine Visualisierung aller Aufgaben an, die der Browser zum Laden der Seite ausgeführt hat. Diese Visualisierung wird als Ablaufverfolgung bezeichnet:

   

Die Ablaufverfolgung zeigt die Aktivität chronologisch von links nach rechts an. Die CPU- und NET-Diagramme oben geben Ihnen einen Überblick über CPU- und Netzwerkaktivitäten. Der hellbraune Bereich im CPU-Diagramm entspricht einem Zeitraum, in dem der Browser mit Skriptaktivitäten beschäftigt war. Dieser Bereich ist ein Hinweis darauf, dass Sie das Laden der Seite möglicherweise beschleunigen können, indem Sie weniger JavaScript-Arbeit ausführen.

Untersuchen Sie die Ablaufverfolgung, um Möglichkeiten zu finden, weniger JavaScript-Arbeit zu erledigen.

Der Hauptabschnitt zeigt ein chronologisches Protokoll Standard Threadaktivität von links nach rechts. Die y-Achse (von oben nach unten) zeigt, warum Ereignisse aufgetreten sind.

In der folgenden Abbildung verbringt der Browser beispielsweise die meiste Zeit mit einem Parse-HTML-Ereignis . Solange dieses Ereignis ausgeführt wird, wird die Webseite nicht vollständig angezeigt. Dieses Ereignis hat ein langes Evaluate Script-Ereignis verursacht, das entspricht, wenn der Browser JavaScript-Code ausführt. Das Evaluate Script-Ereignis hat dazu geführt, dass eine (anonymous) Funktion ausgeführt wurde, wodurch die initRatings Funktion ausgeführt wurde:

Optimieren Sie die initRatings Funktion, um das Laden der Seite zu beschleunigen:

1. Öffnen Sie in Visual Studio Code die /travel-site/assets/rating.js Datei, und lesen Sie den Code durch.

   Der Code in dieser Datei ist dafür verantwortlich, fünf Kundenbewertungen auf der Webseite anzuzeigen. Jede Rezension hat eine Bewertung, die aus mehreren Sternen, einem Zitat und einem Autor besteht. Diese Überprüfungen stammen von einer serverseitigen API, die in der getRatings Funktion verwendet wird. Die initRatings Funktion erstellt DOM-Elemente auf der Seite für jede Überprüfung.

2. Suchen Sie in der initRatings -Funktion nach einer Möglichkeit, den JavaScript-Code schneller zu gestalten.

   Diese Webseite ist nur eine Demo, und eine for Schleife wurde eingeführt, um den Code zu verlangsamen. In der Praxis gibt es viele Möglichkeiten für eine JavaScript-Datei wie diese, um langsame Seitenladevorgänge zu verursachen, z. B.:

   • Zu häufiger Zugriff auf das DOM.
   • Ausführen von umfangreichen Berechnungstasks.
   • Verwenden großer JavaScript-Bibliotheken oder -Frameworks.

3. Löschen Sie die for Schleife am Anfang der initRatings Funktion, speichern Sie ihre Änderungen, und laden Sie die Seite in Microsoft Edge neu.

4. Führen Sie eine neue Überwachung im Lighthouse-Tool aus, um zu sehen, wie sich Ihre Änderungen auf die Ladeleistung auswirken:

   

   • Ihre Punktzahl stieg auf 92.
   • Die Metrik "Zeit bis interaktive Zeit" ist auf 1,3 Sekunden verringert.
   • Die Metrik Total Blocking Time (Gesamtblockierzeit) wurde auf 0 Sekunden verringert.

Weitere Informationen zum Analysieren der Seitenleistung finden Sie unter Referenz zu Leistungsfeatures).

Weniger Arbeit im Standard Thread in der realen Welt

Das Leistungstool ist die gängigste Methode, um zu verstehen, welche Aktivität Ihre Webseite beim Laden ausführt, und um Möglichkeiten zu finden, unnötige Aktivitäten zu entfernen.

Wenn Sie einen Ansatz bevorzugen, der eher wie console.log()aussieht, können Sie mit der Benutzersteuerungs-API bestimmte Phasen ihres App-Lebenszyklus willkürlich markieren, um die Dauer der einzelnen Phasen nachzuverfolgen.

Webseiten werden häufig langsam geladen, wenn sie JavaScript zum Generieren der meisten Ihrer Benutzeroberflächen verwenden. Um die Leistung Ihrer Webseite zu verbessern, sollten Sie den Code, der die Benutzeroberfläche Ihrer Webseite erstellt, auf die Serverseite verschieben und diesen Code als HTML und CSS an den Browser übermitteln.

Zusammenfassung

• Wenn Sie die Ladeleistung eines Standorts optimieren möchten, beginnen Sie immer mit einer Überwachung. Die Überwachung erstellt eine Baseline und gibt Ihnen Tipps zur Verbesserung.
• Nehmen Sie jeweils eine Änderung vor, und überwachen Sie die Webseite nach jeder Änderung, um anzuzeigen, wie sich diese isolierte Änderung auf die Leistung auswirkt.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.