Leistung zählt – wir alle wissen es. Aber wissen wir eigentlich, wo genau unsere Leistungsengpässe liegen? Ist es aufwendiges JavaScript, langsame Web-Schrift Auslieferung, schwere Bilder oder träges Rendering? Lohnt es sich, Tree-Shaking, Scope-Hissing, Code-Splitting und all die ausgefallenen Lademuster mit Intersection-Observer, Client-Tipps, CSS-Containment, HTTP / 2 und Service-Worker zu durchdringen? Und vor allem, wo beginnen wir, die Performance zu verbessern und wie schaffen wir langfristig eine Leistungskultur?
Früher war die Performance oft nur ein nachträglicher Einfall. Oft bis zum Ende des Projekts verschoben, würde es auf Minification, Verkettung, Asset-Optimierung und möglicherweise ein paar Feineinstellungen auf der Server-Konfigurationsdatei heruntergekocht. Rückblickend scheinen sich die Dinge ziemlich deutlich verändert zu haben.
Leistung ist nicht nur ein technisches Problem: Es spielt eine Rolle, und wenn sie in den Workflow integriert wird, müssen Designentscheidungen durch ihre Auswirkungen auf die Leistung beeinflusst werden. Die Leistung muss kontinuierlich gemessen, überwacht und verfeinert werden. Die wachsende Komplexität des Internets stellt neue Herausforderungen dar, die es schwer machen, die Metriken im Auge zu behalten, da die Metriken je nach Gerät, Browser, Protokoll, Netzwerktyp und Latenz stark variieren. CDNs, ISPs, Caches, Proxies, Firewalls, Load Balancer und Server spielen eine Rolle bei der Performance.
Wenn wir also einen Überblick über all die Dinge erstellen, die wir bei der Leistungsverbesserung berücksichtigen müssen – von Anfang an bis zur endgültigen Veröffentlichung der Website – wie würde diese Liste aussehen?
Im Folgenden Beitrag stellt Vitaly Friedman (@smashingmag) uns eine – hoffentlich unvoreingenommene und objektive – Checkliste für die Frontend-Leistung für 2018 vor. Sie beinhaltet eine Übersicht der Probleme, die du möglicherweise berücksichtigen müsstest, um sicherzustellen, dass deine Reaktionszeiten schnell sind, die Benutzerinteraktion reibungslos verläuft und deine Websites nicht unnötig die Benutzerbandbreite auffressen.
Einige der Optimierungen könnten über den Rahmen deiner Arbeit oder deines Budgets hinausgehen oder sind angesichts des Legacy-Codes, mit dem du dich befassen müssest, möglicherweise einfach nur übertrieben. Verwende diese Checkliste als allgemeine und umfassende Anleitung und erstelle dir deine eigene Liste von Problemen, die für deinen Kontext gelten. Am wichtigsten ist jedoch, dass du deine eigenen Projekte testest und Messungen durchführst, um Probleme zu identifizieren, bevor du sie optimierst.
Schreibe einen Kommentar