Martin Garrix
Connecting a world-class music artist with his fans through an unforgettable website
Performance is important for any kind of online experience. Whether you are using the newest iPhone or still rocking an older generation Samsung; wherever in the world you might be, the experience should look and feel solid. Maintaining good performance metrics can be challenging. There isn’t always one right answer, or a set of tasks you should always follow. Although there are good indications of actions you can take, a good performance metric is never guaranteed. We have written a Guidelines document we use within the team so everyone is on top of their game when it comes to this subject matter so we thought: why not share it with the world?
Our relevant performance metric projects
Some performance metric methods we use
We have three main methods that help us improve our performance metrics go from zero to a hundred, real quick:
Bundle size
A website is built up out of small modules and components with pieces of code that will be turned into a bundle of files. A big step you could take to improve your performance metrics is bundle optimization. [Bundlephobia](https://https://bundlephobia.com/) is a good website that helps you identify which bundles you’re using and if there is a smaller, more efficient alternative.
Lazy loading
Lazy Loading means that a webbrowser doesn’t load in some elements of a page until it becomes visible in a users viewport on their device. Or in other words; until you scroll past it and is relevant. This saves the webbrowser trying to load all of the website’s content at once the minute a user enters the page. So we call it lazy, but in fact it’s just practical use of time.
CSS over JS
Animations can be the real cherry on top for an engaging and fun experience. But if they stutter or simply don’t work as they should, the experience simply fails. CSS is much easier and more basic when it comes to web page formatting and designing. There is more scope for Optimization in the case of CSS. JavaScript does not support these types of optimizations because it does not have access to those APIs.
Read more of our thoughts on Development
Watch the core web vitals
We use a set of standard best practices on how to work towards a website with a good, clean performance score. One of them is always keeping an eye on the core web vitals: Each core web vital represents a part of the online user experience that matters the most. And the best part about it is that it’s open source, so everyone can use it.
Alleviate your users’ processors
Another way to improve performance metrics are Web Workers. Web Workers help in making use of multi-core processors efficiently. Think of it as a highway: if there are only two lanes, cars will pile up and cause a traffic jam. If you expand the highway to four, or maybe six lanes, traffic can flow a lot more organically.
Ensuring you have a fast website is key to delivering a good user experience. Not only is it a win for your user experience, it’ll also definitely drive your conversion rates up.
Zoey Frisart
Developer
Main takeaways
Use the correct tools.
Make sure you have guidelines in order for everyone on the team to be on the same page.
Performance metrics make or break your website, don’t underestimate it.
Performance metrics is a skill: you’ll need someone who knows what to look for (Did we mention that’s us?).
