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

critical css gulp workflow für eine bessere Benutzer Erfahrung

Wenn es um den Kritischen Rendering Pfad geht, ist das Ziel, dass insbesondere mobile Browser sehr schnell mit dem Rendering der Website anfangen können. Dem Besucher kommt die Reaktion der Website dann schneller vor, als wenn der Browser erst das gesamte CSS lädt und danach die Website rendert. Gerade bei Verbindungen jenseits von LTE, ist ein Render blockender Abruf von CSS, Webfonts, JS ein wahrer Dämpfer des Seitenaufbaus.

Irgendwann im Laufe der Zeit stellte das Web zum Beispiel fest, dass Javascript gar nicht im <head> geladen werden muss, sondern es völlig ausreicht das meiste Javascript vor dem </body> einzubinden. Bis dahin darf der Browser den DOM und das CSSOM erstellen.

Dank Google Pagespeed oder dem schickeren TestMySite rückt jetzt das CSSOM in den Fokus des Rendering.

Weiterlesen

Nachtrag: Mobile Web Performance Optimierung

Vor kurzem hatte ich das Chromium Device Mode Tool((Chromium Device Mode – Ähnlich wie die Firefox Responsive Design View bietet Chromium (oder Google Chrome) seit Version 38 ein leistungsfähigeres Werkzeug an. Neben mehr Geräteprofilen und der Auswertung des mobile viewport gibt es ein Killer Feature, nämlich das die Simulation von Netzwerkverbindungen wie WiFi, 3G,EDGE,GPRS einfach möglich ist.)) wieder entdeckt und ausführlich getestet((mobile web performance optimization mit chromium responsive design view)).

Die Einsparung war mit kleinen Handgriffen direkt enorm, aber ein paar Ideen hatte ich noch, denen ich in diesem Artikel nachgehen werde.

Als Ausblick sei genannt Grunt((Grunt – Der Javascript Task Runner)), SVG((SVG – Scalable Vector Graphic; Ein verlustfrei skalierbares Grafikformat)), Minifizierung((Minifizierung – Entfernen aller nicht notwendigen Zeichen in einer Javascript- oder CSS Datei)), Uglifizierung((Uglifizierung – Ersetzung von Variablen- und Funktionsnamen um einerseits die Datei noch kleiner zu bekommen, anderseits die Lesbarkeit zu erschweren)) und SVG-Sprites((Sprites – im allgemeinen fasst man mit Sprites mehrere Grafiken in einer Datei zusammen, damit diese nur ein mal geladen werden muss und somit den Seitenaufbau beschleunigt)). Weiterlesen

mobile Web Performance Optimization mit Chromiums 38 Responsive Design View

Der Titel ist ein ziemlicher Buzzword Dump, hält aber was er verspricht.

TL;DR

Mit Hilfe der Responsive Design View im Chromium((Responsive Design Mode – Ein Werkzeug welches verschiedene Geräteprofile und Netzverbindungen simulieren kann)) 38, konnte ich schnell Flaschenhälse auf einer Seite erkennen und mit kleinen Handgriffen beheben.

Neben einer kleinen Theorie-Runde gibt es weiter unten die Messwerte vor und nach der Optimierung, Verbesserungen um 66% sind drin!

und los…

Bis gestern habe ich immer das Firefox Responsive Design View genutzt. Das äquivalente Tool im Chromium war mir bekannt, aber ich fand es nicht so intuitiv wie beim Firefox.

Der Ansatz im Firefox war einfach direkter, allerdings muss man als Anwender das Device Pixel Ratio((Device Pixel Ratio – Hierbei weicht die native Auflösung eines Displays, zum Beispiel Full HD (1920×1080), von der im Gerätebrowser verfügbaren um einen bestimmten Faktor ab)) Konzept verstanden haben und die meta name="viewport" Angabe nicht vergessen.
Weiterlesen

Meine mobile Webseite ist langsam…

Ich wollte eigentlich „Deine mobile Webseite ist langsam…“ schreiben, aber das wäre gemein und vielleicht sogar falsch – und so stimmt der Betreff immerhin.

Bisher habe ich mich immer auf die „Responsive Alles Könner Rahmenwerke“ verlassen wie zum Beispiel Foundation oder Bootstrap und während man damit eine Seite entwickelt sitzt man im Büro, zu Hause oder sonstwo und hat Kabel-LAN, Kabellos-LAN, LTE oder HSDPA am Smartphone und schaut sich immer über diese Breitbänder die eigene Arbeit an.

Es hallt noch durch die Räume dass man vor dem Start der Umsetzung gesagt hat „Man müsse auf niedrig sowie hoch aufgelöste Displays achten“ aber diese Aussage hat man falsch verstanden, oder falsch gemeint.

Weiterlesen

„lazy load“ vom facebook cdn

Obwohl Facebook ein CDN bietet, wartet man (der Browser) häufig lange auf Facebook Javascripts oder CSS Dateien… Manchmal bis zu 10 Sekunden oder länger und in dieser Zeit denkt der Seitenbesucher das die Seite „langsam“ ist, also langsam ausgeliefert wird.

Wenn wir Yahoos und Googles Seiten Optmierungen vollendet haben, haben wir zwar alle <script>-tags vor Ende des </body>-tags gesetzt, aber wenn Facebook nur langsam seine Daten ausliefert, dreht sich oben im Browser noch die Spinner Grafik und manchmal verzögern sich dadurch massiv weitere JavaScript Ausführungen.

Weiterlesen

Nutze die Power von mySQL [Nachtrag]

Ich hatte über eine Methode zur Auslagerung von ZMS Inhalten in mySQL geschrieben und mittlerweile habe ich noch folgende Änderungen an diesem Ansatz vorgenommen und ich unterstreiche weiterhin das ich kein Profi in Sachen ZMS bin.

Ich habe Herrn Dr. Frank Hoffmann gefragt ob es weitere Eventhooks gibt, die den kompletten Lebenszyklus eines Objektes im ZMS abbilden und an die man „sich“ hängen kann und – obwohl ich selber im ZMS Quelltext hätte suchen können – hat er mir alle verfügbaren Events aufgelistet. Weiterlesen

Nutze die Power von mySQL

Vorneweg: Ich bin kein Profi bei der Arbeit mit ZOPE/ZMS, aber bei einem aktuellen Projekt wurde mir aufgetragen die dramatische Performance einer ZOPE/ZMS Anwendung zu verbessern.

Als Ausgangsszenario dient eine ZOPE/ZMS Umgebung, die mittels ZEO über 8 ZMS Client auf einer physikalischen Maschine verfügt. Die Idee dahinter ist, das jeder Python Prozess einen CPU Kern nutzen kann / soll.

Die Anwendung hat in verschiedenen Knoten teilweise bis zu 200 Kindknoten und mit allen Knoten addiert kommt das Projekt auf über 1800 Knoten. Anscheinend ist ZOPE/ZMS nicht auf solche Ausmaße ausgelegt, da die Generierung einzelner Seiten bis zu 40 Sekunden in Anspruch nahm.

Weiterlesen