Web Performance

Web-Performance bezieht sich auf die objektiven Messungen und die wahrgenommene Benutzererfahrung der Ladezeit und der Laufzeit. Web-Performance ist, wie lange eine Seite benötigt, um zu laden, interaktiv und reaktionsfähig zu werden, und wie flüssig der Inhalt während der Benutzerinteraktionen ist – ist das Scrollen flüssig? Sind Schaltflächen anklickbar? Laden und zeigen sich Pop-ups schnell und animiert sie sich dabei flüssig? Die Web-Performance umfasst sowohl objektive Messungen wie die Ladezeit, Frames pro Sekunde und die Zeit bis zur Interaktivität, als auch subjektive Erlebnisse, wie lange es sich angefühlt hat, bis der Inhalt geladen war.

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

Es gibt Werkzeuge, APIs und bewährte Vorgehensweisen, die uns helfen, die Web-Performance zu messen und zu verbessern. Wir behandeln diese in diesem Abschnitt:

Wichtige Leistungs-Leitfä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.

Befüllen der Seite: Wie Browser funktionieren

Benutzer wünschen sich Web-Erlebnisse mit Inhalt, der schnell geladen wird und flüssig interagiert. Daher sollte ein Entwickler bestrebt sein, diese beiden Ziele 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.

Empfohlene Web-Performance-Zeiten: Wann ist es zu lang?

Es gibt keine klaren Regeln dafür, was als langsames Laden von Seiten gilt, aber es gibt spezifische Richtlinien für das Anzeigen, dass Inhalte geladen werden (1 Sekunde), für das Leerlaufen (50ms), für Animationen (16,7ms) und für das Reagieren 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.

Anfängertutorials

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

Web-Performance: kurze Übersicht

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

Was ist Web-Performance?

Dieser Artikel beginnt das Modul mit einem guten Überblick darüber, was Performance eigentlich ist – dazu gehören die Werkzeuge, Metriken, APIs, Netzwerke und Personengruppen, die wir berücksichtigen müssen, wenn wir über Performance nachdenken, und wie wir Performance in unseren Webentwicklungsworkflow integrieren können.

Wie nehmen Nutzer die Performance wahr?

Wichtiger als die Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Nutzer Ihre Website wahrnehmen. Diese Wahrnehmungen werden durch die tatsächliche Ladezeit der Seite, das Verweilen, die Reaktionsfähigkeit auf Benutzerinteraktionen und die Flüssigkeit des Scrollens und anderer Animationen beeinflusst. In diesem Artikel besprechen wir die verschiedenen Lade-, Animations- und Reaktionsmetriken sowie bewährte Methoden, um die Benutzerwahrnehmung zu verbessern, wenn nicht sogar die eigentlichen Zeiten.

Grundlagen der Web-Performance

Zusätzlich zu den Frontend-Komponenten aus HTML, CSS, JavaScript und Mediendateien gibt es Funktionen, die Anwendungen verlangsamen und Funktionen, die Anwendungen subjektiv und objektiv schneller machen können. Es gibt viele APIs, Entwicklertools, bewährte Vorgehensweisen und schlechte Praktiken in Bezug auf Web-Performance. Hier führen wir viele dieser Funktionen auf Basisebene ein und bieten Links zu ausführlicheren Informationen, um die Performance für jedes Thema zu verbessern.

HTML-Leistungsmerkmale

Einige Attribute und die Reihenfolge der Quellen in Ihrem Markup können die Performance Ihrer Website beeinflussen. Indem Sie die Anzahl der DOM-Knoten minimieren und sicherstellen, dass die beste Reihenfolge und die besten Attribute für die Einbindung von Inhalten wie Styles, Skripten, Medien und Drittanbieter-Skripten verwendet werden, können Sie die Benutzererfahrung drastisch verbessern. Dieser Artikel befasst sich detailliert damit, wie HTML verwendet werden kann, um maximale Performance sicherzustellen.

Multimedia: Bilder und Videos

Das niedrig hängende Obst der Web-Performance ist oft die Medienoptimierung. Es ist möglich, basierend auf den Fähigkeiten, der Größe und der Pixeldichte des User-Agents unterschiedliche Mediendateien zu servieren. Zusätzliche Tipps wie das Entfernen von Audiospuren aus Hintergrundvideos können die Performance noch 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-Leistungsmerkmale

Obwohl CSS eine weniger wichtige Optimierungsfokus für verbesserte Performance sein kann, gibt es einige CSS-Eigenschaften, die Performance mehr beeinflussen als andere. In diesem Artikel werfen wir einen Blick auf einige CSS-Eigenschaften, die die Performance beeinflussen, und schlagen Möglichkeiten vor, wie Stile gehandhabt werden können, um sicherzustellen, dass die Performance nicht negativ beeinflusst wird.

JavaScript-Performance bewährte Praktiken

JavaScript kann, wenn richtig verwendet, interaktive und mitreißende Web-Erfahrungen ermöglichen – oder es kann die Downloadzeit, die Renderzeit, die App-Performance, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel beschreibt einige JavaScript-Praktiken, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so leistungsfähig wie möglich sind.

Verwendung von Performance-APIs

Resource Timing API

Ressourcen laden und Timing des Ladens dieser Ressourcen, einschließlich der Verwaltung des Ressourcenpuffers und der Bewältigung von CORS.

User Timing API

Erstellen Sie anwendungsspezifische Zeitstempel mit den "mark"- und "measure"-Eingangstypen der User Timing API, die Teil der Performance-Zeitleiste 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 messen und asynchron benachrichtigt zu werden, wenn interessante Elemente sichtbar werden.

Weitere Dokumentationen

Firefox Profiler Performance Features

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

Profiling mit dem integrierten Profiler

Lernen Sie, wie Sie die Performance von Apps mit dem integrierten Profiler von Firefox profilieren.

Glossarbegriffe

Siehe auch

HTML

CSS

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

JavaScript

APIs

Header

Werkzeuge

Zusätzliche Metriken

  • Speed Index und Perceptual Speed Index

Best Practices