UX Performance betrifft ein gesamtes Projekt – vom HTML, CSS und Javascript über den Browser bis zum Besucher der Webseite. Neben der schnellen Auslieferung einer Website (HTTP2, Komprimierung, Minifizierung, Above The Fold / Critical CSS, Caching Header und und und) steht und fällt die Benutzer Erfahrung (das UX – User Experience), sozusagen das Gefühl wenn man die Seite nutzt, mit der Art und Weise wie flüssig ein Browser eine Seite dauerhaft darstellen kann.
Optimierungen an der gefühlten Performance sind im Nachhinein immer schwieriger, als wenn man direkt bei der Implementierung alle Stellschrauben im Blick hat. Die folgende Liste gibt ein paar Anhaltspunkte auf die man achten kann, während der Umsetzung eines Webprojektes.
Die Liste geht bis auf wenige Ausnahmen nicht auf Bibliotheken oder Frameworks ein, sondern auf Frontend Plain-Tweaks
, also ein Teil der Werkzeugkiste die man im Hinterkopf haben sollte, ohne npm, bower und co.
TL;DR
- Animationen und Übergänge auf einer Webseite mit CSS3
animate
odertransition
realisierenabsolute
undfixed
Elemente pertransform: translate()
animieren, nicht pertop, left, right, bottom
- Bei Änderungen der Anzeige Art von Elementen (von
absolute
zufixed
etc) den frei werdenden Platz vorher schon mitpadding
reservieren- Im Javascript alle DOM-Queries cachen
- Javascript
Handler
delegieren- DOM Elemente selten löschen / hinzufügen
- Idealerweise fastdom für DOM Manipulationen benutzen
- In teuren Listener wie
scroll
,mousemove
oderresize
wenig direkt auf den DOM zugreifen- Teure Listener verlagern
- Resize Listener mit absoluter Vorsicht benutzen
will-change
odercontains
einsetzentbc.