Nützliche Tutorials, aufschlussreiche Artikel, kreative Inspirationen und kostenlose Ressourcen für Web- und Frontend-Designer.
Checkliste

Frontend-Performance-Checkliste 2018

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.

Anzeige

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.

Frontend-Performance-Checkliste 2018 [PDF, Apple-Seiten]

www.smashingmagazine.com

War dieser Artikel hilfreich? Ja Nein

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

Jederzeit kündbar. Kein Spam!

Designer und WordPress-Enthusiast. Auf pixeltuner.de blogge ich über aktuellste Ressourcen für Web- und Frontend-Designer. Außerdem teile ich über Twitter täglich frische Inhalte zu diesen Themen. Du findest mich auch auf deviantART. PayPal-Kaffeespende.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Newsletter

Frischer Input für Webdesigner. Jeder Abonnent bekommt 50 PSD Device-Mockups und 40 Responsive WordPress-Themes geschenkt.

Jederzeit kündbar. Kein Spam!
Anzeige