Web Performance Leitfäden

Diese Seite listet Leitfäden für die Web-Performance auf. Sie sollen Ihnen helfen zu verstehen, welche Möglichkeiten es gibt, die Leistung Ihrer Projekte im Web zu verbessern.

Animationsleistung und Bildfrequenz: Animation im Web kann über SVG, JavaScript, einschließlich canvas und WebGL, CSS animation, video, animierte GIFs und sogar animierte PNGs und andere Bildtypen erfolgen. Die Leistungskosten beim Animieren einer CSS-Eigenschaft können von einer Eigenschaft zur anderen variieren, und das Animieren teurer CSS-Eigenschaften kann zu Ruckeln führen, da der Browser Schwierigkeiten hat, eine flüssige Bildfrequenz zu erreichen.
CSS- und JavaScript-Animationsleistung: Animationen sind entscheidend für ein angenehmes Benutzererlebnis in vielen Anwendungen. Es gibt viele Möglichkeiten, Webanimationen zu implementieren, wie z.B. CSS transition/animation oder JavaScript-basierte Animationen (unter Verwendung von requestAnimationFrame()). In diesem Artikel analysieren wir die Leistungsunterschiede zwischen CSS-basierten und JavaScript-basierten Animationen.
Das Befüllen der Seite: wie Browser arbeiten: Benutzer möchten Web-Erlebnisse mit Inhalten, die schnell geladen werden und sich flüssig bedienen lassen. Daher sollte ein Entwickler bestrebt sein, diese beiden Ziele zu erreichen.
Empfohlene Web-Performance-Zeiten: Wie lange ist zu lang?: Es gibt keine klaren, festgelegten Regeln dafür, was ein langsames Tempo beim Laden von Seiten ausmacht, aber es gibt spezifische Richtlinien, die darauf hinweisen, dass Inhalte geladen werden (1 Sekunde), im Leerlauf sind (50ms), Animationen ablaufen (16,7ms) und auf Benutzereingaben reagieren (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 umzuwandeln. 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.
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 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 dazu beiträgt, diese zu verbessern, und welche Werkzeuge und Prozesse Sie nutzen können, um sie zu testen und zu verbessern.
Leistungsüberwachung: RUM vs synthetische Überwachung: Synthetische Überwachung und Real User Monitoring (RUM) sind zwei Ansätze zur Überwachung und Bereitstellung von Einblicken in die Web-Performance. RUM und synthetische Überwachung bieten unterschiedliche Ansichten der Performance und haben jeweils ihre Vorteile, Anwendungsfälle und Schwächen. RUM eignet sich im Allgemeinen am besten zum Verständnis langfristiger Trends, während die synthetische Überwachung sich hervorragend für Regressionstests und das Abmildern kurzfristiger Performanceprobleme während der Entwicklung eignet. In diesem Artikel definieren und vergleichen wir diese beiden Ansätze zur Leistungsüberwachung.
Navigations- und Ressourcentimings: Navigationstiming sind Metriken, die die Navigationsereignisse eines Browsers dokumentieren. Ressourcentiming sind detaillierte Netzwerkzeitmessungen, die das Laden von Ressourcen einer Anwendung betreffen. Beide bieten die gleichen nur lesbaren Eigenschaften, aber Navigationstiming misst die Zeiten des Hauptdokuments, während das Ressourcentiming die Zeiten für alle vom Hauptdokument aufgerufenen Assets oder Ressourcen und die angeforderten Ressourcen dieser Ressourcen bereitstellt.
Optimieren der Startleistung: Die Verbesserung der Startleistung ist oft eine der wertvollsten Leistungsoptimierungen, die vorgenommen werden können. Wie lange benötigt Ihre App zum Starten? Scheint sie das Gerät oder den Browser des Benutzers zu blockieren, während die App lädt? Das bereitet den Nutzern Sorgen, dass Ihre Anwendung abgestürzt ist oder etwas anderes nicht stimmt. Eine gute Benutzererfahrung schließt ein, dass Ihre App schnell geladen wird. 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 ein Limit, 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. Time to Hero Element) oder einen Schwellenwert über einen bestimmten Zeitraum gelten.
Spekulatives Laden: Spekulatives Laden bezieht sich auf die Praxis, Navigationsaktionen (wie DNS-Abfragen, das Abrufen von Ressourcen oder das Rendern von Dokumenten) durchzuführen, bevor die zugehörigen Seiten tatsächlich besucht werden, basierend auf Vorhersagen, welche Seiten der Nutzer wahrscheinlich als nächstes besuchen wird.
Verständnis von Latenz: 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, Ursachen von Latenz zu reduzieren und die Leistung von Websites zu testen, indem man hohe Latenz simuliert, um für Benutzer mit schlechten Verbindungen zu optimieren. Dieser Artikel erklärt, was Latenz ist, wie sie die Leistung beeinflusst, wie man Latenz misst und wie man sie reduziert.
Verwendung von dns-prefetch: DNS-prefetch ist der Versuch, Domain-Namen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, dem ein Benutzer folgen möchte.