Web-Performance

Web-Performance bezeichnet die objektiven Messungen und die wahrgenommene Benutzererfahrung der Ladezeit und Laufzeit. Web-Performance ist, wie lange eine Webseite benötigt, um zu laden, interaktiv und reaktionsfähig zu werden und wie flüssig der Inhalt während der Benutzerinteraktionen ist. Leistungsfragen umfassen Fragen wie: 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 bis zur Interaktivität, und die subjektive Erfahrung bedeutet, wie lange es sich anfühlt, bis der Inhalt geladen ist.

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

Es gibt Tools, 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

Performance-Grundlagen

Performance bedeutet Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument allgemein, was Performance ist, wie die Browserplattform hilft, sie zu verbessern, und welche Tools und Prozesse Sie verwenden können, um sie zu testen und zu verbessern.

Seitenaufbau: Funktionsweise von Browsern

Benutzer möchten Web-Erlebnisse mit Inhalten, die schnell zu laden und flüssig zu interagieren sind. Daher sollte ein Entwickler danach streben, diese beiden Ziele zu erreichen. Um zu verstehen, wie man die Performance und die wahrgenommene Performance verbessert, hilft es zu verstehen, wie der Browser funktioniert.

Verständnis von Latenz

Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zu einem Ziel zu gelangen. Bei der Performance-Optimierung ist es wichtig, die Ursachen der Latenz zu reduzieren und die Website-Leistung zu testen, um hohe Latenz für Benutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.

Empfohlene Web-Performanzzeiten: Wie lang ist zu lang?

Es gibt keine klaren festen Regeln dafür, was eine langsame Ladezeit für Seiten darstellt, aber es gibt spezifische Richtlinien, die anzeigen, dass der Inhalt geladen wird (1 Sekunde), im Leerlauf ist (50ms), animiert (16,7ms) und auf Benutzereingaben reagiert (50 bis 200ms).

Verwendung von dns-prefetch

DNS-prefetch ist ein Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine Datei sein, die später geladen wird, oder ein Linkziel, das ein Benutzer zu erreichen versucht.

Navigations- und Ressourcenzeiten

Navigationszeiten sind Metriken, die die Dokumentnavigationsereignisse eines Browsers messen. Ressourcenzeiten sind detaillierte Netzwerkmessungen bezüglich des Ladens von Anwendungsressourcen. Beide bieten die gleichen schreibgeschützten Eigenschaften, aber die Navigationstiming misst die Zeiten des Hauptdokuments, während das Ressourcentiming die Zeiten für alle vom Hauptdokument aufgerufenen und die angeforderten Ressourcen liefert.

Optimierung der Startperformance

Die Verbesserung Ihrer Startperformance ist oft eine der wertvollsten Performance-Optimierungen, die vorgenommen werden können. Eine gute Benutzererfahrung umfasst 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 auf das Web von anderen Plattformen.

Kritischer Rendering-Pfad

Der kritische Rendering-Pfad 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 Rendering-Pfades verbessert die Renderperformance. Der kritische Rendering-Pfad umfasst das Document Object Model (DOM), das CSS Object Model (CSSOM), den Rendertree 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 in reduzierte Seitenladezeiten übersetzt wird.

Spekulatives Laden

Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abrufe, Ressourcendownloads oder Dokumentrendering) auszuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen, welche Seiten der Benutzer als nächstes wahrscheinlich besuchen wird.

Performance Budgets

Ein Performance-Budget ist eine Grenze zur Vermeidung von Regressionen. 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. Zeit für Hero-Element) oder einen Schwellenwert über einen bestimmten Zeitraum angewendet werden.

Performance Monitoring: RUM vs. synthetisches Monitoring

Synthetisches Monitoring und Real User Monitoring (RUM) sind zwei Ansätze zum Überwachen und Bereitstellen von Einblicken in die Web-Performance. RUM und synthetisches Monitoring bieten unterschiedliche Perspektiven auf die Performance und haben Vorteile, gute Anwendungsfälle und Nachteile. RUM eignet sich im Allgemeinen am besten zum Verstehen langfristiger Trends, 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-Animationsperformance

Animationen sind entscheidend für ein angenehmes Benutzererlebnis 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 Performance-Unterschiede 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 durchgeführt werden. Die Leistungskosten beim Animieren einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und das Animieren teurer CSS-Eigenschaften kann zu Jank führen, während der Browser Schwierigkeiten hat, eine flüssige Bildrate zu erreichen.

Anleitungen für Anfänger

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

Web-Performance: Kurzer Überblick

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

Was ist Web-Performance?

Dieser Artikel beginnt 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 Leistung wahr?

Wichtiger als die Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Benutzer Ihre Seite wahrnehmen. Diese Wahrnehmungen werden durch die tatsächliche Ladezeit der Seite, das Verweilen, die Reaktionsfähigkeit auf Benutzereingaben und die 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 der tatsächlichen Zeiten.

Grundlagen der Web-Performance

Zusätzlich zu den Frontend-Komponenten von HTML, CSS, JavaScript und Mediendateien gibt es Funktionen, die Anwendungen verlangsamen 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 führen wir viele dieser Funktionen auf Basisebene ein und bieten Links zu tiefergehenden Informationen zur Verbesserung der Performance für jedes Thema.

HTML-Performance-Features

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 das Einbinden von Inhalten wie Stylesheets, Skripten, Medien und Third-Party-Skripten 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 Videos

Die am einfachsten erreichbaren Optimierungen der Web-Performance sind oft Medienoptimierungen. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte jedes Benutzeragenten bereitzustellen. Zusätzliche Tipps wie das Entfernen von Audiotracks aus Hintergrundvideos können die Performance weiter verbessern. In diesem Artikel diskutieren wir die Auswirkungen von Video-, Audio- und Bildinhalten auf die Performance und die Methoden, um sicherzustellen, dass diese Auswirkungen so gering wie möglich sind.

CSS-Performance-Features

CSS ist möglicherweise weniger im Fokus der Optimierung für verbesserte Performance, aber es gibt einige CSS-Funktionen, die die Performance mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die die Performance beeinflussen und schlagen Möglichkeiten zur Behandlung von Styles vor, um sicherzustellen, dass die Performance nicht negativ beeinflusst wird.

JavaScript-Performance-Best-Practices

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

Performance APIs

Die Performance API ist eine Gruppe von Standards, die verwendet werden, um die Performance von Web-Anwendungen zu messen. Die folgenden Seiten bieten Überblicke über die Performance APIs sowie Informationen zur Verwendung:

Hochpräzise Zeitmessung

Die Performance API ermöglicht hochpräzise Messungen basierend auf der Zeit in potenzieller Sub-Millisekunden-Auflösung und einer stabilen, monotonen Uhr, die nicht anfällig für Systemuhrverzerrungen oder Anpassungen ist. Die hochauflösenden Timer werden für präzises Benchmarking benötigt, anstelle der weniger präzisen und nicht monotonen Date Timestamps.

Timing langer Animationsrahmen

Lange Animationsrahmen (LoAFs) können die Benutzererfahrung einer Website beeinträchtigen. Sie können langsame Updates der Benutzeroberfläche (UI) verursachen, was zu scheinbar nicht reagierenden Steuerelementen und ruckelnden (oder nicht-flüssigen) Animationseffekten und Scrollen führt, was zur Benutzerfrustration führt. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über die langen Animationsrahmen zu erhalten und ihre Ursachen besser zu verstehen. Dieser Artikel zeigt, wie die Long Animation Frames API verwendet wird.

Monitoring bfcache-Blockierungsgründe

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 bfcache-kompatibel zu sein und so die Website-Performance zu verbessern.

Navigation Timing bietet Metriken, die mit dem Navigieren von einer Seite zu einer anderen über die PerformanceNavigationTiming API verbunden sind. Zum Beispiel können Sie bestimmen, wie lange es dauert, ein Dokument zu laden oder zu entladen, oder die Zeit bis zum Abschluss der DOM-Konstruktion aufzeichnen und die Interaktion mit dem DOM ermöglichen.

Performance-Daten

Die Performance API bietet keine Leistungsdatenanalyse oder Visualisierungen. Die Performance API ist jedoch gut in Entwickler-Tools integriert, und ihre Daten werden oft 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 bietet einen Überblick darüber, welche Arten von Performance API-Daten existieren, wie sie gesammelt werden und wie darauf zugegriffen werden kann.

Resource Timing API

Resource Timing ermöglicht das Abrufen und Analysieren detaillierter Netzwerkzeiten für das Laden von Anwendungsressourcen. Eine Anwendung kann die Zeitmessungen verwenden, um beispielsweise zu bestimmen, wie lange es dauert, eine bestimmte Ressource zu laden (wie ein Bild oder ein Skript), entweder implizit als Teil des Seitenladens oder explizit von JavaScript, zum Beispiel 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 auf serverseitige Metriken in der gleichen Weise wie alle anderen Metriken, die mit der Performance API verarbeitet werden, reagieren.

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

Verwandte APIs

Die folgenden APIs sind ebenfalls nützlich für das Messen und Beeinflussen der Seitenperformance:

Page Visibility API

Stellt Ereignisse bereit, die Sie beobachten können, um zu wissen, wann ein Dokument sichtbar oder unsichtbar wird, sowie Funktionen, um den aktuellen Sichtbarkeitsstatus der Seite zu betrachten.

Background Tasks API

Die Kooperative Zeitplanung von Hintergrundaufgaben API (auch bekannt als die Background Tasks API oder die requestIdleCallback() API) bietet die Möglichkeit, Aufgaben automatisch vom Benutzeragenten ausführen zu lassen, wenn dieser feststellt, dass freie Zeit vorhanden ist.

Beacon API

Die Beacon-Schnittstelle plant eine asynchrone und nicht blockierende Anfrage an einen Webserver.

Intersection Observer API

Die Intersection Observer API bietet eine Möglichkeit zur asynchronen Beobachtung von Änderungen im Schnittpunkt eines Zielelements mit einem Vorfahrenelement oder mit dem Viewport eines Dokuments auf oberster Ebene. Dies ermöglicht Anwendungsfälle wie Timing der Sichtbarkeit eines Elements, um asynchron benachrichtigt zu werden, wenn interessante Elemente sichtbar werden.

Media Capabilities API

Gibt die Dekodierungs- und Codierungsfähigkeiten eines Clientgeräts an, z.B. ob Medien unterstützt werden und ob die Wiedergabe flüssig und energieeffizient sein sollte, mit Echtzeit-Feedback zur Wiedergabe, um besser adaptives Streaming zu ermöglichen, und Zugang zu Anzeigeeigenschaften zu gewähren.

Network Information API

Informationen über die Verbindung des Systems in Bezug auf den allgemeinen Verbindungstyp (z.B. "WiFi", "Mobilfunk" usw.). Dies kann verwendet werden, um basierend auf der Verbindung des Benutzers Inhalte in hoher oder niedriger Auflösung auszuwählen.

Battery Status API

Die Battery API bietet Informationen über den Batterieladezustand des Systems und ermöglicht die Benachrichtigung durch Ereignisse, die gesendet werden, wenn sich der Batteriestand oder der Ladezustand ändert. Dies kann dazu verwendet werden, die Ressourcennutzung Ihrer App anzupassen, um den Batterieentladungszustand zu reduzieren, wenn der Batteriestand niedrig ist, oder um Änderungen zu speichern, bevor die Batterie leer ist, um Datenverlust zu verhindern.

Die deviceMemory-Eigenschaft der Navigator-Schnittstelle gibt den ungefähren Speicherplatz des Geräts in Gigabyte an.

FetchEvent.preloadResponse

Die preloadResponse-Eigenschaft der FetchEvent-Schnittstelle gibt ein Promise zurück, das sich auf die Navigationsvorausladung Response auflöst, wenn die Navigation Preload ausgelöst wurde, oder andernfalls undefined.

Profiling und Werkzeuge

Firefox Profiler Performance Features

Diese Website bietet Informationen darüber, wie Sie die Leistungsmerkmale in Ihren Entwicklerwerkzeugen nutzen und verstehen, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.

Profiling mit dem integrierten Profiler

Erfahren Sie, wie Sie die Performance von Apps mit dem integrierten Profiler in Firefox analysieren.

Referenzen

HTML

CSS

JavaScript

HTTP

Siehe auch