What Fronteers 2019 taught us about UX and performance

Last month, the Little Miss Robot development team headed to the Fronteers conference in Amsterdam. This two-day gathering of front-enders featured more than 18 interesting talks. Of the many speakers who went into detail on performance on the web, Jad Joubran (@JoubranJad) was the one able to summarise the whole conference in a single line: “If you have a great UX, but poor performance, they cancel each other out.” So, let’s take a closer look at why the front-enders of your team are also UX leads in disguise, and which low-hanging fruits we picked to optimise our chances for success in this dual role.

Mandy Michael (@Mandy_Kerr) and Peter Müller (@_munter_) gave us a few tips on how we can easily integrate font optimisation in our workflow. More often than not, a visual design consists of more than six font weights. Reducing the number of weights results into less requested files and, consequently, a faster page load, but doesn’t necessarily benefit the UX. In fact, this is where variable fonts come in handy. When you use a minimum amount of four font weights, you will benefit from choosing a variable font, because you can reduce your total font file size with 65% in this way. As a result, the visual designers can go nuts with highlighting the visual hierarchy while maintaining a fast page load.

Other easy ways to optimise performance and show content faster are preloading fonts and only using a subset of the font. If you use the CSS-property display-font: swap, you can show the user your content, while your fonts are still loading. The property instructs your browser to use a fallback font until the custom font is fully loaded.

Did you know that you can reduce a JPEG file size up to 20% of the original size by aligning the artwork on an 8x8 pixel grid? Crazy, huh? This is, briefly explained, because JPEG divides an image into different pixel blocks. And did you know that when you save a PNG-file with transparent pixels, the “invisible” pixels still contain lots of data? If you make sure that the masked pixels are all the same colour, the image will contain fewer colour data, which results into smaller file sizes.

Those are only two of the many epic, yet surprisingly obvious, image optimisation tricks we learned during Chen Hui Jing’s talk (@hj_chen). Check out the whole talk on Vimeo and get more information on the tips and tricks she provided.

“Don’t copy Facebook, because Facebook is pointless” is what Charlie Owen (@sonniesedge) taught us. With this statement, she pointed out that jumping aboard new technologies just because they are popular is not the way to go. Some sites need a more robust technology since users rely heavily on the website for important reasons such as people’s health or ability to work. Or, as Jad Joubran coined: “It’s not about technology.” The majority of the users don’t know which technology is used, they just want an app that meets their expectations.

A last important takeaway from Fronteers was the idea to work with your constraints and face your difficulties instead of ignoring them. Multiple speakers encouraged us, for example, to think about your app criticality, the diversity of your future users, and the variety of technologies that can or cannot be used. They invited us to show content as fast as possible by implementing all the easy and little tricks that will improve your page load. And, lastly, they also urged us to use progressive enhancement for a better experience and make sure that, unless you plan to launch the new Facebook, your site simply works.

Let’s go over the main learnings again, shall we? There are still tons of quick wins to be discovered when it comes to image optimisation. The same goes for web typography and user experience, for which subtle workflow changes can have a major impact on your website’s loading time. Jad Joubran taught us that the type of technology is less important than the value it brings to the user. Lastly, you will challenge yourself more when you choose to face and work with your constraints instead of simply ignoring them.