Web-Performance

Web-Performance umfasst die objektiven Messungen und die wahrgenommene Benutzererfahrung von Lade- und Laufzeit. Web-Performance beschreibt, wie lange eine Website zum Laden, zum interaktiv und reaktionsfähig werden benötigt, und wie flüssig der Inhalt während der Benutzerinteraktionen ist. Performance umfasst Fragen wie: Ist das Scrollen flüssig? Sind die Schaltflächen reaktionsschnell? Laden Pop-ups schnell und animieren sie flüssig? Die objektiven Messungen beinhalten die Ladezeit, Bilder pro Sekunde und die Zeit, um interaktiv zu werden, während die subjektive Erfahrung beschreibt, wie lange es sich anfühlt, dass Inhalte laden.

Je länger es dauert, bis eine Seite reagiert, desto mehr Benutzer werden die Seite verlassen. Es ist wichtig, 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 gemacht wird, während die restlichen Teile der Erfahrung asynchron geladen werden.

Es gibt Tools, APIs und Best Practices, die uns helfen, die Web-Performance zu messen und zu verbessern. Diese werden auf den folgenden Seiten behandelt.

Web-Performance-Leitfäden

Die Leitfäden zur Performance sind Ressourcen, die beschreiben, wie Browser funktionieren, was die Performance beeinflusst und wie man Performance in verschiedenen Aspekten Ihrer Anwendung messen, optimieren und überwachen kann.

Performance-Grundlagen: Performance bedeutet Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument allgemein, was Performance ist, wie die Browserplattform bei der Verbesserung hilft und welche Tools und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.
Die Seite befüllen: wie Browser funktionieren: Benutzer wünschen sich Web-Erfahrungen, die schnell laden und reibungslos zu interagieren sind. Deshalb sollte ein Entwickler danach streben, diese beiden Ziele zu erreichen. Um die Performance und die wahrgenommene Performance zu verbessern, ist es hilfreich, zu verstehen, wie der Browser funktioniert.
Latenz verstehen: Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zum Ziel zu reisen. Bei der Performance-Optimierung ist es wichtig, Ursachen für Latenz zu reduzieren und die Site-Performance unter Nachahmung hoher Latenz zu testen, um für Benutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.
Empfohlene Web-Performance-Timings: Wie lang ist zu lang?: Es gibt keine klaren Regeln dafür, was ein langsames Tempo beim Laden von Seiten ausmacht, aber es gibt spezifische Richtlinien für die Anzeige, dass Inhalte laden (1 Sekunde), Leerlauf (50ms), Animation (16,7ms) und die Reaktion auf Benutzereingaben (50 bis 200ms).
Verwendung von dns-prefetch: DNS-prefetch ist ein Versuch, Domain-Namen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine Datei sein, die später geladen wird, oder ein Linkziel, dem ein Benutzer zu folgen versucht.
Navigations- und Ressourcentimings: Navigationstiming sind Metriken, die die Dokumentnavigationsereignisse eines Browsers messen. Ressourcentimings sind detaillierte Netzwerkzeitmessungen in Bezug auf das Laden von Ressourcen einer Anwendung. Beides bietet dieselben schreibgeschützten Eigenschaften, aber das Navigationstiming misst die Timings des Hauptdokuments, während das Ressourcentiming die Zeiten für alle von diesem Hauptdokument aufgerufenen Assets oder Ressourcen und deren angeforderte Ressourcen bereitstellt.
Startzeit-Performance optimieren: Die Verbesserung der Startzeit-Performance ist oft eine der wertvollsten Performance-Optimierungen, die durchgeführt werden können. Eine gute Benutzererfahrung schließt ein, sicherzustellen, dass Ihre App schnell lädt. Dieser Artikel bietet Performance-Tipps und Vorschläge sowohl für das Schreiben neuer Anwendungen als auch für das Portieren von Anwendungen aus anderen Plattformen ins Web.
Kritischer Pfad der Darstellung: Der Kritische Pfad der Darstellung ist die Abfolge von Schritten, die der Browser durchläuft, um HTML, CSS und JavaScript in Pixel auf dem Bildschirm umzuwandeln. Die Optimierung des kritischen Darstellungspfads verbessert die Renderleistung. Der kritische Darstellungspfad 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 Darstellungspfads zu verkürzen, was zu reduzierten Seitenladezeiten führt.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abruf, Abruf von Ressourcen oder Rendern von Dokumenten) bevor die zugehörigen Seiten tatsächlich besucht werden, auszuführen, basierend auf Vorhersagen, welche Seiten der Benutzer als nächstes wahrscheinlich besucht.
Performance-Budgets: Ein Performance-Budget ist ein Limit zur Vermeidung von Regressionen. Es kann auf eine Datei, einen Dateityp, alle auf einer Seite geladene Dateien, eine spezifische Metrik (z.B. Time to Interactive), eine benutzerdefinierte Metrik (z.B. Zeit bis zum Hero-Element) oder einen Schwellenwert über einen Zeitraum angewendet werden.
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 Performance und haben Vorteile, gute Anwendungsfälle und Nachteile. RUM eignet sich im Allgemeinen am besten, um langfristige Trends zu verstehen, während sich synthetisches Monitoring sehr gut für Regressionstests und die Minderung kurzfristiger Performance-Probleme während der Entwicklung eignet. In diesem Artikel definieren und vergleichen wir diese beiden Performance-Monitoring-Ansätze.
CSS- und JavaScript-Animationsperformance: Animationen sind entscheidend für ein angenehmes Benutzererlebnis in vielen Anwendungen. Es gibt viele Möglichkeiten, Webanimationen zu implementieren, wie etwa CSS Transitionen/Animationen oder JavaScript-basierte Animationen (unter Verwendung von requestAnimationFrame()). In diesem Artikel analysieren wir die Performance-Unterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Animationsperformance und Bildrate: Animationen im Web können über SVG, JavaScript, einschließlich <canvas>, WebGL, CSS animation und <video>, animierte GIFs und sogar animierte PNGs und andere Bildtypen erfolgen. Die Performancekosten bei der Animation einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und die Animation teurer CSS-Eigenschaften kann zu Jank führen, da der Browser Schwierigkeiten hat, eine flüssige Bildrate zu erreichen.

Tutorials für Anfänger

Der MDN Web-Performance-Lernbereich enthält moderne, aktuelle Tutorials, die die Grundlagen der Performance abdecken. Beginnen Sie hier, wenn Sie neu in der Performance sind:

Web-Performance: kurze Übersicht: Eine Übersicht über den Lernpfad zur Web-Performance. Beginnen Sie Ihre Reise hier.
Was ist Web-Performance?: Dieser Artikel beginnt das Modul mit einem guten Einblick in das, was Performance tatsächlich ist — hierzu gehören die Tools, Metriken, APIs, Netzwerke und Personengruppen, die in Betracht gezogen werden müssen, wenn man über Performance nachdenkt, und wie man Performance in den Workflow der Webentwicklung einbinden kann.
Wie nehmen Benutzer die Performance wahr?: Wichtiger als die Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Benutzer Ihre Website wahrnehmen. Diese Wahrnehmungen werden durch die tatsächliche Ladezeit, Leerlauf, Reaktionsfähigkeit auf Benutzerinteraktionen und die Flüssigkeit des Scrollings und anderer Animationen beeinflusst. In diesem Artikel diskutieren wir die verschiedenen Lade-, Animations- und Reaktionsmetriken sowie Best Practices zur Verbesserung der Benutzerwahrnehmung, wenn nicht der tatsächlichen Zeiten.
Grundlagen der Web-Performance: Zusätzlich zu den Frontend-Komponenten wie HTML, CSS, JavaScript und Mediendateien gibt es Funktionen, die Anwendungen langsamer machen können, und Funktionen, die Anwendungen subjektiv und objektiv schneller machen können. Es gibt viele APIs, Entwickler-Tools, Best Practices und schlechte Praktiken in Bezug auf Web-Performance. Hier werden wir viele dieser Funktionen auf grundlegender Ebene vorstellen und Verweise zu tieferen Einblicken bereitstellen, um die Performance für jedes Thema zu verbessern.
HTML-Performance-Funktionen: Einige Attribute und die Quellanordnung Ihres Markups können die Performance Ihrer Website beeinflussen. Durch die Minimierung der Anzahl der DOM-Knoten und die Sicherstellung, dass die beste Ordnung und die besten Attribute für das Einfügen von Inhalten wie Stilen, Skripten, Medien und Drittanbieter-Skripten verwendet werden, können Sie das Benutzererlebnis drastisch verbessern. Dieser Artikel untersucht im Detail, wie HTML verwendet werden kann, um maximale Performance zu gewährleisten.
Multimedia: Bilder und Video: Das einfachste Optimierungspotenzial der Web-Performance ist oft die Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte jedes User-Agents bereitzustellen. Zusätzliche Tipps wie das Entfernen von Audiotracks aus Hintergrundvideos können die Performance noch weiter verbessern. In diesem Artikel diskutieren wir die Auswirkungen, die Video-, Audio- und Bildinhalte auf die Performance haben, und die Methoden, um sicherzustellen, dass diese Auswirkungen so gering wie möglich sind.
CSS-Performance-Funktionen: CSS mag ein weniger wichtiger Fokus für die Optimierung der Performance sein, aber es gibt einige CSS-Funktionen, die die Performance stärker beeinflussen als andere. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die sich auf die Performance auswirken, und schlagen Möglichkeiten vor, mit Stilen umzugehen, um sicherzustellen, dass die Performance nicht negativ beeinträchtigt wird.
Best Practices für JavaScript-Performance: JavaScript, wenn es richtig verwendet wird, kann interaktive und immersive Web-Erfahrungen ermöglichen — oder es kann die Download-Zeit, Renderzeit, In-App-Performance, Akkulaufzeit und Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige bewährte JavaScript-Verfahren, die in Betracht gezogen werden sollten, um sicherzustellen, dass auch komplexe Inhalte so performant wie möglich sind.

Performance-APIs

Die Performance API ist eine Gruppe von Standards zur Messung der Performance von Webanwendungen. Die folgenden Seiten bieten Übersichten über die Performance-APIs, einschließlich Informationen über ihre Verwendung:

Hochpräzises Timing: Die Performance API erlaubt hochpräzise Messungen, die auf Zeit in potenzieller Sub-Millisekunden-Auflösung und einer stabilen monotopen Uhr basieren, die nicht durch Systemuhr-Abweichungen oder Anpassungen betroffen ist. Die hochauflösenden Timer sind für genaues Benchmarking erforderlich, anstelle der weniger präzisen und nicht monotonen Date-Zeitstempel.
Timing langer Animationsframes: Lange Animationsframes (LoAFs) können die Benutzererfahrung einer Webseite beeinträchtigen. Sie können langsame Benutzeroberflächen-Updates (UI) verursachen, was zu scheinbar nicht reagierenden Steuerelementen und ruckelnden (oder nicht flüssigen) animierten Effekten und Scrollen führt, was zu Benutzerfrustration führt. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über lange Animationsframes zu erhalten und deren Ursachen besser zu verstehen. Dieser Artikel zeigt, wie die Long Animation Frames API verwendet wird.
Überwachen der bfcache-Blockierungsgründe: Die Eigenschaft PerformanceNavigationTiming.notRestoredReasons berichtet 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 Aktualisierungen benötigen, um bfcache-kompatibel zu werden, was die Website-Performance verbessern kann.
Navigationstiming: Navigationstiming bietet Metriken, die mit der Navigation von einer Seite zu einer anderen über die PerformanceNavigationTiming API verbunden sind. Zum Beispiel können Sie bestimmen, wie viel Zeit es dauert, ein Dokument zu laden oder zu entladen, oder die Zeit bis zur Fertigstellung der DOM-Konstruktion und mögliche Interaktion mit dem DOM protokollieren.
Performance-Daten: Die Performance API bietet keine Performance-Datenanalyse oder Visualisierungen. Sie ist jedoch gut in Entwickler-Tools integriert, und ihre Daten werden häufig an Analyseendpunkte und -bibliotheken gesendet, um Performance-Metriken aufzuzeichnen, die helfen, die Daten zu evaluieren, um Performance-Engpässe zu identifizieren, die Ihre Benutzer betreffen. Diese Seite bietet einen Überblick darüber, welche Arten von Performance-API-Daten vorhanden sind, wie sie gesammelt werden und wie auf sie zugegriffen werden kann.
Ressourcen-Timing-API: Resource Timing ermöglicht das Abrufen und Analysieren detaillierter Netzwerkzeitdaten für das Laden der Ressourcen einer Anwendung. Eine Anwendung kann die Timing-Metriken nutzen, um beispielsweise die Zeit zu bestimmen, die zum Laden einer bestimmten Ressource (wie einem Bild oder Skript) erforderlich ist, sei es implizit als Teil des Seitenladevorgangs oder explizit aus JavaScript, beispielsweise unter Verwendung der fetch() API.
Server-Timing: Server-Timing erlaubt es Servern, Metriken über den Anfrage-Antwort-Zyklus an den User-Agent zu kommunizieren. Sie können diese Informationen sammeln und auf serverseitige Metriken auf dieselbe Weise reagieren wie auf alle anderen Metriken, die mit der Performance-API verarbeitet werden.
User-Timing-API: Erstellen Sie anwendungsspezifische Zeitstempel mit den "mark"- und "measure"-Eintragstypen der User Timing API unter Verwendung der Hochpräzisions-Zeitstempel, die Teil der Performance-Zeitleiste des Browsers sind.

Profiling und Tools

Firefox Profiler Performance Features: Diese Website bietet Informationen zur Nutzung und zum Verständnis der Performance-Funktionen in Ihren Entwickler-Tools, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.
Profiling mit dem eingebauten Profiler: Lernen Sie, wie Sie die Performance von Apps mit dem eingebauten Profiler von Firefox profilieren.

Referenzen

HTML

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

CSS

will-change

JavaScript

HTTP

Content-Encoding
Ressourcenhinweise via dns-prefetch, preconnect, prefetch, und Prerender
HTTP/2
Client-Hinweise

Siehe auch

HTML-Leitfaden für Responsive Bilder
Web Workers API, einschließlich Verwendung von Service Workers und Verwendung von Web Workers
Offline- und Hintergrundbetrieb
Caching
Client-Hinweise
Glossarbegriffe:
Performance in den Firefox Developer Tools