Fronteers Spring Conference

Usually the Fronteers Conference is held in october each year. This year there was an extra conference, called the Fronteers Spring Conference. Here’s the takeaways I made for myself!

Last year the Fronteers organisation announced a conference in spring 2016, they called it a ‘Spring Thing’. Some time passed, and more became clear of what this ‘Spring Thing’ was going to be: a one day conference with 20 minute talks on web performance. Being a member of Fronteers and fan of the Fronteers Conferences it was obvious I needed to be there.

My takeaways from the Fronteers Spring Conference 2016

So, at the 1st of april, I went to the Amsterdam Film museum & space ship: EYE.

I’ve had a great day, and as with all conferences I attend I make some notes for myself. I’ve shared my Fronteers Conference 2015 takeaways last year, and I’m doing it again with the Fronteers Spring Conference because of the positive reactions. So, here we go!

• When your CSS animations are time critical, for example if they wait for each other, use javascript for the timings. In some browsers, CSS timing are executed as a guideline rather than an exact value causing weird overlaps in some animations.
• To animate any property, extract properties to a new object (for example a pseudo element), and animate that object.
• Use 'will-change' to prepare the browser for an animation. This may increase the page's responsiveness. Use sparingly!
• You can compare HTTP 1 and HTTP 2 by using an image of candy.
• CSS 'font-display' can be used for controlling how a web font renders before it is fully loaded. Could be very useful in performance optimizations!
• Only webfonts actually used are downloaded by the browser, you could use that to your advantage by setting classes when webfont loading is done.
• A website with data on support for typography on the web: stateofwebtype.com
• Access the accessibility tree in Chrome by visiting chrome://accessibility
• "Use as many browser defaults as possible. Everything you customize has to be sent over the wire"
• "Tell your users what the hell is going on", for example by using the Aria Live arttribute.
• Custom UI elements are bad for accessibility. Nice example on what could happen when not using the default html elements: Custom UI Widget Accessibility Problems. I've had some discussion with the design department about this already, but never showed them this video. If this won't convince them forever I don't know what else to do!
• Web performance is important because speed sells. Example of improvement with Firefox downloads: when the download page was 2.2 seconds faster, the number of downloads increased by 15%.
• "Images currently make up 64% of page size, according to HTTP Archive". (More HTTP Archive stats).
• Check out so called 'Timing attacks' and Sniffly. It's a simple way to invade the privacy of users. Web browsers make a serious effort hiding previously visited websites to the websites you visit, I was amazed by the ease this method circumvents the browser's efforts by simply comparing page load times. Slides with more info: mths.be/bvc

Conclusion

I had a great day: saw some old colleagues, learned stuff, drank beer in the sun. I liked the shorter 20 minute duration because it crammed a lot of information in only a day. That being said, I like in-depth talks too, and I felt 20 minutes was too short for that.

The hashtag for this event was ‘#fronteers’, check if out for tweets and links to all presentations.