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

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

simple Javascript HTML5 jQuery Form Validation

Formular Validierung hat noch nie Spaß gemacht und meistens beschränke ich die Validierung auf die Server-Seite. Doch bevor man ein Formular per AJAX abschicken will, ist es immer besser auch auf der Client-Seite die Eingaben zu validieren und dem Benutzer ggf. noch darauf hinzuweisen dass nicht alle notwendigen Informationen eingegeben sind, das erspart Frustration.

HTML5 ist dabei eine große Hilfe. Mit dem erweiterten Formularfeld Attribut type, sowie dem pattern und required Attribut übernimmt der Browser die Validierung. Per Javascript reicht dann die Suche nach Formular Elementen die required sind aber einen invalid Status haben:

var $form = $("#emailForm");
if ($form.find(":required:invalid").length === 0) {
  // alle Pflichtfelder validieren

} else {
  // Nicht alle Pflichtfelder validieren
}

Über CSS kann man die Formularfelder auch noch stylen je nachdem ob sie valid oder invalid sind. Wer noch „Nicht-HTML5-Browser“ unterstützten muss, könnte per Modernizr((Modernizr  – the feature detection library for HTML5/CSS3)) eine Weiche schalten und ein Javascript Plugin zur Valdierung nutzen, oder per Progressive Enhancement((Progressive Enhancement – Wikipedia Artikel)) das Formular einfach über die serverseitige Parameter Validierung überprüfen und ausgeben lassen – um die serverseitige Validierung kommt man auch mit der jQuery Zeile von oben nicht drumherum. Frontend Formular Validierung ist und bleibt ein UX-Enrichment((UX Enrichment – Die Bereicherung des Benutzer Erlebnis)).

scrollto infinite (mit jquery)

Ob der Begriff „inifinte scroll“ wirklich Sinn ergibt, sei mal dahin gestellt, aber bei Bings oder Googles Bildersuche hat man schon das Gefühl das es unendlich weitergehen wird.

Es geht darum, dass, sobald der Besucher einen bestimmten Seitenbereich erreicht (erscrollt) hat, automatisch weitere Inhalte geladen und in die Seite eingefügt werden – eine Art „Paginierung 2.0“.

Weiterlesen

Find As You Type / Autocomplete im Eigenbau (jQuery & yii)

Wir sind uns wohl alle einig: Ein Textfeld auf der eigenen Homepage das nach jedem Buchstaben, der eingegeben worden ist, eine aktualisierte Ausgabe erzeugt ist schön!
Google nennt sowas „Google Instant“, wir nennen es jetzt mal „Finde beim tippen“-Funktion oder so.

Als Ausgangssituation nehmen wir an, wir haben eine Datenbank mit beliebigen Inhalt (zB Blog Beiträge) und nun soll mit einem Textfeld der Titel der Blogeinträge durchsucht werden. 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

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.

IE feature: $(‚ie a‘).attr(„href“);

Passend zu meinem vorherigen Post habe ich heute wieder etwas interessantes herausgefunden.

Folgender Quelltext beschreibt die Ausgangssituation:
<a href="#4">4</a>
Mit folgendem jQuery will ich an den Wert des href Attribut ran:
$('a').attr('href');
Manche Browser geben in diesem Fall ‚#4‚ zurück. Der IE6 findet es aber intuitiver direkt den vollen Pfad auszugeben, also: ‚http://www.raoulkramer.de/lirumlarum#4‚ – eigentlich auch ok, man muss es nur wissen.

Weiterlesen