I decided to create this post because I didn’t find a great article that explains the Why and the What of Frontend performance. However, I found detailed tutorials about how to achieve a score of 100% according to different tools. On this post, I’ll be talking about the Frontend performance focusing on the concept and creating a list of things that define an application with the best performance.
The definitions
Let’s start defining what Frontend means. A Frontend Developer can be described as the artist that creates user interfaces. It includes connecting the interface with some APIs (technical skills) and transforming the designs (mix of artists skills and technical skills) into something that the computer can understand. In that way, Frontend is the code that allows users to interact with data.
According to Wikipedia
“Performance engineering encompasses the techniques applied during a systems development lifecycle to ensure the non-functional requirements for performance (such as throughput, latency, or memory usage) will be met.”
In other words, Performance is a group of techniques that ensure the application looks and works correctly every time.
The problem
With all those concepts in place try to answer the following question: What’s the meaning of having a Frontend Application with the best performance?. Let’s think about all the variables that can be improved. Things like image size, improve times on backend responses, code refactoring, animations timing, PWA, lazy loading, web workers, etc. are the first things that you should be aware (The faster the better). But, What about the user’s interactions? Do we have the best user experience in our application?. Thinking about performance, Would the user experience be part of our performance metrics?. What if to give the correct user feedback you need to add delay to the backend response intentionally? (The fastest is not the best). In the following lines, I’ve integrated all these things into a single concept which answers What the Frontend performance mean?.
The actors behind the scene
Let’s start talking about the role of each team member.
The process of understanding the business and discover new features is the product owner’s work. He allows the developer and designer to start thinking on the product and enables new goals. In the performance world, this is important given that he’s the starter point and the decision maker.
To transform the new features in something that can be coded and to understand the user mind is the designer’s work. Talking about performance, the designer can help to improve the time spent by the user trying to understand how the app works. This kind of improvements is known as perceived performance.1
The magic behind the code creation is the developer’s work. On this point, the performance techniques should be precise for the developer team. This kind of improvements is known as the real performance. However, things like first time user interaction, user workflow, time on each page, should be measured and provided to the others team to improve the perceived performance.
The performance culture
If you want to have an application with the best performance, changing the mind set of the team is the first step. As known in the last section, having the best app is not only about technical skills. It includes the definition of new features, the design of the best user experience, the creation of clean code and for sure the technical topics.
Implementing a performance culture on a company means to coordinate all the teams to create not only a real solution for each required feature but create an application centered on the user.
The smooth, not the faster
Think about the following situation:
Scenario 1: A new user logs in and spends 30 seconds in the home screen trying to find the desired functionality. A second user with more than 10 logins spends 5 seconds in the home screen until reaching the desired functionality. Would it be possible to reduce those times?.
Scenario 2: A user starts a process which requires some backend interaction (e.g., payments). After one interaction the server needs to validate some information which will take from 500ms to 1000ms on each petition. Should we try to normalize the time for all the users to 2 seconds after display the correct data? Should be better to have smoother or faster feedback?.For those questions, there are a lot of articles trying to answer it (See google scholar). To summarize, it is possible but there is no formula to achieve it. However, as a Frontend developer, your work can give the correct data to find the best solution.
The technical performance
This article is not about how to get the best score on a particular tool. Although to summarize it, to get the best real performance you should follow some of the recommendations provided by tools like Lighthouse or Gmetrix and use libraries like PerfumeJS to obtain the correct metrics and ensure the best real performance.
On this point, I recomend to review this Frontend checklist before going to production.
As you can see this is only one mainstay and the information on how to achieve this can be easily found googling.
The perceived performance
One of the commons frontend problems is the creation of self-explain apps for any user. It means the creation of apps that not require any manual. You should think that this is the designer’s work but the reality is that the information is the clue to handle this problem. As a frontend developer, you should capture all the desired variables to help designer and product owner to find the best solution.
What should be measured?In the UX world, The are three metrics that must be measured: The effectiveness, efficiency, and satisfaction. Effectiveness refers to the amount of time expended for a user to start a workflow after hit the first view. Efficiency is the time spent to complete any workflow and the number of clicks made. Satisfaction is how the user feels after performing a task.
Other optional metrics could be measured: bounce rate, exit rate for given pages, individual pages views, click through rate, drop off rate, eye tracking, engagement rate (total time in the app) and the number of errors. Different tools help us with this measurement, but you need some code skills to create the reports. The developer’s work is to create this reports and ensure to preserve the correct data for each user.
I’m an Angular developer, to get this data I like how PermufeJS helps you with this task. In another post, I’ll be talking about how to use PermujeJS to measure the above metrics, but at this moment what you need to know is that this process usually consists in the preserve of the user session time and clicks.
In the same way as the last section, there are a lot of articles that you can find to measure this.
Conclusions
- Start by creating a performance culture on the team and defining one general objective. As an example, you should have 10% better performance than other similar apps.
- Define the metrics required by the design team, define a strategy to visualize them and set specific objectives. As an example, you could track the time spend on each page and store all the user’s interaction from login until logout.
- Define one of the performance tools and set specific goals with the developer team. For example: having at least 90% on each lighthouse score.
- With all the metrics in place, start implementing solutions and keep tracking of real and perceived performance.
Thanks for reading, please follow me on Medium and Twitter or send me a connection request on LinkedIn.