Web-Performance

Web-Performance sind die objektiven Messungen und die wahrgenommene Benutzererfahrung von Ladezeit und Laufzeit. Web-Performance beschreibt, wie lange eine Seite zum Laden benötigt, bis sie interaktiv und reaktionsfähig wird und wie reibungslos der Inhalt während der Benutzerinteraktionen ist. Leistungsfragen umfassen: Ist das Scrollen flüssig? Reagieren die Schaltflächen? Laden Pop-ups schnell und animiert flüssig? Die objektiven Messungen umfassen die Ladezeit, Bilder pro Sekunde und die Zeit, um interaktiv zu werden, und die subjektive Erfahrung bedeutet, wie lange es sich anfühlt, bis der Inhalt geladen ist.

Je länger eine Seite zum Reagieren benötigt, desto mehr Nutzer werden die Seite verlassen. Es ist wichtig, die Lade- und Antwortzeiten 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 gemacht wird, während asynchron die länger dauernden Teile der Erfahrung geladen werden.

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

Web-Performance-Leitfäden

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

Leistungsgrundlagen: Leistung bedeutet Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument im Allgemeinen, was Leistung ist, wie die Browser-Plattform hilft, sie zu verbessern, und welche Werkzeuge und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.
Seitenfüllen: wie Browser arbeiten: Nutzer wollen Web-Erfahrungen mit Inhalten, die schnell laden und sich flüssig bedienen lassen. Daher sollte ein Entwickler danach streben, diese beiden Ziele zu erreichen. Um zu verstehen, wie man die Leistung und die wahrgenommene Leistung verbessern kann, hilft es, zu verstehen, wie der Browser funktioniert.
Latenz verstehen: Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zu einem Ziel zu gelangen. Im Hinblick auf die Leistungsoptimierung ist es wichtig, Ursachen der Latenz zu reduzieren und die Seitenleistung unter der Simulation hoher Latenz zu testen, um für Nutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.
Empfohlene Web-Performance-Zeiten: Wie lange ist zu lange?: Es gibt keine klaren Regeln dafür, was als langsame Geschwindigkeit beim Laden von Seiten gilt, aber es gibt spezifische Richtlinien, um anzuzeigen, dass Inhalte geladen werden (1 Sekunde), im Leerlauf (50 ms), animierend (16,7 ms) und auf Benutzereingaben reagieren (50 bis 200 ms).
DNS-Prefetch verwenden: DNS-prefetch ist der Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, dem ein Benutzer zu folgen versucht.
Navigations- und Ressourcenzeiten: Navigationstiming sind Messwerte, die Navigationsereignisse eines Browsers dokumentieren. Ressourcentiming sind detaillierte Netzwerkzeit-Messungen bezüglich des Ladens von Anwendungsressourcen. Beide bieten dieselben nur-lesbaren Eigenschaften, aber Navigationstiming misst die Zeiten des Hauptdokuments, während das Ressourcentiming die Zeiten aller vom Hauptdokument aufgerufenen Ressourcen und deren angeforderten Ressourcen bereitstellt.
Startleistungsoptimierung: Die Verbesserung der Startleistung ist oft eine der wertvollsten Leistungsoptimierungen, die vorgenommen werden können. Eine gute Benutzererfahrung umfasst die Gewährleistung, dass Ihre App schnell geladen wird. Dieser Artikel bietet Leistungstipps 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 umzuwandeln. Die Optimierung des kritischen Rendering-Pfads verbessert die Rendering-Leistung. Der kritische Rendering-Pfad umfasst das Document Object Model (DOM), das CSS Object Model (CSSOM), den Renderbaum und das Layout.
Lazy Loading: Lazy Loading ist eine Strategie, um Ressourcen als nicht blockierend (nicht kritisch) zu identifizieren und diese nur bei Bedarf zu laden. Es ist eine Möglichkeit, die Länge des kritischen Rendering-Pfads zu verkürzen, was zu reduzierten Seitenladezeiten führt.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abfragen, das Abrufen von Ressourcen oder das Rendern von Dokumenten) durchzuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen, welche Seiten der Benutzer als nächstes höchstwahrscheinlich besuchen wird.
Performance-Budgets: Ein Performance-Budget ist ein Limit, um Regressionen zu verhindern. Es kann für eine Datei, einen Dateityp, alle auf einer Seite geladenen Dateien, eine spezifische Metrik (z. B. Time to Interactive), eine benutzerdefinierte Metrik (z. B. Time to Hero Element) oder ein 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 Ansichten der Leistung und haben Vorteile sowie gute Einsatzmöglichkeiten und Mängel. RUM eignet sich im Allgemeinen besser zum Verständnis von langfristigen Trends, während synthetisches Monitoring sehr gut für Regressionstests und die Minderung kurzfristiger Leistungsprobleme während der Entwicklung geeignet ist. In diesem Artikel definieren und vergleichen wir diese zwei Ansätze zur Leistungsüberwachung.
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 zum Beispiel CSS transitions/animations oder JavaScript-basierte Animationen (mittels requestAnimationFrame()). In diesem Artikel analysieren wir die Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Animationsleistung und Bildrate: Animation im Web kann über SVG, JavaScript, inklusive <canvas> und WebGL, CSS animation, <video>, animierte GIFs und sogar animierte PNGs und andere Bildtypen erfolgen. Die Leistungskosten der Animation einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und das Animieren teurer CSS-Eigenschaften kann zu Jank führen, da der Browser Schwierigkeiten hat, eine glatte Bildrate zu erreichen.

Anleitungen für Anfänger

Der MDN-Bereich Lernbereich für Web-Performance enthält moderne, aktuelle Tutorials, die die grundlegenden Aspekte der Performance abdecken. Beginnen Sie hier, wenn Sie neu im Thema Performance sind:

Das "Warum" der Web-Performance: Dieser Artikel behandelt, warum Web-Performance wichtig für die Zugänglichkeit, Benutzererfahrung und Ihre geschäftlichen Ziele 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 in die Komponenten der Performance ein, von der Lade- und Rendering-Zeit der Webseite, einschließlich wie Ihr Inhalt in den Browser der Benutzer gelangt, um betrachtet zu werden, bis hin zu den Gruppen von Menschen, die wir in Betrach ziehen müssen, wenn wir über Performance nachdenken.
Wie nehmen Benutzer die Leistung wahr?: Wichtiger als die Geschwindigkeit Ihrer Webseite in Millisekunden ist, wie schnell Ihre Benutzer Ihre Webseite wahrnehmen. Diese Wahrnehmungen werden von der tatsächlichen Ladezeit der Seite, Leerlauf, Reaktionsfähigkeit auf Benutzerinteraktionen und der Geschmeidigkeit von Scrollen und anderen Animationen beeinflusst. In diesem Artikel diskutieren wir die verschiedenen Lademetriken, Animations- und Reaktionsmetriken sowie Best Practices, um die Benutzerwahrnehmung zu verbessern, wenn nicht sogar die tatsächlichen Zeitmessungen.
Leistung messen: Nachdem Sie nun ein paar Leistungsmetriken verstanden haben, tauchen wir tiefer in Leistungstools, Metriken und APIs ein und wie wir Performance zum Teil des Webentwicklungs-Workflows machen können.
Multimedia: Bilder: Die einfachsten Früchte der Web-Performance sind oft die Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte des Benutzergeräts zu bedienen. In diesem Artikel diskutieren wir den Einfluss von Bildern auf die Leistung und die Methoden, um die Anzahl der pro Bild gesendeten Bytes zu reduzieren.
Multimedia: Video: Die einfachsten Früchte der Web-Performance sind oft die Medienoptimierung. In diesem Artikel diskutieren wir den Einfluss von Videoinhalten auf die Leistung und geben Tipps, wie das Entfernen von Audiotracks aus Hintergrundvideos die Leistung verbessern kann.
JavaScript-Leistungsoptimierung: JavaScript kann, wenn es richtig verwendet wird, interaktive und immersive Web-Erfahrungen ermöglichen – oder es kann die Downloadzeit, Renderzeit, In-App-Leistung, Batterielebensdauer und Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige JavaScript-Best Practices, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so performant wie möglich sind.
HTML-Leistungsoptimierung: Einige Attribute und die Quellreihenfolge Ihres Markups können die Leistung Ihrer Website beeinflussen. Durch Minimierung der Anzahl von DOM-Knoten, Sicherstellung der besten Reihenfolge und Attribute für das Einbinden von Inhalten wie Stilen, Skripten, Medien und Drittanbieter-Skripten, können Sie die Benutzererfahrung drastisch verbessern. Dieser Artikel untersucht im Detail, wie HTML verwendet werden kann, um maximale Leistung sicherzustellen.
CSS-Leistungsoptimierung: CSS kann ein weniger wichtiger Fokus für Leistungsverbesserungen sein, aber es gibt einige CSS-Features, die die Leistung mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die die Leistung beeinflussen und schlagen Wege vor, wie Stile gehandhabt werden sollten, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.
Der geschäftliche Nutzen von 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 Entscheidungsbefugte von der Bedeutung dieser Maßnahmen überzeugen? Einmal optimiert, wie können Sie sicherstellen, dass die Entwicklungsüberlastung nicht zurückkehrt? In diesem Artikel betrachten wir das Überzeugen des Managements, die Entwicklung einer Leistungskultur und eines Leistungsbudgets und führen Möglichkeiten ein, wie Regressionen nicht in Ihrem Code-Bestand eingeschlichen werden.
Web-Performance Best Practices & Tipps: Dieser Artikel behandelt mehrere Themen auf einem grundlegenden Niveau und bietet Links zu tiefer gehenden Themen, um die Leistung für jedes Thema zu verbessern. Neben Frontend-Themen wie HTML, CSS, JavaScript und Mediendateien werden auch APIs, Entwicklerwerkzeuge, Best Practices und schlechte Praktiken im Zusammenhang mit 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, einschließlich Informationen zur Verwendung:

Hochpräzise Zeitmessung: Die Performance-API ermöglicht hochpräzise Messungen, die auf Zeit in einer potenziellen Sub-Millisekundenauflösung basieren und eine stabile monotone Uhr, die nicht systembedingten Uhrverschiebungen oder Anpassungen unterliegt. Die hochauflösenden Timer sind für genaues Benchmarking erforderlich, anstelle der weniger präzisen und nicht-monotonen Date Zeitstempel.
Lange Animationszeit: Lange Animationsframes (LoAFs) können die Benutzererfahrung einer Website beeinträchtigen. Sie können langsame Benutzeroberflächen-Updates verursachen, was zu scheinbar unempfindlichen Steuerelementen und ruckeligen (oder nicht glatten) Animations- und Scroll-Effekten führt, was zu Benutzerfrustration führt. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über die langen Animationsframes zu erhalten und ihre Ursachen besser zu verstehen. Dieser Artikel zeigt, wie die Long Animation Frames API verwendet wird.
Überwachung von bfcache blockierenden Gründen: Die PerformanceNavigationTiming.notRestoredReasons Eigenschaft berichtet Informationen darüber, warum das aktuelle Dokument daran gehindert wurde, den bfcache bei der Navigation zu nutzen. Entwickler können diese Informationen nutzen, um Seiten zu identifizieren, die aktualisiert werden müssen, um sie bfcache-kompatibel zu machen, und so die Site-Performance zu verbessern.
Navigation Timing: Navigation Timing bietet Metriken im Zusammenhang mit der Navigation von einer Seite zur anderen über die PerformanceNavigationTiming API. Zum Beispiel können Sie bestimmen, wie viel Zeit das Laden oder Entladen eines Dokuments benötigt oder die Zeit loggen, die es dauerte, bis der DOM-Aufbau abgeschlossen ist und die Interaktion mit dem DOM möglich ist.
Leistungsdaten: Die Performance-API bietet keine Performance-Datenanalyse oder Visualisierungen. Sie ist jedoch gut in Entwicklerwerkzeuge integriert und ihre Daten werden oft zu Analyseendpunkten und Bibliotheken gesendet, um Leistungsmetriken zu speichern, die Ihnen helfen, die Daten auszuwerten, um Leistungsengpässe zu finden, die Ihre Nutzer beeinträchtigen. Diese Seite bietet einen Überblick über die vorhandenen Performance-API-Daten, wie sie gesammelt werden und wie sie zugänglich sind.
Resource Timing API: Resource Timing ermöglicht das Abrufen und Analysieren detaillierter Netzwerktiming-Daten für das Laden von Anwendungsressourcen. Eine Anwendung kann die Timing-Metriken verwenden, um zu bestimmen, wie lange es zum Beispiel dauert, eine bestimmte Ressource zu laden (wie ein Bild oder ein Skript), entweder implizit als Teil des Seitenladevorgangs oder explizit von JavaScript, zum Beispiel unter Verwendung der fetch() API.
Server Timing: Server-Timing erlaubt es Servern, Metriken über den Anfrage-Antwort-Zyklus an den Benutzeragenten zu kommunizieren. Sie können diese Informationen sammeln und Server-seitige Metriken auf dieselbe Weise verarbeiten wie alle anderen Metriken, die mit der Performance-API verarbeitet werden.
User Timing API: Erstellen Sie anwendungsspezifische Zeitmarken unter Verwendung der User Timing API's "Mark" und "Measure" Einträge mit hochpräzisen Zeitstempeln, die Teil der Performance-Zeitlinie des Browsers sind.

Profiling und Werkzeuge

Firefox Profiler Performance Funktionen: Diese Website bietet Informationen darüber, wie man die Leistungsfunktionen in Ihren Entwicklerwerkzeugen verwendet und versteht, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.
Profiling mit dem eingebauten Profiler: Lernen Sie, wie man die App-Leistung mit dem eingebauten Profiler von Firefox profiliert.

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
Ressourcentipps via dns-prefetch, preconnect, prefetch, und prerender
HTTP/2
Client Hints

Siehe auch

Responsive Bilder HTML-Leitfaden
Web Workers API, inklusive Verwendung von Service Workers und Verwendung von Web Workers
Offline- und Hintergrundbetrieb
Caching
Client hints
Glossarbegriffe:
Performance in den Firefox-Entwicklerwerkzeugen

Help improve MDN

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

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