Web-Performance

Web-Performance bezieht sich auf die objektiven Messungen und die wahrgenommene Benutzererfahrung von Ladezeiten und Laufzeiten. Web-Performance umfasst, wie lange eine Website benötigt, um zu laden, interaktiv und reaktionsfähig zu werden, und wie flüssig der Inhalt während der Benutzerinteraktion ist - ist das Scrollen flüssig? Sind Schaltflächen klickbar? Laden Pop-ups schnell und werden angezeigt, und animieren sie währenddessen reibungslos? Web-Performance beinhaltet sowohl objektive Messungen wie Ladezeiten, Frames pro Sekunde und die Zeit bis zur Interaktivität als auch subjektive Erfahrungen, wie lange es sich anfühlt, bis der Inhalt geladen ist.

Je länger es dauert, bis eine Website reagiert, desto mehr Benutzer werden sie verlassen. Es ist wichtig, die 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 zeitkritischere Teile der Erfahrung asynchron geladen werden.

Es gibt Tools, APIs und bewährte Praktiken, die uns helfen, die Web-Performance zu messen und zu verbessern. Diese behandeln wir in diesem Abschnitt:

Wichtige Leitfäden zur Leistung

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 bei der Animation einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und das Animieren teurer CSS-Eigenschaften kann jank verursachen, wenn der Browser Schwierigkeiten hat, eine gleichmäßige FPS zu erzielen.

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-transition/animation oder JavaScript-basierte Animationen (mithilfe von requestAnimationFrame()). In diesem Artikel analysieren wir die Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.

Empfohlene Web-Performance-Zeitvorgaben: Wie lange ist zu lange?

Es gibt keine klaren Regeln dafür, was als langsames Laden von Seiten gilt, aber es gibt spezifische Richtlinien für die Anzeige, dass Inhalte geladen werden (1 Sekunde), für das Warten (50ms), für Animationen (16,7ms) und für die Reaktion auf Benutzereingaben (50 bis 200ms).

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 zu konvertieren. Die Optimierung des kritischen Rendering-Pfades verbessert die Renderleistung. Der kritische Rendering-Pfad umfasst das Document Object Model (DOM), das CSS Object Model (CSSOM), den Renderbaum und das Layout.

Latenz verstehen

Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zum Ziel zu gelangen. Im Hinblick auf die Leistungsoptimierung ist es wichtig, Maßnahmen zu ergreifen, um die Ursachen der Latenz zu verringern und die Website-Leistung unter der Simulation hoher Latenz zu testen, um für Benutzer mit schlechten Verbindungen zu optimieren. Dieser Artikel erklärt, was Latenz ist, wie sie die Leistung beeinflusst, wie man sie misst und wie man sie verringert.

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 verkürzten Seitenladezeiten führt.

Leistungsbudgets

Ein Leistungsbudget ist ein Limit, um Regressionen 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 einen Schwellwert über einen bestimmten Zeitraum angewendet werden.

Leistungsgrundlagen

Leistung bedeutet Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument allgemein, 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.

Navigations- und Ressourcen-Timings

Navigationstimings sind Metriken, die die Dokumentnavigationsereignisse eines Browsers messen. Ressourcen-Timings sind detaillierte Netzwerkzeitmessungen, die das Laden der Ressourcen einer Anwendung betreffen. Beide bieten dieselben schreibgeschützten Eigenschaften, aber die Navigationstiming misst die Zeiten des Hauptdokuments, während die Ressourcentiming die Zeiten für alle durch dieses Hauptdokument aufgerufenen Assets oder Ressourcen und deren angeforderte Ressourcen bereitstellt.

Optimierung der Startleistung

Die Verbesserung der Startleistung ist oft eine der wertvollsten Leistungsoptimierungen, die vorgenommen werden können. Wie lange dauert es, bis Ihre App startet? Scheint sie das Gerät oder den Browser des Benutzers zu blockieren, während die App geladen wird? Das lässt Benutzer befürchten, dass Ihre Anwendung abgestürzt ist oder dass etwas anderes nicht stimmt. Eine gute Benutzererfahrung stellt sicher, dass Ihre App schnell lädt. Dieser Artikel bietet Leistungstipps und Vorschläge sowohl für das Schreiben neuer Anwendungen als auch für das Portieren von Anwendungen auf das Web von anderen Plattformen.

Performance Monitoring: RUM vs. synthetisches Monitoring

Synthetisches Monitoring und Real User Monitoring (RUM) sind zwei Ansätze zur Überwachung und zur Bereitstellung von Einblicken in die Web-Performance. RUM und synthetisches Monitoring bieten unterschiedliche Perspektiven zur Performance-Betrachtung und haben jeweils Vorteile, geeignete Anwendungsfälle und Nachteile. RUM eignet sich im Allgemeinen am besten, um langfristige Trends zu verstehen, während synthetisches Monitoring sehr gut für Regressionstests und zur Minderung kurzfristiger Performance-Probleme während der Entwicklung geeignet ist. In diesem Artikel definieren und vergleichen wir diese beiden Ansätze des Performance-Monitorings.

Seitenerstellung: Wie Browser funktionieren

Benutzer wünschen sich Web-Erfahrungen mit Inhalten, die schnell geladen werden und reibungslos interagierbar sind. Daher sollte ein Entwickler bestrebt sein, diese beiden Ziele zu erreichen.

Spekulatives Laden

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

Verwendung von dns-prefetch

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.

Einsteiger-Tutorials

Der MDN Web Performance Learning Area enthält moderne, aktuelle Tutorials zu den Grundlagen der Performance. Beginnen Sie hier, wenn Sie neu im Bereich der Performance sind:

Web-Performance: kurzer Überblick

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

Was ist Web-Performance?

Dieser Artikel beginnt das Modul mit einem guten Blick darauf, was Leistung tatsächlich ist – dazu gehören die Tools, Metriken, APIs, Netzwerke und Personen, die wir berücksichtigen müssen, wenn wir über Leistung nachdenken und wie wir Performance in unseren Workflow zur Webentwicklung integrieren können.

Wie nehmen Benutzer die Leistung 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 der Seite, Inaktivität, Reaktionsfähigkeit auf Benutzerinteraktionen und die Glätte des Scrollens und anderer Animationen beeinflusst. In diesem Artikel erörtern wir die verschiedenen Lade- und Animationsmetriken sowie die Metriken zur Reaktionsfähigkeit und geben bewährte Methoden an, um die Benutzerwahrnehmung zu verbessern, selbst wenn die tatsächlichen Zeiten nicht verbessert werden können.

Grundlagen der Web-Performance

Zusätzlich zu den Frontend-Komponenten aus 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, Entwicklertools, bewährte Praktiken und schlechte Praktiken in Bezug auf Web-Performance. Hier stellen wir viele dieser Funktionen auf der Basisebene vor und bieten Links zu tiefergehenden Informationen zur Leistungsverbesserung für jedes Thema.

HTML-Leistungsfunktionen

Einige Attribute und die Quellreihenfolge Ihres Markups können die Leistung Ihrer Website beeinflussen. Durch Minimierung der Anzahl der DOM-Knoten und Sicherstellung, dass die beste Reihenfolge und die besten Attribute für das Einfügen von Inhalten wie Styles, Skripten, Medien und Drittanbieterskripten verwendet werden, können Sie die Benutzererfahrung erheblich verbessern. Dieser Artikel untersucht im Detail, wie HTML verwendet werden kann, um maximale Leistung sicherzustellen.

Multimedia: Bilder und Video

Die Optimierung von Medien ist oft der einfachste Weg zur Verbesserung der Web-Performance. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte jedes Benutzergeräts bereitzustellen. Zusätzliche Tipps wie das Entfernen von Audiotracks von Hintergrundvideos können die Leistung weiter verbessern. In diesem Artikel besprechen 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-Leistungsfunktionen

CSS mag ein weniger wichtiger Optimierungsschwerpunkt für die verbesserte Leistung sein, 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, mit Stilen umzugehen, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.

JavaScript-Leistungspraktiken

JavaScript, wenn es richtig eingesetzt wird, kann interaktive und immersive Web-Erfahrungen ermöglichen – oder es kann die Downloadzeit, die Renderzeit, die Leistung innerhalb der Anwendung, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige bewährte JavaScript-Verfahren, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so performant wie möglich sind.

Nutzung von Performance-APIs

Resource Timing API

Ressourcen laden und zeitlich erfassen das Laden dieser Ressourcen, einschließlich der Verwaltung des Ressourcenpuffers und des Umgangs mit CORS.

User Timing API

Erstellen Sie anwendungsspezifische Zeitstempel mit den "mark" und "measure" Eintrittstypen der User Timing API – die Teil der Leistungstimeline des Browsers sind.

Beacon API

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

Intersection Observer API

Lernen Sie, die Sichtbarkeit von Elementen mit der Intersection Observer API zu timen und asynchron benachrichtigt zu werden, wenn interessante Elemente sichtbar werden.

Andere Dokumentationen

Firefox Profiler Leistungsfunktionen

Diese Website bietet Informationen zur Nutzung und zum Verständnis der Leistungsmerkmale in Ihren Entwicklerwerkzeugen, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.

Profiling mit dem integrierten Profiler

Lernen Sie, wie Sie die App-Leistung mit Firefoxs integriertem Profiler profilieren können.

Glossarbegriffe

Siehe auch

HTML

CSS

  • will-change
  • GPU vs. CPU
  • Layout messen
  • Best Practices für das Laden von Schriften

JavaScript

APIs

Header

Tools

Zusätzliche Metriken

  • Geschwindigkeitsindex und Wahrnehmungsgeschwindigkeitsindex

Best Practices