--- title: Performance matters at Fronteers spring conference description: A short resume of a full day of interesting talks about web performance. language: English url: 'https://voorhoe.de/en/blog/performance-matters-at-fronteers-spring-conference/' --- Blog # Performance matters at Fronteers spring conference By [Tjerk](/en/team/tjerk.md) 15 April 2016 ## Categories * [Web performance](/en/blog/tag/web-performance.md) - [Visual performance](#visual-performance) - [Accessible performance](#accessible-performance) - [Technical Performance](#technical-performance) - [Performance in the real world](#performance-in-the-real-world) - [Conclusion](#conclusion) Fronteers, the Dutch association of front-end developers, organised the first Fronteers Spring Conference at the beautiful Eye Film Museum in Amsterdam. ![A woman and two men smiling into a camera all wearing sunglasses](https://www.datocms-assets.com/2651/1501064761-fronteers-spring-conf_voorhoede.jpg) Selfie at fronteers Fronteers conferences have the reputation of being one of the best about front-end development, so we could not skip this edition. The main topic was web performance. This was divided into 3 smaller topics:**visual**,**accessible**and**technical performance**. Every topic had 3 speakers with 20-minute talks each, and an interactive panel discussion afterwards. Some interesting things we heard that day: ## Visual performance **[Tobias Ahlin](https://twitter.com/tobiasahlin)** talked about the performance of CSS animations. His advice: you should only animate using CSS `transform` , `opacity` and `filter` . These properties are hardware accelerated which greatly improves performance. So if for instance you want to animate an element’s shadow, use pseudo elements that you animate using `opacity`, instead of animating `box-shadow` on the element itself. See example below: ![Example of 2 types of shadow animations](https://www.datocms-assets.com/6524/1541776964-fronteers-spring-confanimate-shadow.gif) Example of 2 types of shadow animations *Setting up the homepage with drag and drop* ![difference in number of paints by the browser for animation box-shadow or animating a pseudo-element](https://www.datocms-assets.com/2651/1501064793-fronteers-spring-conf_shadow-paint.jpg) difference in number of paints by the browser for animation box-shadow or animating a pseudo-element *Difference in number of paints by the browser for animation box-shadow or animating a pseudo-element difference in number of paints by the browser for animation box-shadow or animating a pseudo-element* As a rule of thumb: **animate objects, not properties**. ## Accessible performance This block was mostly about progressive enhancement. With the use of native HTML inputs that can be enhanced with JavaScript you not only get a website that is super fast, your website is also more accessible. If you can’t use native HTML inputs, always put the right aria roles on your elements. That way, screenreaders can make sense of it. A great example from**[Estelle Weyl](https://twitter.com/estellevw)**was about how you can**tap into new markets with a fast website**. Youtube developers made a 100kb size clone (instead of the normal 1200kb) called Youtube Feather. The result was that they had a lot more traffic coming from regions with low bandwidth internet, such as the African continent and India. ## Technical Performance Websites can be a lot faster with HTTP/2, the next version of the HTTP protocol. **[Tobias Baldauf](https://twitter.com/tbaldaufhttps://twitter.com/tbaldauf)** summarised the differences nicely in the following slide: ![Difference between HTTP/1 and HTTP/2](https://www.datocms-assets.com/2651/1501064833-fronteers-spring-conf_http1vs2.jpg) Difference between HTTP/1 and HTTP/2 *Difference between HTTP/1 and HTTP/2, photo by Jeroen Tjepkema* Tobias also held an impressive[talk](https://speakerdeck.com/tbaldauf/your-hero-images-need-you-save-the-day-with-http2-image-loading)about a new way to**optimise the perceived loading speed of images with 6%**. He did that by adjusting the scan level configuration of progressive JPG’s. The technique is not ready for production yet, but keep an eye on his[blog](http://tobias.is/blog/). **[Mathias Bynens](https://twitter.com/mathias)**blew our minds with his[talk](https://speakerdeck.com/mathiasbynens/front-end-performance-the-dark-side-at-fronteers-spring-conference-2016)on the drawbacks of using the browser’s performance measuring tools for end-users. He showed a**timing attack technique**, in which you can time how fast a page loads for an user by using the`img`or`video`element’s`src`attribute. Once you have this benchmark, you can tell if users have admin rights for certain sites, for instance. But you can also extract all kinds of demographic information by (mis)using Facebook. Very impressive and at the same time very scary because there is no real solution for this problem yet. ![Man standing in front of a screen with code on it](https://www.datocms-assets.com/2651/1501064860-fronteers-spring-conf_mathias.jpg) Mathias talking @ Fronteers spring conf *Mathias talking, photo by Peter Peerdeman* ## Performance in the real world The closing [talk](http://de.slideshare.net/kskoeld/fronteers-spring-conference-amsterdam-2016-keynote) was from [Kristian Skold](https://twitter.com/kskoeld). Even if we want to bring all these performance improvements into practice, a client might not give you budget to build these things. How do you **convince clients of web performance benefits** to their business? Well, tell them what it does for their **bounce rate, conversion rate, order value and session length**. Use their current data and plot it against data that predicts the increase in these statistics when their website loads a second faster. Start with small improvements and compare after a month. Once they see the effects and start feeling it in their pocket, they’re bound to give you the go-ahead on more drastic performance enhancements. ## Conclusion We really enjoyed this new edition of Fronteers Conference. The short talks ensured that they where focused and gave you a lot of information about different subjects in a short time. We already look forward to attending [the next conference](https://fronteers.nl/congres) in theater Pathé Tuschinski this fall! ## Related blog posts * ### [Reclaiming Digital Sovereignty on European Infrastructure](/en/blog/reclaiming-digital-sovereignty-on-european-infrastructure.md) 29 Jan 2026 By Luuk * ### [How close to the user should your code be?](/en/blog/how-close-to-the-user-should-your-code-be.md) 30 Oct 2025 By Jasper * ### [Lessons learned debugging Interaction to Next Paint (INP)](/en/blog/lessons-learned-debugging-inp.md) 16 Aug 2024 By Declan [← All blog posts](/en/blog.md) [Return to top](#top)