Web-Performance

Web-Performance bezieht sich auf die objektiven Messungen und die wahrgenommene Benutzererfahrung von Ladezeiten und Laufzeiten. 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 befasst sich mit Fragen wie: Ist das Scrollen flüssig? Reagieren die Schaltflächen? Werden Pop-ups schnell geladen und flüssig animiert? Zu den objektiven Messungen gehören Ladezeiten, Bilder pro Sekunde und die Zeit, bis die Seite interaktiv wird. Die subjektive Erfahrung beschreibt, wie lange es sich anfühlt, bis der Inhalt geladen ist.

Je länger eine Website benötigt, um zu reagieren, 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 das Erlebnis so schnell wie möglich verfügbar und interaktiv gemacht wird, während die weiteren Teile des Erlebnisses asynchron geladen werden.

Es gibt Tools, APIs und Best Practices, die uns helfen, die Web-Performance zu messen und zu verbessern. Wir behandeln diese auf den folgenden Seiten.

Web-Performance-Leitfäden

Die Performance-Leitfäden sind Ressourcen, die beschreiben, wie Browser funktionieren, was die Performance beeinflusst und wie Sie die Performance in verschiedenen Aspekten Ihrer Anwendung messen, optimieren und überwachen können.

Grundlagen der Performance: 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 Werkzeuge und Prozesse Sie zum Testen und Verbessern verwenden können.
Seitenbefüllung: wie Browser funktionieren: Benutzer wünschen sich Web-Erlebnisse mit schnell ladendem und flüssig interaktivem Inhalt. Daher sollte ein Entwickler versuchen, diese beiden Ziele zu erreichen. Um zu verstehen, wie Performance und wahrgenommene Performance verbessert werden können, hilft es zu verstehen, wie der Browser funktioniert.
Verständnis für Latenz: Latenz ist die Zeit, die ein Datenpaket benötigt, um von der Quelle zum Ziel zu gelangen. Im Hinblick auf die Performance-Optimierung ist es wichtig, die Ursachen der Latenz zu reduzieren und die Website-Performance zu testen, indem man hohe Latenz emuliert, um für Benutzer mit langsamen oder unzuverlässigen Verbindungen zu optimieren.
Empfohlene Web-Performance-Zeiten: Wie lange ist zu lange?: Es gibt keine klaren Regeln dafür, was ein langsames Tempo beim Laden von Seiten ausmacht, aber es gibt spezifische Richtlinien, die darauf hinweisen, dass der Inhalt laden wird (1 Sekunde), Leerlauf (50 ms), Animation (16,7 ms) und Reaktion auf Benutzereingaben (50 bis 200 ms).
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.
Navigations- und Ressourcentimings: Navigationstiming sind Metriken, die die Dokumentnavigationsereignisse eines Browsers messen. Ressourcen-Timings sind detaillierte Netzwerk-Zeitmessungen zum Laden der Ressourcen einer Anwendung. Beide bieten die gleichen schreibgeschützten Eigenschaften, aber Navigationstiming misst die Timings des Hauptdokuments, während das Ressourcen-Timing die Zeiten für alle Ressourcen oder Ressourcen liefert, die von diesem Hauptdokument und den angeforderten Ressourcen der Ressourcen aufgerufen werden.
Optimierung der Startperformance: Die Verbesserung der Startperformance ist oft eine der wertvollsten Performance-Optimierungen, die vorgenommen werden können. Eine gute Benutzererfahrung beinhaltet, 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 Renderingpfad: Der kritische Renderingpfad 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 Renderingpfads verbessert die Render-Performance. Der kritische Renderingpfad 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 nur dann zu laden, wenn sie benötigt werden. Es ist eine Methode, um die Länge des kritischen Renderingpfads zu verkürzen, was in verkürzten Seitenladezeiten resultiert.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abruf, Ressourcenabruf oder das Rendern von Dokumenten) auszuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen darüber, welche Seiten der Benutzer als nächstes am wahrscheinlichsten besuchen wird.
Performance-Budgets: Ein Performance-Budget ist eine Begrenzung, um Rückschritte zu verhindern. Es kann für eine Datei, einen Dateityp, alle auf einer Seite geladenen Dateien, eine spezifische Metrik (z.B. Time to Interactive), eine benutzerdefinierte Metrik (z.B. Zeit zum Hauptelement) oder eine Schwelle über einen bestimmten Zeitraum gelten.
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 Ansichten zur Performance und haben Vorteile, gute Anwendungsfälle und Schwächen. RUM eignet sich im Allgemeinen am besten für das Verständnis langfristiger Trends, während sich synthetisches Monitoring sehr gut für Regressionstests und zur Minderung kurzfristiger Performanceprobleme 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 bei 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 Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Animationsperformance und Bildwiederholrate: 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 für das Animieren einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und das Animieren teurer CSS-Eigenschaften kann zu Jank führen, wenn der Browser Schwierigkeiten hat, eine flüssige Bildwiederholrate zu erreichen.

Tutorials für Anfänger

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

Das "Warum" der Web-Performance: Dieser Artikel thematisiert, warum Web-Performance wichtig für Zugänglichkeit, Benutzererfahrung und Ihre Geschäftsziele ist.
Was ist Web-Performance?: Sie wissen, dass Web-Performance wichtig ist, aber welche Faktoren beeinflussen die Web-Performance und wie wird sie gemessen? Dieser Artikel führt in die Komponenten der Performance ein, vom Laden und Rendern von Webseiten, einschließlich wie Ihr Inhalt in den Browsern Ihrer Nutzer angezeigt wird, bis hin zu den Personengruppen, die wir berücksichtigen müssen, wenn wir über Performance nachdenken.
Wie nehmen Benutzer 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 Seitenladezeit, Leerlaufzeiten, Reaktionsfähigkeit auf Benutzerinteraktionen und die Flüssigkeit des Scrollens 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.
Performance-Messung: Jetzt, da Sie einige Performance-Kennzahlen verstehen, tauchen wir tiefer in Performance-Tools, Metriken und APIs ein und wie wir die Performance in den Entwicklungsworkflow integrieren können.
Multimedia: Bilder: Die einfachsten Maßnahmen zur Verbesserung der Web-Performance sind oft die Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte jedes Benutzeragenten zu servieren. In diesem Artikel besprechen wir den Einfluss von Bildern auf die Performance und die Methoden, um die Anzahl der pro Bild gesendeten Bytes zu reduzieren.
Multimedia: Video: Die einfachsten Maßnahmen zur Verbesserung der Web-Performance sind oft die Medienoptimierung. In diesem Artikel diskutieren wir den Einfluss von Videoinhalten auf die Performance und geben Tipps, wie das Entfernen von Audiospuren aus Hintergrundvideos die Performance verbessern kann.
JavaScript-Performance-Optimierung: JavaScript kann bei richtiger Verwendung interaktive und immersive Web-Erlebnisse ermöglichen – oder es kann die Downloadzeit, Renderzeit, In-App-Performance, die Batterielebensdauer und die 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.
HTML-Performance-Optimierung: Einige Attribute und die Quellreihenfolge Ihres Markups können die Performance Ihrer Website beeinflussen. Durch die Minimierung der Anzahl der DOM-Knoten, die sicherstellen, dass die beste Reihenfolge und die besten Attribute für das Einschließen 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 sicherzustellen.
CSS-Performance-Optimierung: CSS mag ein weniger wichtiger Optimierungsfokus für verbesserte Performance sein, aber es gibt einige CSS-Funktionen, die die Performance mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die sich auf die Performance auswirken und schlagen Möglichkeiten vor, wie Stile gehandhabt werden können, um sicherzustellen, dass die Performance nicht negativ beeinflusst wird.
Das Geschäftsszenario für Web-Performance: Es gibt viele Dinge, die ein Entwickler tun kann, um die Performance zu verbessern, aber wie schnell ist schnell genug? Wie können Sie die Verantwortlichen von der Bedeutung dieser Bemühungen überzeugen? Einmal optimiert, wie können Sie sicherstellen, dass sich keine Aufblähung zurückschleicht? In diesem Artikel untersuchen wir, wie man das Management überzeugt, eine Performance-Kultur und ein Performance-Budget entwickelt und Möglichkeiten einführt, Rückschritten in Ihrem Code zu verhindern.
Web-Performance Best Practices & Tipps: Dieser Artikel behandelt mehrere Themen auf einer grundlegenden Ebene und bietet Links zu tiefergehenden Informationen, um die Performance für jedes Thema zu verbessern. Neben Front-End-Themen wie HTML, CSS, JavaScript und Mediendateien werden auch APIs, Entwicklertools, Best Practices und schlechte Praktiken im Zusammenhang mit der Web-Performance behandelt.

Performance-APIs

Die Performance-API ist eine Gruppe von Standards, die zur Messung der Performance von Webanwendungen verwendet werden. Die folgenden Seiten bieten Übersichten über die Performance-APIs und Informationen zur Nutzung derselben:

Hochpräzise Zeitmessung: Die Performance-API ermöglicht hochpräzise Messungen, die auf der Zeit in potenzieller Sub-Millisekunden-Auflösung und einer stabilen monotonen Uhr basieren, die nicht von Systemuhrverstimmungen oder Anpassungen betroffen ist. Die hochauflösenden Timer sind für genaues Benchmarking erforderlich, anstelle der weniger präzisen und nicht-monotonischen Date-Zeitstempel.
Timing langer Animations-Frames: Lange Animations-Frames (LoAFs) können die Benutzererfahrung einer Website beeinflussen. Sie können langsame Benutzeroberflächenaktualisierungen verursachen, was zu scheinbar unempfindlichen Steuerelementen und ruckeligen (oder nicht glatten) Animationseffekten und Scrollbewegungen führen kann, was zu Frustrationen bei den Benutzern führt. Die Long Animation Frames API ermöglicht es Entwicklern, Informationen über die langen Animations-Frames zu erhalten und deren Ursachen besser zu verstehen. Dieser Artikel zeigt, wie man die Long Animation Frames API verwendet.
Überwachen von bfcache-Blockierungsgründen: Die PerformanceNavigationTiming.notRestoredReasons-Eigenschaft gibt Informationen darüber, warum das aktuelle Dokument daran gehindert wurde, den bfcache bei der Navigation zu verwenden. Entwickler können diese Informationen verwenden, um Seiten zu identifizieren, die Aktualisierungen benötigen, um bfcache-kompatibel zu werden und damit die Performance der Seite zu verbessern.
Navigationstiming: Navigationstiming bietet Metriken, die mit der Navigation von einer Seite zu einer anderen in Verbindung stehen, über die PerformanceNavigationTiming API. Zum Beispiel können Sie feststellen, wie viel Zeit es dauert, ein Dokument zu laden oder zu entladen, oder die Zeit erfassen, die bis zur Fertigstellung der DOM-Konstruktion benötigt wird und Interaktionen mit dem DOM möglich sind.
Performance-Daten: Die Performance-API bietet keine Leistungsdatenanalyse oder -visualisierungen. Die Performance-API ist jedoch gut in Entwicklertools integriert und ihre Daten werden oft an Analyse-Endpunkte und Bibliotheken gesendet, um Leistungsmetriken aufzuzeichnen und Ihnen zu helfen, die Daten zu evaluieren, um Performance-Engpässe zu finden, die Ihre Benutzer betreffen. Diese Seite bietet eine Übersicht 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 Netzwerk-Zeitmessdaten zum Laden von Anwendungsressourcen. Eine Anwendung kann die Timing-Metriken nutzen, um zum Beispiel die Zeit zu bestimmen, die das Laden einer bestimmten Ressource (wie eines Bildes oder eines Skripts) dauert, entweder implizit als Teil des Seitenladens oder explizit aus JavaScript, zum Beispiel unter Verwendung der fetch() API.
Server Timing: Server-Timing ermöglicht es Servern, Metriken über den Request-Response-Zyklus an den Benutzeragenten zu übermitteln. 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 unter Verwendung der User Timing API's "Mark"- und "Measure"-Eintragstypen mit hochpräzisen Zeitstempeln, die Teil der Leistungslinie des Browsers sind.

Profiling und Tools

Firefox Profiler Leistungsmerkmale: Diese Website bietet Informationen dazu, wie man die Leistungsmerkmale in Ihren Entwicklertools nutzt und versteht, einschließlich Call Tree, Flame Graph, Stack Chart, Marker Chart und Network Chart.
Profiling mit dem integrierten Profiler: Lernen Sie, wie man die App-Performance mit dem integrierten Profiler von Firefox analysiert.

Referenzen

HTML

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

CSS

will-change

JavaScript

HTTP

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

Siehe auch

Responsive Bilder HTML-Leitfaden
Web Workers API, einschließlich Using Service Workers und Using Web Workers
Offline- und Hintergrundbetrieb
Caching
Client Hints
Glossarbegriffe:
Performance in Firefox Developer Tools

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden