Web-Performance

Web-Performance umfasst die objektiven Messungen und die wahrgenommene Benutzererfahrung in Bezug auf Ladezeit und Laufzeit. Web-Performance beschreibt, wie lange eine Website zum Laden, zur Interaktivität und zur Reaktionsfähigkeit benötigt und wie flüssig der Inhalt bei Benutzerinteraktionen ist. Zu den Performance-Fragen gehören: Ist das Scrollen flüssig? Reagieren Buttons schnell? Laden Pop-ups schnell und animieren flüssig? Die objektiven Messungen umfassen Ladezeit, Bilder pro Sekunde und die Zeit, um interaktiv zu werden, während die subjektive Erfahrung beinhaltet, 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, Lade- und Antwortzeiten zu minimieren und zusätzliche Funktionen hinzuzufügen, um die Latenz zu verbergen, indem das Erlebnis so schnell wie möglich verfügbar und interaktiv gemacht wird, während im Hintergrund die länger dauernden Teile des Erlebnisses 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.

Leitfäden zur Web-Performance

Performance-Grundlagen

Performance bedeutet Effizienz. In Bezug auf Open Web Apps erklärt dieses Dokument allgemein, was Leistung ist, wie die Browser-Plattform dabei hilft, sie zu verbessern, und welche Tools und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.

Seiteninhalt: wie Browser arbeiten

Nutzer wollen Web-Erlebnisse mit Inhalten, die schnell geladen werden und flüssig zu interagieren sind. Deshalb sollte ein Entwickler versuchen, diese beiden Ziele zu erreichen. Um zu verstehen, wie die Leistung und die wahrgenommene Leistung verbessert werden können, 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 reisen. Hinsichtlich der Performance-Optimierung ist es wichtig, die Ursachen der Latenz zu reduzieren und die Leistung der Website zu testen, indem eine hohe Latenz emuliert wird, um für Nutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.

Empfohlene Web-Performance-Zeiten: Wie lang ist zu lang?

Es gibt keine klaren Regeln, was ein langsames Tempo beim Laden von Seiten ausmacht, aber es gibt spezifische Richtlinien für die Anzeige, dass Inhalte geladen werden (1 Sekunde), Leerlauf (50ms), Animation (16,7ms) und die Reaktion auf Benutzereingaben (50 bis 200ms).

Verwendung von dns-prefetch

DNS-prefetch ist der 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 Ressource-Zeiten

Navigationszeiten sind Metriken, die die Dokument-Navigationsevents eines Browsers messen. Ressourcenzeiten sind detaillierte Netzwerkzeitmessungen zum Laden der Ressourcen einer Anwendung. Beide bieten die gleichen schreibgeschützten Eigenschaften, aber Navigationstiming misst die Zeiten des Hauptdokuments, während die Ressourcentiming die Zeiten für alle vom Hauptdokument aufgerufenen Assets oder Ressourcen und die angeforderten Ressourcen der Ressourcen bereitstellt.

Optimierung der Startleistung

Die Verbesserung Ihrer Startleistung ist oft eine der wertvollsten Performance-Optimierungen, die vorgenommen werden können. Eine gute Benutzererfahrung beinhaltet die Sicherstellung, dass Ihre App schnell geladen wird. Dieser Artikel bietet Leistungs-Tipps und Vorschläge sowohl für das Schreiben neuer Anwendungen als auch für das Portieren von Anwendungen auf das Web von anderen Plattformen.

Kritischer Renderpfad

Der kritische Renderpfad 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 Renderpfades verbessert die Renderleistung. Der kritische Renderpfad umfasst das Document Object Model (DOM), 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. Dies ist eine Möglichkeit, die Länge des kritischen Renderpfades zu verkürzen, was in reduzierten Seitenladezeiten resultiert.

Spekulatives Laden

Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abruf, Ressourcenabruf oder Dokument-Rendering) auszuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen darüber, welche Seiten der Benutzer als Nächstes besuchen wird.

Performance-Budgets

Ein Performance-Budget ist ein Limit, um Rückschritte zu verhindern. Es kann auf 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 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 Perspektiven der Leistung und haben Vorteile, gute Anwendungsfälle und Nachteile. RUM ist generell am besten geeignet, um langfristige Trends zu verstehen, während synthetisches Monitoring sehr gut für Regressionstests und die Minderung kurzfristiger Performance-Probleme während der Entwicklung geeignet ist. In diesem Artikel definieren und vergleichen wir diese beiden Ansätze zur Performance-Ü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 CSS transitions/animations oder JavaScript-basierte Animationen (mit requestAnimationFrame()). In diesem Artikel analysieren wir die Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.

Animationsleistung 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 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 Web Performance Learning Area enthält moderne, aktualisierte Tutorials, die die Performance-Grundlagen abdecken. Beginnen Sie hier, wenn Sie neu im Bereich Performance sind:

Web-Performance: kurze Übersicht

Überblick über den Lernpfad zur Web-Performance. Beginnen Sie Ihre Reise hier.

Was ist Web-Performance?

Dieser Artikel beginnt das Modul mit einem guten Blick darauf, was Performance tatsächlich ist — dies beinhaltet die Tools, Metriken, APIs, Netzwerke und Gruppen von Menschen, die wir in Betracht ziehen müssen, wenn wir über Performance nachdenken und wie wir die Performance in unseren Webentwicklungs-Workflow integrieren können.

Wie nehmen Benutzer Performance wahr?

Wichtiger als die Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Nutzer Ihre Website wahrnehmen. Diese Wahrnehmungen werden von der tatsächlichen Seitenladezeit, Leerlaufsituationen, Reaktionsfähigkeit auf Benutzerinteraktionen sowie der Flüssigkeit des Scrollens und anderer Animationen beeinflusst. In diesem Artikel diskutieren wir die verschiedenen Lade-, Animations- und Reaktionsmetrikken sowie Best Practices zur Verbesserung der Nutzerwahrnehmung, wenn nicht der tatsächlichen Zeiten.

Web-Performance-Grundlagen

Neben den Front-End-Komponenten von 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 die Web-Performance. Hier werden wir viele dieser Funktionen auf grundlegender Ebene einführen und Links zu tieferen Einblicken bieten, um die Performance für jedes Thema zu verbessern.

HTML-Performance-Funktionen

Einige Attribute und die Quellenreihenfolge Ihres Markups können die Leistung Ihrer Website beeinflussen. Indem Sie die Anzahl der DOM-Knoten minimieren und sicherstellen, dass die beste Reihenfolge und die besten Attribute verwendet werden, um Inhalte wie Styles, Skripte, Medien und Drittanbieter-Skripte einzuschließen, können Sie das Benutzererlebnis erheblich verbessern. Dieser Artikel untersucht im Detail, wie HTML verwendet werden kann, um maximale Leistung sicherzustellen.

Multimedia: Bilder und Video

Die am einfachsten zu optimierenden Medieninhalte bei der Web-Performance sind oft Medien. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten des Benutzers, der Größe und der Pixel-Dichte auszuliefern. Zusätzliche Tipps wie das Entfernen von Audiotracks aus Hintergrundvideos können die Leistung weiter verbessern. In diesem Artikel diskutieren wir die Auswirkungen von Video-, Audio- und Bildinhalten auf die Leistung und die Methoden, um sicherzustellen, dass die Auswirkungen so gering wie möglich sind.

CSS-Performance-Funktionen

CSS mag ein weniger wichtiger Fokus für die Leistungsoptimierung sein, aber einige CSS-Funktionen haben größeren Einfluss auf die Leistung als andere. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die sich auf die Leistung auswirken, und empfehlen Möglichkeiten zum Umgang mit Styles, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.

JavaScript-Performance-Best-Practices

JavaScript kann bei richtiger Verwendung interaktive und immersive Web-Erlebnisse ermöglichen — oder es kann die Download-Zeit, die Renderzeit, die in-App-Leistung, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte möglichst performant sind.

Performance-APIs

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

Hochpräzise Zeitmessung

Die Performance API erlaubt hochpräzise Messungen, die auf Zeit in potenzieller Sub-Millisekunden-Auflösung und einer stabilen monotonen Uhr basieren, die nicht anfällig für Systemuhrfehler oder Anpassungen ist. Die hochauflösenden Timer werden benötigt für genaues Benchmarking, anstelle der weniger präzisen und nicht monotorischen Date-Zeitstempel.

Timing von langen Animations-Frames

Lange Animations-Frames (LoAFs) können die Benutzererfahrung einer Website beeinträchtigen. Sie können langsame Benutzeroberflächenaktualisierungen verursachen, die scheinbar unempfindliche Steuerungen und ruckelige (oder nicht glatte) animierte Effekte und Scrollvorgänge erzeugen, was zu Benutzerfrustration führt. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über die langen Animations-Frames zu erhalten und ihre Ursachen besser zu verstehen. Dieser Artikel zeigt, wie die Long Animation Frames API verwendet werden kann.

Überwachen der bfcache-Blockierungsgründe

Die Eigenschaft PerformanceNavigationTiming.notRestoredReasons liefert Informationen darüber, warum das aktuelle Dokument bei der Navigation von der Nutzung des bfcache blockiert wurde. Entwickler können diese Informationen verwenden, um Seiten zu identifizieren, die Aktualisierungen benötigen, um bfcache-kompatibel zu werden und dadurch die Website-Performance zu verbessern.

Navigationstiming bietet Metriken, die mit der Navigation von einer Seite zu einer anderen in Verbindung stehen, über die PerformanceNavigationTiming API. Sie können beispielsweise ermitteln, wie viel Zeit das Laden oder Entladen eines Dokuments benötigt oder die Zeit loggen, die bis zur Fertigstellung der DOM-Konstruktion und der möglichen Interaktion mit dem DOM benötigt wurde.

Performance-Daten

Die Performance API bietet keine Performance-Datenanalyse oder Visualisierungen. Sie ist jedoch gut in Entwickler-Tools integriert und ihre Daten werden oft an Analyse-Endpunkte und Bibliotheken gesendet, um Leistungsmetriken aufzuzeichnen, die Ihnen helfen, die Daten zu bewerten, um Engpässe zu identifizieren, die Ihre Nutzer betreffen. Diese Seite bietet einen Überblick darüber, welche Arten von Performance-API-Daten existieren, wie sie gesammelt werden und wie sie zugänglich sind.

Ressourcen-Timing-API

Ressourcen-Timing ermöglicht das Abrufen und Analysieren detaillierter Netzwerktimingdaten für das Laden von Anwendungsressourcen. Eine Anwendung kann die Timing-Metriken verwenden, um beispielsweise die Zeit zu bestimmen, die es dauert, um eine bestimmte Ressource (wie ein Bild oder ein Skript) zu laden, entweder implizit als Teil des Seitenladevorgangs oder explizit aus JavaScript, beispielsweise unter Verwendung der fetch() API.

Server-Timing

Server-Timing erlaubt es den Servern, Metriken über den Anfrage-Antwort-Zyklus an den Benutzer-Agenten zu kommunizieren. Sie können diese Informationen sammeln und auf Server-seitige Metriken in der gleichen Weise reagieren wie auf alle anderen Metriken, die mit der Performance API verarbeitet werden.

Benutzer-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 Performance-Zeitleiste des Browsers sind.

Verwandte APIs

Die folgenden APIs sind ebenfalls nützlich, um die Seiten-Performance zu messen und zu beeinflussen:

Page Visibility API

Bietet Ereignisse, die Sie beobachten können, um zu wissen, wann ein Dokument sichtbar oder verborgen wird, sowie Funktionen, um den aktuellen Sichtbarkeitsstatus der Seite zu prüfen.

Background Tasks API

Die Cooperative Scheduling of Background Tasks API (auch bekannt als Background Tasks API oder die requestIdleCallback() API) bietet die Möglichkeit, Aufgaben zu planen, die vom Benutzeragenten automatisch ausgeführt werden, wenn er feststellt, dass es freie Zeit gibt, um dies zu tun.

Beacon API

Die Beacon Schnittstelle plant eine asynchrone und nicht blockierende Anforderung an einen Web-Server.

Intersection Observer API

Die Intersection Observer API bietet eine Möglichkeit, Änderungen in der Schnittmenge eines Zielelements mit einem Vorfahr-Element oder mit dem Viewport eines top-level Dokuments asynchron zu beobachten. Dadurch werden Anwendungsfälle wie Timing der Sichtbarkeit von Elementen ermöglicht, um asynchron benachrichtigt zu werden, wenn interessante Elemente sichtbar werden.

Media Capabilities API

Gibt die Dekodier- und Kodierfähigkeiten eines Client-Geräts preis, beispielsweise ob Medien unterstützt werden und ob die Wiedergabe glatt und energieeffizient sein soll, mit Echtzeit-Feedback über die Wiedergabe, um adaptives Streaming besser zu ermöglichen, und Zugang zu den Anzeigeeigenschaften zu verschaffen.

Network Information API

Informationen über die Verbindung des Systems in Bezug auf den allgemeinen Verbindungstyp (z.B. 'wifi', 'mobil', usw.). Dies kann verwendet werden, um basierend auf der Verbindung des Benutzers entweder hochauflösende Inhalte oder niedrigauflösende Inhalte auszuwählen.

Battery Status API

Die Battery API bietet Informationen über den Ladestand des Akkus des Systems und ermöglicht es Ihnen, durch Ereignisse benachrichtigt zu werden, die gesendet werden, wenn sich der Akkustand oder der Ladezustand ändern. Dies kann verwendet werden, um den Ressourcenverbrauch Ihrer App zu reduzieren, um den Akkuverbrauch zu minimieren, wenn der Akkustand niedrig ist, oder um Änderungen zu speichern, bevor der Akku leer ist, um Datenverlust zu verhindern.

Die deviceMemory-schreibgeschützte Eigenschaft der Navigator Schnittstelle gibt die ungefähre Menge an Gerätespeicher in Gigabyte zurück.

FetchEvent.preloadResponse

Die preloadResponse-schreibgeschützte Eigenschaft der FetchEvent Schnittstelle gibt ein Promise zurück, das sich entweder zur Navigation preload Response auflöst, wenn Navigation preload ausgelöst wurde, oder undefined ansonsten.

Profilerstellung und Werkzeuge

Firefox Profiler Performance Features

Diese Website bietet Informationen darüber, wie Sie die Performance-Features in Ihren Entwickler-Tools verwenden und verstehen können, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.

Profiling mit dem integrierten Profiler

Erfahren Sie, wie Sie die Leistung Ihrer App mit dem integrierten Profiler von Firefox überwachen können.

Referenzen

HTML

CSS

JavaScript

HTTP

Siehe auch