Web-Performance

Web-Performance umfasst die objektiven Messungen und die wahrgenommene Benutzererfahrung hinsichtlich der Ladezeiten und Laufzeiten. Web-Performance bezieht sich darauf, wie lange eine Website zum Laden, zum interaktiv und responsiv Werden benötigt und wie flüssig die Inhalte während der Benutzerinteraktionen sind - ist das Scrollen flüssig? Sind Buttons anklickbar? Laden und Anzeigen sich Pop-ups schnell und animieren diese dabei flüssig? Die Web-Performance umfasst sowohl objektive Messungen wie die Ladezeit, Bilder pro Sekunde und die Zeit, bis sie interaktiv wird, als auch subjektive Erfahrungen, wie lange es sich gefühlt hat, bis die Inhalte geladen waren.

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

Es gibt Werkzeuge, APIs und Best Practices, die uns helfen, die Web-Performance zu messen und zu verbessern. Wir behandeln sie in diesem Abschnitt:

Wichtige Leistungsleitfäden

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 erstellt werden. Die Leistungskosten für die Animation einer CSS-Eigenschaft können je nach Eigenschaft variieren, und die Animation teurer CSS-Eigenschaften kann zu jank führen, wenn der Browser Schwierigkeiten hat, eine flüssige FPS zu erreichen.

Critical rendering path

Der Critical Rendering Path ist die Abfolge von Schritten, die der Browser durchläuft, um das HTML, CSS und JavaScript in Pixel auf dem Bildschirm zu verwandeln. Die Optimierung des kritischen Rendering-Pfads verbessert die Renderleistung. Der kritische Rendering-Pfad umfasst das Document Object Model (DOM), das CSS Object Model (CSSOM), den Renderbaum und das Layout.

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.

Die Seite füllen: wie Browser funktionieren

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

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).

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-Pfades zu verkürzen, was zu reduzierten Ladezeiten der Seite führt.

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.

Optimieren 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 es, als würde das Gerät oder der Browser des Nutzers blockiert, während die App geladen wird? Das lässt Nutzer befürchten, dass Ihre Anwendung abgestürzt ist oder etwas anderes schief läuft. Eine gute Benutzererfahrung beinhaltet, 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 budgets

Ein Performance-Budget ist eine Begrenzung, um Rückschritte zu vermeiden. Es kann für eine Datei, einen Dateityp, alle auf einer Seite geladenen Dateien, eine bestimmte Metrik (z.B. Time_to_interactive), eine benutzerdefinierte Metrik (z.B. Zeit zum Hero-Element) oder einen Schwellenwert über einen Zeitraum gelten.

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.

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, die die wesentlichen Aspekte der Performance abdecken. Beginnen Sie hier, wenn Sie ein Neuling in Sachen 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 Einblick in das, was Performance tatsächlich ist — das umfasst die Werkzeuge, Metriken, APIs, Netzwerke und Personengruppen, die wir in Betracht ziehen 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 Seite wahrnehmen. Diese Wahrnehmungen werden durch die tatsächliche Seitenladezeit, Inaktivität, Reaktionsfähigkeit auf Benutzerinteraktionen und die Flüssigkeit von Scrolling und anderen Animationen beeinflusst. In diesem Artikel diskutieren wir die verschiedenen Lade-, Animations- und Reaktionsfähigkeit-Metriken sowie Best Practices, um die Benutzerwahrnehmung zu verbessern, wenn nicht die tatsächlichen Zeiten.

Web-Performance-Grundlagen

Zusätzlich zu 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, Entwicklertools, Best Practices und schlechte Praktiken im Zusammenhang mit der Web-Performance. Hier werden wir viele dieser Funktionen auf der grundlegenden Ebene einführen und Links zu vertiefenden Informationen bereitstellen, um die Performance für jedes Thema zu verbessern.

HTML-Leistungsmerkmale

Einige Attribute und die Quellreihenfolge Ihres Markups können die Performance Ihrer Website beeinflussen. Durch die Minimierung der Anzahl von DOM-Knoten und die Sicherstellung der besten Reihenfolge und Attribute für die Einbindung von Inhalten wie Styles, Skripten, Medien und Drittanbieter-Skripten können Sie die Benutzererfahrung drastisch verbessern. Dieser Artikel betrachtet im Detail, wie HTML genutzt werden kann, um maximale Performance sicherzustellen.

Multimedia: Bilder und Videos

Die einfachste Möglichkeit zur Web-Performance-Steigerung ist oft die Medienoptimierung. Es ist möglich, unterschiedliche Mediendateien entsprechend den Fähigkeiten, der Größe und der Pixeldichte jedes User-Agents bereitzustellen. Zusätzliche Tipps wie das Entfernen von Audiospuren 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 diesen Einfluss so minimal wie möglich zu halten.

CSS-Leistungsmerkmale

CSS kann zwar in Bezug auf die Performance-Optimierung weniger im Fokus stehen, aber es gibt einige CSS-Funktionen, die die Performance mehr als andere beeinflussen. In diesem Artikel schauen wir uns einige CSS-Eigenschaften an, die die Performance beeinflussen und schlagen Wege vor, wie Sie Stile handhaben können, um eine negative Beeinflussung der Performance zu vermeiden.

JavaScript-Performance-Best-Practices

JavaScript kann, richtig eingesetzt, interaktive und fesselnde Web-Erfahrungen ermöglichen – oder es kann die Downloadzeit, die Renderzeit, die In-App-Performance, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige JavaScript-Best-Practices, die in Betracht gezogen werden sollten, um sicherzustellen, dass auch komplexe Inhalte so performant wie möglich sind.

Verwenden von Performance-APIs

Resource Timing API

Ressourcen laden und timen, einschließlich Verwaltung des Ressourcenpuffers und Umgang mit CORS.

User Timing API

Erstellen Sie anwendungsspezifische Zeitstempel mit den "mark" und "measure" Einträgen der User Timing API - die Teil der Performance-Zeitleiste des Browsers sind.

Beacon API

Das Beacon Interface 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 werden Sie asynchron benachrichtigt, wenn interessante Elemente sichtbar werden.

Weitere Dokumentation

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 eingebauten Profiler

Lernen Sie, wie Sie die App-Performance mit dem eingebauten Profiler von Firefox profilieren.

Glossarbegriffe

Siehe auch

HTML

CSS

  • will-change
  • GPU vs CPU
  • Layout-Messung
  • Best Practices für Schriftenladen

JavaScript

APIs

Header

Tools

Zusätzliche Metriken

  • Geschwindigkeitsindex und Wahrnehmungsgeschwindigkeitsindex

Best Practices