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 jank führen, da der Browser Schwierigkeiten hat, eine flüssige FPS zu erreichen.
Auffüllen der Seite: Wie Browser funktionieren: Benutzer wünschen sich Web-Erlebnisse mit Inhalten, die schnell laden und reibungslos zu bedienen sind. Daher sollte ein Entwickler bestrebt sein, diese beiden Ziele 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.
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. Dies ist eine Möglichkeit, die Länge des kritischen Rendering-Pfads zu verkürzen, was zu reduzierten Ladezeiten für Seiten führt.
Leistungsbudgets: Ein Leistungsbudget ist ein Limit, um Rückschritte zu verhindern. 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. Time to Hero Element) oder ein Schwellenwert über einen bestimmten Zeitraum gelten.
Leistungsgrundlagen: Leistung bedeutet Effizienz. Im Kontext von Open Web Apps erklärt dieses Dokument allgemein, was Leistung ist, wie die Browserplattform hilft, diese zu verbessern, und welche Werkzeuge und Prozesse Sie verwenden 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.
Optimierung der Startleistung: Die Verbesserung Ihrer Startleistung ist oft eine der wertvollsten Leistungsoptimierungen, die vorgenommen werden können. Wie lange dauert es, bis Ihre App startet? Blockiert sie scheinbar das Gerät oder den Browser des Benutzers, während die App lädt? Das sorgt dafür, dass Nutzer befürchten, Ihre Anwendung sei abgestürzt oder dass etwas anderes nicht stimmt. Eine gute Benutzererfahrung umfasst, dass Ihre App schnell lädt. Dieser Artikel bietet Leistungstipps und Vorschläge sowohl für das Schreiben neuer Anwendungen als auch für die Portierung von Anwendungen auf das Web von anderen Plattformen.
Spekulatives Laden: Spekulatives Laden bezeichnet die Praxis, Navigationsaktionen (wie DNS-Abrufe, 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 Benutzer als nächstes wahrscheinlich 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.
Verwenden von dns-prefetch: DNS-prefetch ist ein Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, dem ein Benutzer folgen möchte.