Website UX Performance Toolkit / Plain Tweaks

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

  1. Animationen und Übergänge auf einer Webseite mit CSS3 animate oder transition realisieren
  2. absolute und fixed Elemente per transform: translate() animieren, nicht per top, left, right, bottom
  3. Bei Änderungen der Anzeige Art von Elementen (von absolute zu fixed etc) den frei werdenden Platz vorher schon mit padding reservieren
  4. Im Javascript alle DOM-Queries cachen
  5. Javascript Handler delegieren
  6. DOM Elemente selten löschen / hinzufügen
  7. Idealerweise fastdom für DOM Manipulationen benutzen
  8. In teuren Listener wie scroll, mousemove oder resize wenig direkt auf den DOM zugreifen
  9. Teure Listener verlagern
  10. Resize Listener mit absoluter Vorsicht benutzen
  11. will-change oder contains einsetzen
  12. tbc.

weiterlesen

Fullscreen Flyout Menüs / Lightbox und die Scrollbar Breite

Bei Flyouts oder Lightboxen die das Page Scrollen unterbinden

body.overlay {overflow: hidden;}

tritt im Desktop häufig das Problem auf, dass durch die verschwindene Scrollbar alle Inhalte der Seite etwas nach rechts rutschen.

TL;DR

Mit body { width: 100vw; overflow-x: hidden;} nimmt die Seite auch den Platz hinter der Scrollbar ein, während sie bei body { width: 100%; } nur vom linken Rand bis zur Scrollbar dimensioniert ist.

Das liegt daran, dass die Scrollbar z.B. 15px der Seite einnimmt und diese 15px dann freigibt.

Auffällig wird dieses zum Beispiel bei Seiten die ihren Inhalt ab einer gewissen Browserbreite horizontal zentrieren und der Menü Button unter der Maus verrutscht.

Nun hatte ich ein Javascript gefunden, welches mir die Breite der Scrollbar ausgibt, im Linux Chromium die oben genannten 15px, auf Windows Chrome 17px – ungerade Zahlen, im Edge 12px…

Das Javascript im Beitragsbild ist zum großen Teil die Lösung von David Walsh.

weiterlesen

Minigolf Scoreboard UPDATE!

Hallo Freunde,

ich habe den gestrigen Tag genutzt um das Minigolf Scoreboard gründlich zu überarbeiten. Da mein nächstes Projekt höchstwahrscheinlich auch mit dem großartigen Yii Framework umgesetzt wird, wollte ich nochmal mein Wissen auffrischen und habe die Arbeit am Portal wirklich genossen.

Aber was hat sich denn alles geändert?

Aber der Reihe nach. Für die erste Version des Minigolf Scoreboard hatte ich ein Design Namens „Red Music“ gewählt, das auf den ersten Blick ganz niedlich war, mich aber bei jeder Erweiterung zu sehr einschränkte. Daher musste der Anstrich der Seite geändert werden um mehr gestalterische Möglichkeiten zu haben.

Das nun gewählte Thema gefällt mir sehr gut, ich muss lediglich noch ein paar Grafiken erstellen damit es mehr „minigolfiger“ ist.

Das positive an einem neuen Anstrich ist auch, das man Seitenteile wegfallen lassen kann ohne das es jedem direkt auffällt. Ich wollte eigentlich mittels jquery.flot auf der Startseite eine interaktive Grafik erzeugen, aber habe schon Stunden in die Datenaufbereitung gesteckt ohne ein befriedigendes Ergebnis zu erhalten. Das hab ich jetzt wegfallen lassen. Dafür wird immer direkt der letzte Spieltag ausgespielt mit Verlinkungen zu allem und jedem. Die interaktive Tabelle ist natürlich geblieben.

Neben zahlreichen Änderungen unter der Haube sind mir während der Arbeit auch noch weitere Fakten eingefallen die es wert sind ausgespielt zu werden.

So wurde die Auflistung der Spieler wahrlich bereichert als mir die Idee kam alle Asse und Glocken zu zählen und die Spieltage hervorzuheben an denen ein Spieler die meisten Asse oder die meisten Glocken gespielt hat! Das hebt den Wettkampf auf eine völlig neue Stufe ;)

In den nächsten Ausbaustufen will ich mich noch um eine spezielle mobil Version der Seite kümmern, damit sie auf meinem Handy auch schneller und optimaler angezeigt wird. Die Möglichkeiten von CSS3 werden mir dort helfen.