Er werden in totaal 9 korte talks van 20 minuten gehouden, in drie verschillende blokken: Visual Performance, Accessible Performance en Technical Performance.
De volgende punten zijn mij het meest bijgebleven:
- Als de timing van CSS animaties belangrijk is, animeer dan met javascript, niet met CSS. Sommige browsers (o.a. Safari) hebben issues met de timing van CSS animaties.
- “Animate objects, not properties.” Dus animeer niet de property
left, maar animeer mettranslateX. De enige properties die goed animeerbaar zijn, zijnopacity,transformenfilter. - Gebruik
will-changeom de browser te vertellen dat er iets met de GPU geanimeerd gaat worden, maar gebruik dit met mate. - “It doesn’t matter how fast a site is, it matters how fast a site feels.” Dit kan door bijvoorbeeld. alvast een video af te spelen tijdens het laden (wat Youtube bijvoorbeeld doet), of het ‘pretend to work’-principe aan te houden (wat Instagram bijvoorbeeld doet: de ‘like’-knop werkt altijd, ongeacht of er een netwerkverbinding is).
- Met de (nu nog) experimentele CSS property
font-displayis het mogelijk om het laden van fonts te beïnvloeden. Door bijvoorbeeldfont-display: fallbackte gebruiken wordt het font alleen getoond als het binnen een bepaalde tijd is geladen, anders niet. Hierdoor wordt een FOUT (Flash Of Unstyled Text) of FOIT (Flash Of Invisible Text) voorkomen. - Moderne browsers verbergen de tekst totdat het webfont is geladen, of tonen de tekst na 3 seconden in een fallback font. Deze timeout is bij Safari echter oneindig lang, waardoor het mogelijk is dat een gebruiker oneindig naar een wit scherm zit te staren, en de website onbruikbaar wordt. Beter is dus om fonts met javascript in te laden, en na het laden een class op de
<body>te zetten. - Het verschil tussen HTTP en HTTP2 is als volgt weer te geven:
![HTTP vs HTTP2]( "HTTP vs HTTP2")
- “Use as many browser defaults as possible. Everything you customize has to be sent over the wire.” Ga dus niet dropdowns nabouwen met javascript, daar ontstaan naast de extra bandbreedte die gebruikt wordt ook accessibilityproblemen door die haarfijn in deze video worden getoond.
- In Chrome is op chrome://accessibility is de gehele accessibility tree te zien, een lijst van alle objecten die geraakt worden door HTML, CSS en Javascript.
- Het attribuut
aria-live="assertive"op een element zorgt ervoor dat de content in dit element zo gauw deze verandert direct door screen readers wordt voorgelezen. Hierdoor is het mogelijk om bijv. nadat een AJAX-request klaar is, gelijk de opgehaalde content voor te lezen. - Web Performance is belangrijk, omdat speed sells. Walmart behaalde 2% meer conversie door een snelheidswinst van 1 seconde, en Firefox had 15% meer downloads na een snelheidswinst van 2.2 seconden op hun downloadpagina.
- Let op ‘Timing Attacks’ , een manier om bepaalde (privacy-gevoelige) informatie te verkrijgen door te meten hoe lang iets duurt. Je kunt bijvoorbeeld achterhalen of een gebruiker is ingelogd op een bepaalde site door het verschil in responstijd te meten tussen de inlogpagina en het dashboard van die website.
Terugkijkend was Fronteers Spring Conference een geslaagde conferentie: het format met de korte talks vond ik verfrissend, de onderwerpen waren grotendeels aansprekend en ik heb een aantal nieuwe dingen geleerd die direct toepasbaar zijn in de dagelijkse praktijk.