Web-Performance

Web-Performance bezieht sich auf die objektiven Messungen und die wahrgenommene Benutzererfahrung hinsichtlich Ladezeit und Laufzeit. Web-Performance beschreibt, wie lange eine Website benötigt, um zu laden, interaktiv und reaktionsfähig zu werden, und wie flüssig der Inhalt während der Benutzerinteraktionen ist. Performance-Fragen beinhalten: Ist das Scrollen flüssig? Reagieren die Schaltflächen schnell? Laden Pop-ups schnell und animieren flüssig? Zu den objektiven Messungen gehören die Ladezeit, Bilder pro Sekunde und die Zeit bis zur Interaktivität, während die subjektive Erfahrung beschreibt, wie lange es sich anfühlt, bis der Inhalt geladen ist.

Je länger eine Seite benötigt, um zu reagieren, 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 durch eine möglichst verfügbare und interaktive Erfahrung zu verbergen, 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. Diese behandeln wir auf den folgenden Seiten.

Web-Performance-Leitfäden

Performance-Grundlagen: Performance bedeutet Effizienz. Im Kontext von Open-Web-Apps erklärt dieses Dokument im Allgemeinen, was Performance ist, wie die Browserplattform dazu beiträgt, sie zu verbessern, und welche Tools und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.
Seitenaufbau: wie Browser funktionieren: Benutzer möchten Web-Erfahrungen mit schnell ladendem Inhalt und flüssiger Interaktion. Daher sollte ein Entwickler diese beiden Ziele anstreben. Um zu verstehen, wie man die Performance und die wahrgenommene Performance verbessern kann, ist es hilfreich zu wissen, wie der Browser funktioniert.
Verständnis der Latenz: Latenz ist die Zeit, die ein Datenpaket benötigt, um vom Quell- zum Zielsystem zu reisen. Im Hinblick auf die Performance-Optimierung ist es wichtig, Maßnahmen zur Reduzierung der Ursachen von Latenz zu ergreifen und die Performance der Website zu testen, indem man hohe Latenz simuliert, um für Benutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.
Empfohlene Web-Performance-Zeiten: Wie lange ist zu lang?: Es gibt keine klaren Regeln, was ein langsames Laden von Seiten konstituiert, aber es gibt spezifische Richtlinien, um anzuzeigen, dass Inhalte laden (1 Sekunde), Leerlaufen (50ms), Animieren (16.7ms) und auf Benutzereingaben reagieren (50 bis 200ms).
Verwendung von dns-prefetch: DNS-prefetch ist ein 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 Ressourcetimings: Navigations-Timings sind Metriken, die Ereignisse der Dokumentennavigation eines Browsers messen. Ressourcetimings sind detaillierte Netzwerktimings, die das Laden von Anwendungsressourcen betreffen. Beide bieten die gleichen schreibgeschützten Eigenschaften, aber das Navigationstiming misst die Zeiten des Hauptdokuments, während das Ressourcetiming die Zeiten für alle Ressourcen liefert, die von diesem Hauptdokument und den angeforderten Ressourcen dieser Ressourcen aufgerufen werden.
Optimierung der Start-Performance: Die Verbesserung Ihrer Start-Performance ist oft eine der wertvollsten Performance-Optimierungen, die vorgenommen werden kann. Eine gute Benutzererfahrung beinhaltet sicherzustellen, dass Ihre App schnell lädt. Dieser Artikel bietet Performance-Tipps und Anregungen für das Schreiben neuer Anwendungen und das Portieren von Anwendungen auf das Web von anderen Plattformen.
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-Pfades verbessert die Render-Performance. 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-Pfades zu verkürzen, was zu reduzierten Seitenladezeiten führt.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abruf, Abrufen von Ressourcen oder 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 Rückschritte zu verhindern. Es kann für eine Datei, einen Dateityp, alle auf einer Seite geladenen Dateien, eine spezielle Metrik (z.B. Time to Interactive), eine benutzerdefinierte Metrik (z.B. Time to Hero Element) oder ein Schwellenwert über einen bestimmten Zeitraum angewendet werden.
Performance-Monitoring: RUM vs. synthetisches Monitoring: Synthetisches Monitoring und Real User Monitoring (RUM) sind zwei Ansätze zur Überwachung und Gewährleistung von Einblicken in die Web-Performance. RUM und synthetisches Monitoring bieten verschiedene Perspektiven auf die Performance und haben Vorteile, gute Anwendungsfälle und Nachteile. RUM eignet sich im Allgemeinen am besten zum Verständnis von Langzeittrends, während synthetisches Monitoring für Regressionstests und die Minderung kurzfristiger Performance-Probleme während der Entwicklung sehr geeignet ist. In diesem Artikel definieren und vergleichen wir diese beiden Ansätze zur Performance-Überwachung.
CSS- und JavaScript-Animations-Performance: Animationen sind entscheidend für eine angenehme Benutzererfahrung in vielen Anwendungen. Es gibt viele Möglichkeiten, Webanimationen zu implementieren, wie z.B. CSS Übergänge/Animationen oder JavaScript-basierte Animationen (mithilfe von requestAnimationFrame()). In diesem Artikel analysieren wir die Performance-Unterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Animations-Performance und Bildrate: Animationen im Web können über SVG, JavaScript, einschließlich <canvas> und WebGL, CSS animation, <video>, animierte GIFs und sogar animierte PNGs und andere Bildtypen erfolgen. Die Performance-Kosten der Animation einer CSS-Eigenschaft können je nach Eigenschaft variieren, und das Animieren teurer CSS-Eigenschaften kann zu Ruckeln führen, da der Browser Schwierigkeiten hat, eine flüssige Bildrate zu erreichen.

Tutorials für Anfänger

Der MDN Web Performance Learning Bereich enthält moderne, aktualisierte Tutorials, die die wesentlichen Grundlagen der Performance abdecken. Starten Sie hier, wenn Sie neu in der Performance sind:

Web-Performance: kurze Übersicht: Überblick über den Lernpfad zur Web-Performance. Starten Sie Ihre Reise hier.
Was ist Web-Performance?: Dieser Artikel startet das Modul mit einem guten Blick darauf, was Performance tatsächlich ist — dies umfasst die Tools, Metriken, APIs, Netzwerke und Personengruppen, die wir berücksichtigen müssen, wenn wir über Performance nachdenken, und wie wir Performance in unseren Webentwicklungs-Workflow integrieren können.
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 von der tatsächlichen Seitenladezeit, dem Leerlauf, der Reaktionsfähigkeit auf Benutzereingaben und der Flüssigkeit des Scrollens und anderer Animationen beeinflusst. In diesem Artikel besprechen wir die verschiedenen Lade-, Animations- und Reaktionsmetriken sowie Best Practices zur Verbesserung der Benutzerwahrnehmung, wenn nicht sogar der tatsächlichen Zeiten.
Grundlagen der Web-Performance: Zusätzlich zu den Front-End-Komponenten von HTML, CSS, JavaScript und Mediendateien gibt es Funktionen, die Anwendungen langsamer machen können, und solche, die sie subjektiv und objektiv schneller machen. Es gibt viele APIs, Entwickler-Tools, Best Practices und schlechte Praktiken im Zusammenhang mit Web-Performance. Hier führen wir viele dieser Funktionen auf grundlegender Ebene ein und bieten Links zu tiefergehenden Erkundungen, um die Performance zu jedem Thema zu verbessern.
HTML-Performance-Funktionen: Einige Attribute und die Quellreihenfolge Ihres Markups können die Leistung Ihrer Website beeinflussen. Durch Minimierung der Anzahl der DOM-Knoten, Sicherstellung der besten Reihenfolge und Attribute für die Einbindung von Inhalten wie Stilen, Skripten, Medien und Drittanbieter-Skripten, können Sie das Benutzererlebnis erheblich verbessern. Dieser Artikel betrachtet im Detail, wie HTML verwendet werden kann, um maximale Performance sicherzustellen.
Multimedia: Bilder und Videos: Die leichtesten Veränderungen bei der Web-Performance sind oft Medienoptimierungen. Es ist möglich, verschiedene Mediendateien basierend auf der Fähigkeit, Größe und Pixeldichte jedes Benutzergeräts bereitzustellen. Zusätzliche Tipps wie das Entfernen von Audiotracks aus Hintergrundvideos können die Leistung weiter verbessern. In diesem Artikel diskutieren wir den Einfluss von Video-, Audio- und Bildinhalten auf die Performance und die Methoden, um sicherzustellen, dass dieser Einfluss so gering wie möglich ist.
CSS-Performance-Funktionen: CSS mag weniger im Fokus der Optimierung für verbesserte Leistung stehen, aber es gibt einige CSS-Funktionen, die die Performance stärker beeinflussen als andere. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die die Leistung beeinflussen, und schlagen Möglichkeiten vor, den Umgang mit Stilen zu optimieren, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.
JavaScript Performance Best Practices: JavaScript kann, wenn es richtig verwendet wird, interaktive und eindrucksvolle Web-Erlebnisse ermöglichen — oder es kann die Downloadzeit, die Renderzeit, die In-App-Performance, die Batterielebensdauer und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige Best Practices im Umgang mit JavaScript, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so performant wie möglich sind.

Performance-APIs

Die Performance API ist eine Gruppe von Standards zur Messung der Leistung von Webanwendungen. Die folgenden Seiten bieten Übersichten zu den Performance-APIs einschließlich Informationen zur Nutzung:

Hochpräzise Zeitmessung: Die Performance API ermöglicht hochpräzise Messungen, die auf Zeit in potenzieller Submillisekundenauflösung und einer stabilen monotonen Uhr basieren, die weder durch Systemuhrenverzerrungen noch durch Anpassungen beeinflusst wird. Die hochauflösenden Timer sind für genaue Benchmarks notwendig, anstatt die ungenaueren und nicht monotonen Date-Zeitstempel zu verwenden.
Lange Animationsrahmen-Timings: Lange Animationsrahmen (LoAFs) können die Benutzererfahrung einer Website beeinträchtigen. Sie können langsame Benutzerschnittstellenaktualisierungen verursachen, was zu scheinbar nicht reagierenden Steuerelementen und ruckelnden (oder nicht flüssigen) animierten Effekten und Bildläufen führt, wodurch Frustration bei den Benutzern entsteht. Die Long Animation Frames API ermöglicht Entwicklern, Informationen über die langen Animationsrahmen zu erhalten und deren Ursachen besser zu verstehen. Dieser Artikel zeigt, wie die Long Animation Frames API genutzt werden kann.
Überwachung der Bfcache-Blockierungsgründe: Die PerformanceNavigationTiming.notRestoredReasons-Eigenschaft meldet Informationen darüber, warum das aktuelle Dokument beim Navigieren nicht im bfcache verwendet werden konnte. Entwickler können diese Informationen nutzen, um Seiten zu identifizieren, die aktualisiert werden müssen, um mit dem bfcache kompatibel zu sein und so die Performance der Seite zu verbessern.
Navigationstiming: Navigation Timing bietet Metriken, die mit dem Wechsel von einer Seite zu einer anderen über die PerformanceNavigationTiming API verbunden sind. Beispielsweise kann man bestimmen, wie viel Zeit das Laden oder Entladen eines Dokuments benötigt oder die Zeit bis zur Fertigstellung der DOM-Konstruktion und das mögliche Interagieren mit dem DOM protokollieren.
Performance-Daten: Die Performance API bietet keine Datenanalyse oder Visualisierungen zur Performance. Sie ist jedoch gut in Entwickler-Tools integriert und ihre Daten werden häufig an Analyse-Endpunkte und Bibliotheken gesendet, um Performance-Metriken aufzuzeichnen, die Ihnen helfen, die Daten zu evaluieren und Performance-Engpässe zu identifizieren, die Ihre Benutzer betreffen. Diese Seite bietet einen Überblick darüber, welche Performance-API-Daten existieren, wie sie gesammelt und aufgerufen werden können.
Resource Timing API: Die Resource Timing API ermöglicht das Abrufen und Analysieren detaillierter Netzwerktimings für das Laden von Anwendungsressourcen. Eine Anwendung kann die Timing-Metriken verwenden, um beispielsweise die Zeit zu bestimmen, die benötigt wird, um eine bestimmte Ressource (wie ein Bild oder ein Skript) entweder implizit als Teil des Seitenladevorgangs oder explizit aus JavaScript heraus zu laden, beispielsweise mit der fetch() API.
Server Timing: Die Server-Timing API ermöglicht es Servern, Metriken über den Anfragereaktionszyklus an das Benutzergerät zu kommunizieren. Sie können diese Informationen sammeln und serverseitige Metriken auf dieselbe Weise auswerten wie alle anderen Metriken, die mit der Performance API verarbeitet werden.
User Timing API: Erstellen Sie anwendungsspezifische Zeitstempel mithilfe der "mark" und "measure" Eintragstypen der User Timing API, die Teil der Zeitachse der Browser-Performance sind, unter Verwendung von hochpräzisen Zeitstempeln.

Profilierung und Werkzeugnutzung

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

Referenzen

HTML

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

CSS

will-change

JavaScript

HTTP

Content-encoding
Ressourcentipps über dns-prefetch, preconnect, prefetch und prerender
HTTP/2
Client Hints

Siehe auch

Responsive Images HTML-Leitfaden
Web Workers API, einschließlich Verwendung von Service Workers und Verwendung von Web Workers
Offline- und Hintergrundbetrieb
Caching
Client Hints
Glossarbegriffe:
Performance in den Firefox-Entwicklerwerkzeugen