Fronteers Spring Conference: de vijf learnings

-

Vrijdag 1 april organiseerde Fronteers weer een conferentie voor de front-end vakmensen. Het podium was dit keer het EYE-theater in Amsterdam. Het thema: web performance. Wij waren er bij en sommen voor jou de vijf interessantste punten op die je mogelijk nog niet wist.

Fronteers Spring Conference

Gebruik de juiste properties voor CSS-animaties

Je kunt op veel verschillende manieren met CSS-properties animeren, maar slechts een handvol gebruiken hardware acceleration en presteren daarmee een stuk beter in de browser: opacity, filter en transform. Wil je een achtergrond animeren? Plaats dan liever een extra (pseudo-)element over je doelwit en gebruik hierop een opacity-animatie. Box-shadow animeren? Zelfde techniek. Width en height? Gebruik transform: scaleX en scaleY waar mogelijk. Left, top, right, bottom? transform: translateX en translateY zijn je vrienden.

Ervaren performance is belangrijker dan daadwerkelijke performance

Paul Bakaus ondersteunt met bevindingen in psychologie dat we tijd heel subjectief ervaren. Performance meten in seconden zegt dus niet alles. Je kunt een wachttijd bijvoorbeeld gevoelsmatig verkorten door een animatie te gebruiken of de gebruiker al te doen geloven dat de taak klaar is voordat het moment daar daadwerkelijk is. Soms kun je juist beter extra wachttijd introduceren om de geloofwaardigheid van het resultaat te vergroten, bijvoorbeeld bij een complexe zoekopdracht.

Optimaliseer voor screen readers

Iedereen snapt dat ook blinden en slechtzienden het internet gebruiken, maar hoe bereid je je website hier op voor? Semantische HTML en het volgen van standaarden is hierin cruciaal. Gebruik waar mogelijk native controls, zoals bij select boxen, in plaats van maatwerk UI-elementen. Screen readers houden een extra tree view bij vol accessibility-informatie. Het manipuleren van de DOM heeft in zo’n geval dubbel impact op performance.

HTTP/2 is supersnel: gebruik het nu

Het nieuwe HTTP/2 protocol ondersteunt meerdere requests per connectie (multiplexing) wat het asynchroon laden van resources drastisch versnelt. Browser support ligt rond de 75% en het protocol is backwards compatible met HTTP/1.1. Upgrade je servers en gebruikers van oudere browsers kunnen zonder extra effort gewoon je website blijven gebruiken. HTTP/2 betekent het einde van ouderwetse performance best practices en een introductie van nieuwe. Let wel op: de grote browsers hebben gekozen om HTTP/2 alleen over TLS te ondersteunen.

Performance kan in je nadeel werken

Hackers kunnen zogenaamde timing attacks op je website uitvoeren. Door twee operaties op je website uit te voeren (bijvoorbeeld twee gelijksoortige requests) kan men het verschil in performance meten en daar privacygevoelige informatie uit winnen. Zo kan een website requests doen naar sociale netwerksites en aan de grootte van de response body aflezen of je er bent ingelogd. Op soortgelijke manieren kan Facebook-informatie achterhaald worden, bijvoorbeeld of je met een bepaalde persoon bevriend bent.

De boodschap hierin is: wees je er van bewust en bedenk wat je er tegen kunt of zou moeten doen.