Web-Performance

Web-Performance sind die objektiven Messungen und die wahrgenommene Benutzererfahrung von Ladezeit und Laufzeit. Web-Performance beschreibt, wie lange eine Website benötigt, um zu laden, interaktiv und reaktionsschnell zu werden, und wie flüssig der Inhalt während der Benutzerinteraktionen ist. Leistungsfragen beinhalten Aspekte wie: Ist das Scrollen flüssig? Sind Buttons reaktionsschnell? Laden Pop-ups schnell und animieren sie flüssig? Zu den objektiven Messungen gehören die Ladezeit, Bilder pro Sekunde und die Zeit, bis die Interaktivität erreicht wird, während die subjektive Erfahrung beschreibt, wie lange es sich anfühlt, bis der Inhalt geladen ist.

Je länger es dauert, bis eine Seite reagiert, desto mehr Benutzer werden die Seite verlassen. Es ist wichtig, die Lade- und Reaktionszeiten zu minimieren und zusätzliche Funktionen hinzuzufügen, um die Latenz zu verbergen, indem die Erfahrung so schnell wie möglich verfügbar und interaktiv gestaltet wird, während die längeren Teile der Erfahrung asynchron geladen werden.

Es gibt Tools, APIs und Best Practices, die uns helfen, die Web-Performance zu messen und zu verbessern. Wir behandeln diese auf den folgenden Seiten.

Leitfäden zur Web-Performance

Die Performance-Leitfäden sind Ressourcen, die beschreiben, wie Browser funktionieren, was die Leistung beeinflusst und wie man die Leistung in verschiedenen Aspekten Ihrer Anwendung misst, optimiert und überwacht.

Grundlagen der Performance: Leistung steht für Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument im Allgemeinen, was Leistung ist, wie die Browserplattform hilft, sie zu verbessern und welche Tools und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.
Seiteninhalte laden: Wie Browser funktionieren: Benutzer wünschen sich Web-Erlebnisse mit Inhalten, die schnell geladen werden und mit denen sie flüssig interagieren können. Daher sollte ein Entwickler diese beiden Ziele anstreben. Um zu verstehen, wie man die Leistung und die wahrgenommene Leistung verbessert, hilft es zu verstehen, wie der Browser funktioniert.
Latenz verstehen: Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zum Ziel zu gelangen. Im Hinblick auf die Leistungsoptimierung ist es wichtig, die Ursachen der Latenz zu reduzieren und die Leistung der Seite zu testen, indem man hohe Latenz simuliert, um sie für Benutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.
Empfohlene Web-Performance-Timings: Wie lange ist zu lang?: Es gibt keine klaren Regeln dafür, was als langsames Tempo beim Laden von Seiten gilt, aber es gibt spezifische Richtlinien dafür, dass Inhalte in (1 Sekunde) laden, untätig (50 ms), animierend (16,7 ms) und auf Benutzereingaben reagieren (50 bis 200 ms).
Verwendung von dns-prefetch: DNS-prefetch ist ein Versuch, Domainnamen zu lösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, das ein Benutzer zu folgen versucht.
Navigations- und Ressourcentimings: Navigationstiming sind Metriken, die die Navigationsereignisse eines Dokuments im Browser messen. Ressourcentimings sind detaillierte Netzwerkzeitmessungen bezüglich des Ladens von Anwendungsressourcen. Beide enthalten dieselben nur lesbaren Eigenschaften, aber Navigationstiming misst die Zeiten des Hauptdokuments, während das Ressourcentiming die Zeiten für alle Ressourcen oder Ressourcen misst, die durch dieses Hauptdokument und die angeforderten Ressourcen geladen wurden.
Optimierung der Startleistung: Die Verbesserung Ihrer Startleistung ist oft eine der wertvollsten Leistungsoptimierungen, die vorgenommen werden kann. Eine gute Benutzererfahrung beinhaltet sicherzustellen, dass Ihre App schnell geladen wird. Dieser Artikel bietet Performance-Tipps und Vorschläge sowohl für das Schreiben neuer Anwendungen als auch für das Portieren von Anwendungen von anderen Plattformen ins Web.
Kritischer Rendering-Pfad: Der kritische Rendering-Pfad ist die Abfolge von Schritten, die der Browser durchläuft, um das HTML, CSS und JavaScript in Pixel auf dem Bildschirm zu konvertieren. Die Optimierung des kritischen Rendering-Pfads verbessert die Renderleistung. Der kritische Rendering-Pfad umfasst das Document Object Model (DOM), CSS Object Model (CSSOM), Renderbaum und Layout.
Lazy Loading: Lazy Loading ist eine Strategie, Ressourcen als nicht blockierend (nicht kritisch) zu identifizieren und diese nur bei Bedarf zu laden. Es ist eine Methode, um die Länge des kritischen Rendering-Pfads zu verkürzen, was zu kürzeren Seitenladezeiten führt.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Lookups, das Laden von Ressourcen oder das Rendern von Dokumenten) auszuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen, welche Seiten der Benutzer am wahrscheinlichsten als nächstes besucht.
Performance Budgets: Ein Performance-Budget ist eine Grenze, um Rückschritte zu verhindern. Es kann für eine Datei, einen Dateityp, alle Dateien, die auf einer Seite geladen werden, eine spezifische Metrik (z. B. Time to Interactive), eine benutzerdefinierte Metrik (z. B. Zeit bis zum Hero-Element) oder einen Schwellenwert über einen Zeitraum gelten.
Performance-Monitoring: RUM vs. synthetisches Monitoring: Synthetisches Monitoring und Real User Monitoring (RUM) sind zwei Ansätze zur Überwachung und Bereitstellung von Einblicken in die Web-Performance. RUM und synthetisches Monitoring bieten unterschiedliche Blickwinkel auf die Leistung und haben Vorzüge, gute Anwendungsfälle und Nachteile. RUM eignet sich im Allgemeinen am besten, um langfristige Trends zu verstehen, während synthetisches Monitoring sehr gut für Regressionstests und die Milderung kurzfristiger Leistungsprobleme während der Entwicklung geeignet ist. In diesem Artikel definieren und vergleichen wir diese beiden Ansätze des Performance-Monitorings.
CSS- und JavaScript-Animationsleistung: Animationen sind entscheidend für eine angenehme Benutzererfahrung in vielen Anwendungen. Es gibt viele Möglichkeiten, Web-Animationen zu implementieren, wie CSS transitions/animations oder JavaScript-basierte Animationen (unter Verwendung von requestAnimationFrame()). In diesem Artikel analysieren wir die Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Animationsleistung und Bildfrequenz: Animation im Web kann über SVG, JavaScript, einschließlich <canvas> und WebGL, CSS animation, <video>, animierte GIFs und sogar animierte PNGs und andere Bildtypen erfolgen. Die Leistungskosten zur Animation einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und die Animation aufwendiger CSS-Eigenschaften kann zu Ruckeln führen, da der Browser Probleme hat, eine flüssige Bildrate zu erreichen.

Tutorials für Anfänger

Der MDN Web-Performance-Lernbereich enthält moderne, aktuelle Tutorials zu Performance-Grundlagen. Beginnen Sie hier, wenn Sie neu im Thema Performance sind:

Das "Warum" der Web-Performance: Dieser Artikel diskutiert, warum Web-Performance wichtig für Zugänglichkeit, Benutzererfahrung und Ihre Geschäftsziele ist.
Was ist Web-Performance?: Sie wissen, dass Web-Performance wichtig ist, aber welche Faktoren beeinflussen die Web-Performance und wie wird sie gemessen? Dieser Artikel führt die Komponenten der Performance ein, vom Laden und Rendern von Webseiten, einschließlich der Art und Weise, wie Ihre Inhalte in den Browser Ihrer Nutzer gelangen, um angezeigt zu werden, bis hin zu den Gruppen von Menschen, die wir bei der Betrachtung der Performance berücksichtigen müssen.
Wie nehmen Benutzer die Performance wahr?: Wichtiger als wie schnell Ihre Website in Millisekunden ist, ist, wie schnell Ihre Benutzer Ihre Seite wahrnehmen. Diese Wahrnehmungen werden durch die tatsächliche Seitenladezeit, Untätigkeit, Reaktionsfähigkeit auf Benutzereingaben und die Flüssigkeit von Scrolling und anderen Animationen beeinflusst. In diesem Artikel diskutieren wir die verschiedenen Lade-Metriken, Animations- und Reaktionsfähigkeitsmetriken sowie Best Practices, um die Benutzerwahrnehmung zu verbessern, wenn nicht sogar die tatsächlichen Zeiten.
Leistungsmessung: Nachdem Sie nun einige Leistungsmetriken verstanden haben, gehen wir tiefer auf Leistungswerkzeuge, Metriken und APIs ein und wie wir die Leistung zum Teil des Web-Entwicklungs-Workflows machen können.
Multimedia: Bilder: Der niedrig hängende Früchte im Bereich Web-Performance ist oft die Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf der Kapazität, Größe und Pixeldichte jedes Benutzeragenten bereitzustellen. In diesem Artikel diskutieren wir den Einfluss von Bildern auf die Performance und die Methoden, um die Anzahl der pro Bild gesendeten Bytes zu reduzieren.
Multimedia: Video: Der niedrig hängende Früchte im Bereich Web-Performance ist oft die Medienoptimierung. In diesem Artikel diskutieren wir den Einfluss von Videoinhalten auf die Performance und geben Tipps, wie das Entfernen von Audiotracks aus Hintergrundvideos die Performance verbessern kann.
JavaScript-Performance-Optimierung: JavaScript kann, richtig eingesetzt, interaktive und immersive Web-Erfahrungen ermöglichen – oder es kann die Download-Zeit, die Renderzeit, die In-App-Leistung, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel umreißt einige JavaScript-Best-Practices, die in Betracht gezogen werden sollten, um sicherzustellen, dass auch komplexe Inhalte so performant wie möglich sind.
HTML-Performance-Optimierung: Einige Attribute und die Quellreihenfolge Ihres Markups können die Performance Ihrer Website beeinflussen. Indem die Anzahl der DOM-Knoten minimiert wird und sichergestellt wird, dass die beste Reihenfolge und Attribute verwendet werden, um Inhalte wie Stile, Skripte, Medien und Drittanbieter-Skripte einzubinden, können Sie die Benutzererfahrung drastisch verbessern. Dieser Artikel betrachtet im Detail, wie HTML verwendet werden kann, um maximale Leistung sicherzustellen.
CSS-Performance-Optimierung: CSS mag ein weniger wichtiger Optimierungsfokus für verbesserte Leistung sein, aber es gibt einige CSS-Eigenschaften, die die Leistung mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die die Leistung beeinflussen, und vorgeschlagene Methoden zur Handhabung von Stilen, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.
Der geschäftliche Nutzen der Web-Performance: Es gibt viele Dinge, die ein Entwickler tun kann, um die Leistung zu verbessern, aber wie schnell ist schnell genug? Wie können Sie Entscheidungsträger von der Wichtigkeit dieser Bemühungen überzeugen? Einmal optimiert, wie können Sie sicherstellen, dass keine Aufblähung zurückkehrt? In diesem Artikel betrachten wir das Überzeugen des Managements, die Entwicklung einer Leistungskultur und eines Leistungsbudgets und führen Wege ein, um sicherzustellen, dass Rückschritte nicht in Ihren Code-Bestand schleichen.
Web-Performance-Best-Practices und -Tipps: Dieser Artikel behandelt mehrere Themen auf einfachem Niveau und bietet Links zu tiefergehenden Analysen, um die Leistung für jedes Thema zu verbessern. Zusätzlich zu Front-End-Themen wie HTML, CSS, JavaScript und Mediendateien werden auch APIs, Entwicklertools, Best Practices und schlechte Praktiken im Hinblick auf Web-Performance behandelt.

Performance-APIs

Die Performance API ist eine Gruppe von Standards, die zur Messung der Leistung von Webanwendungen verwendet werden. Die folgenden Seiten bieten Übersichten über die Performance-APIs inklusive Informationen zur Verwendung:

Hochpräzise Zeitmessung: Die Performance API ermöglicht hochpräzise Messungen, die auf Sub-Millisekunden-Auflösung und einer stabilen, monotonen Uhr basieren, die nicht durch Systemuhrabweichungen oder -anpassungen beeinflusst wird. Die hochauflösenden Timer werden für präzises Benchmarking benötigt anstatt der weniger präzisen und nicht-monotonen Date-Zeitstempel.
Zeitmessung für lange Animationsrahmen: Lange Animationsrahmen (LoAFs) können die Benutzererfahrung einer Website beeinträchtigen. Sie können zu langsamen Benutzeroberflächen- (UI-) Aktualisierungen führen und scheinbar unresponsive Steuerelemente sowie ruckelnde (oder nicht flüssige) Animationseffekte und Scrollen verursachen, was zu Benutzerfrustration führen kann. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über lange Animationsrahmen zu erhalten und ihre Ursachen besser zu verstehen. Dieser Artikel zeigt, wie man die Long Animation Frames API verwendet.
Überwachen der bfcache-Blockierungsgründe: Die PerformanceNavigationTiming.notRestoredReasons-Eigenschaft liefert Informationen darüber, warum das aktuelle Dokument daran gehindert wurde, den bfcache bei der Navigation zu nutzen. Entwickler können diese Informationen verwenden, um Seiten zu identifizieren, die aktualisiert werden müssen, um bfcache-kompatibel zu sein und so die Leistung der Seite zu verbessern.
Navigationstiming: Navigationstiming bietet Metriken, die mit dem Navigieren von einer Seite zur anderen über die PerformanceNavigationTiming API verbunden sind. Zum Beispiel können Sie feststellen, wie lange es dauert, ein Dokument zu laden oder zu entladen oder die Zeit protokollieren, die vergangen ist, bis die DOM-Konstruktion abgeschlossen ist und eine Interaktion mit dem DOM möglich ist.
Performance-Daten: Die Performance API liefert keine Leistungsdatenanalysen oder Visualisierungen. Sie ist jedoch gut in Entwicklertools integriert und ihre Daten werden häufig an Analyseendpunkte und Bibliotheken gesendet, um Leistungsmetriken aufzuzeichnen, die Ihnen helfen, die Daten zu bewerten, um Leistungsengpässe zu identifizieren, die Ihre Benutzer betreffen. Diese Seite gibt einen Überblick darüber, welche Arten von Performance-API-Daten existieren, wie sie gesammelt werden und wie sie abgerufen werden können.
Resource Timing API: Resource Timing ermöglicht das Abrufen und Analysieren detaillierter Netzwerkzeitdaten für das Laden der Ressourcen einer Anwendung. Eine Anwendung kann die Zeitmetriken verwenden, um z. B. die Dauer zu bestimmen, die erforderlich ist, um eine bestimmte Ressource zu laden (wie ein Bild oder ein Skript), entweder implizit als Teil des Seitenladens oder explizit aus JavaScript, beispielsweise unter Verwendung der fetch() API.
Server-Timing: Server-Timing ermöglicht es Servern, Metriken über den Anforderungs-Antwort-Zyklus an den Benutzeragenten zu kommunizieren. Sie können diese Informationen sammeln und serverseitige Metriken auf die gleiche Weise verarbeiten wie alle anderen mit der Performance API verarbeiteten Metriken.
User Timing API: Erstellen Sie anwendungsspezifische Zeitstempel mit den "mark"- und "measure"-Eintragstypen der User Timing API unter Verwendung von hochpräzisen Zeitstempeln, die Teil der Leistungstimeline des Browsers sind.

Profiling und Werkzeuge

Firefox Profiler Performance Features: Diese Website bietet Informationen darüber, wie man die Leistungsmerkmale in Ihren Entwicklertools nutzt und versteht, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.
Profiling mit dem eingebauten Profiler: Erfahren Sie, wie Sie die Leistung Ihrer App mit dem integrierten Profiler von Firefox analysieren.

Referenzen

HTML

<picture> Element
<video> Element
<source> Element
<img> Attribute (wie srcset) für responsive Bilder
rel="preload" Attribut zum Vorladen von Inhalten über HTML

CSS

will-change

JavaScript

HTTP

Content-Encoding
Ressourcenhinweise über dns-prefetch, preconnect, prefetch und prerender
HTTP/2
Client Hints

Siehe auch

Responsive Images HTML-Leitfaden
Web Workers API, einschließlich Using Service Workers und Using Web Workers
Offline- und Hintergrundbetrieb
Caching
Client Hints
Glossarbegriffe:
Performance in Firefox Developer Tools

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden