4 Simple Steps To Drastically Improve Your Web App’s Performance
It is easy to overlook performance while developing an app initially. However, it is one of the most important factors that affect your application’s usability. I have 4 simple steps that I follow to improve my app’s performance in my professional and personal projects. Using these 4 steps, I promise that you will see a major difference in the performance of your application.
1. Limiting Network API Calls
When not properly implemented, network calls are a major bottleneck in any web application. When we talk about performance, most users would weigh more on the time it takes for your application to load something. Your web application would make many API calls to a server for some kind of transaction. Every API call however comes at a cost — time.
So how can you ensure you are not taking more time than necessary. necessary follow this checklist that I use:
1.1 Reduce API Calls
Transferring most of the work to the server for a transaction can save you a lot of time and reduce the number of API calls you would need for a transaction.
Let’s consider an example to understand this better:
Say, you have a clothing app, which depending on the gender, age and size, recommends certain clothes. You have 2 tables in your database, one for the users and the other for all clothes. Now let’s look at a normal API flow for doing this
As you can see, we make 2 API calls here: One for getting user data to get the gender, size, and age of the user and another call for getting clothes meant for the people of that demographic. Assuming, the network call takes 3 ms, it’ll take 6 ms for one of these transactions. (In reality, the API call time for both of these APIs would be very different. This is because the payload would be very different between these two calls. However, for our purposes, this assumption will do.)
We can reduce this by half by creating a new API that takes a user auth token, gets the user data, and based on the data directly fetches the clothes table for the appropriate data. Let’s call this API “RecommendClothes”.
As you can see, by introducing a new API and shifting the work to the server, we reduced the total time required for this transaction by 50%.
You might be wondering, why are we worrying about a 3 ms difference, the user is not going to know the difference. However, in a complex app, there might be a lot of API calls happening together, and using this technique you can make a significant impact giving your app an edge over others.
1.2 Reduce Payload
The payload, meaning the amount of data that is transferred over a single HTTP call, can severely impact your app’s performance.
Let’s say you need to show users’ data on the profile page. Now the profile page might only show the user’s name, age, and picture. However, your API might return the entire row that is in the Users table in your database. This makes a big difference. You might already know, most remote APIs like Firebase, AWS, and Loopback(Now called StrongLoop by IBM) all have filters. Filters can be used to extract only what is needed.
Consider another example where you have a social media app and the user searches for people named ‘Bob’ in the search bar. There might be a thousand users with that name. Assuming, conservatively, the data for one user would be a byte. That is 1000 bytes for the entire search result! So are you going to show the whole result? The answer is simply no because there is a better way. Your app can only show so many users at a time. Say, the screen only shows 10 users at a glance. So one way would be to only fetch the first 15–20 users initially, and pull another 20 as the user scrolls the page/screen. Now, we reduced the payload from 1000 bytes to 20 bytes. Again, filters can be used to do this. We just made your app functioning like a horse cart into a sports car! Hurrah!
2. Optimize Media Elements
It is quite common that media, whether it be an image, a video, or audio, requires the most amount of data in a web app. However, it is the easiest to spot and correct. It also will drastically improve your web app performance with little effort. All three have one thing in common, I call it CCR, which stands for (Compress, Cache, and Resize). Let’s see how we can optimize each media element.
2.1 Optimizing Images
Start with revisiting the images used in your application. Images can be compressed with optimum quality for a given size of the file. I use Image Compressor for open-source images. Another good tool is TinyPNG. In the case of images, it is possible that the image needs to be resized. Depending on the platform your web app is going to run on, builds with different image sizes can be created. The image can then be set using “srcset”, for instance. Lastly, we can cache images, we will see caching in detail later in this article.
2.2 Optimizing Video
For videos, it is extremely important to compress your video and export it into multiple video formats that are supported by HTML5. I use an app called Handbrake to achieve this. If your video is muted, remove the audio from it. You will save a lot of unnecessary space by doing so, hence improving your performance. Next, you can compress your video using an online tool called Free Converter(Allows up to1GB) or Online UniConverter(Allows up to500 MB). There are plenty of other tools online. Next, set the size of the video in your template and finally use cache.
2.3 Optimizing Audio
Optimizing audio is very much like optimizing a video file. Audio needs to be exported into formats supported by HTML5. Ultimately for audio, it comes down to compression. You need to experiment with different compression techniques to see which one suits your app the best in terms of quality vs size. You can use Online Uniconverter again for this purpose. You can finally use preloading to preload your audio. When the preload attribute is set to “auto”, the audio is downloaded as soon as the page loads completely. When the preload attribute is set to “metadata”, only the metadata is loaded when the page loads. By default, the audio file is not loaded when the page loads.
3. Audit Using Chrome Debugger
After finishing your first two steps, you would have already achieved a significant performance increase. Beyond that, you can run a full performance audit on your Web App in Google Chrome using an open-source tool called lighthouse. Lighthouse takes a URL of a web page, runs an audit, and generates a report showing how your page fares in terms of performance and how you can improve it.
For example, let’s see how well the Medium.com webpage does in auditing. So we open the developer tool in chrome and go to the Lighthouse tab and click on “Generate Report”. Lighthouse will then gather information about the page and compute a performance score as shown in the picture below. (You should run Lighthouse in Incognito mode if you have any extensions running.)
Let’s look at the performance report now:
As you can see besides Performance, Lighthouse also generates metrics for other things like Accessibility, Best Practices, SEO, etc. If you want to improve the performance here you can scroll down and check out each factor encompassing the performance score of the app. Let’s say in our example, we need to improve the “Total Blocking Time” i.e TBT. According to Web.dev, you can do the following to improve your TBT score:
1. Reducing/Eliminating unnecessary JavaScript loading, parsing or execution.
2. Removing Inefficient JavaScript statements.
You don’t have to memorize everything, plenty of resources are available that provide instructions on how to improve each metric for performance. The entire list of metrics used by the lighthouse and information about each can be found in web.dev.
4. Better Design
Lastly, you can improve your performance by simply choosing a better design. Have you ever come across certain websites that have so much content on the page that it almost makes you want to break the screen? Maybe not, but you know what websites I am talking about: pop-ups flying everywhere, videos playing without consent, ads popping up here and there. It is a perfect design to lose users and make them hate your product with a passion.
You can use my 3 simple rules when it comes to designing with performance in mind:
4.1 Minimize Content Per Glance
A golden rule is to minimize the content you are showing the user at a time and do the minimum. For instance, in your social media application, you only need to show one post on the screen at a time. This means you only need to fetch a limited amount of content on the screen helping improve your performance by simply designing your app better. The image below is a design of the CRED app, which applies this rule and is one of the best-designed apps to exist. This article by Muskan Raina explains the design of CRED in detail.
4.2 Use Skeleton
This trend is now used with many apps, where you see a skeleton of the content of the page before the page loads completely. When we talk about performance it is crucial that the user feels that your app is fast. This means making your users wait and making them feel it, is a bad idea.
Imagine this, you are in a line and it takes 5 minutes for the line to move forward. But the line moves 10 meters at once. Now compare this with a scenario where the line moves 2 meters every minute. In both cases, in 5 minutes, you are moving 10 meters. However, it feels like you are waiting longer in the first scenario compared to the next. Skeleton solves exactly this issue. It gives the user an impression that content is coming any time now.
This is much better than using a loading circle because it drives the user’s attention to the content that is loading instead of instilling uncertainty.
4.3 Preload and Cache
Take this advice with a grain of salt. You can preload some things on your page when necessary. To execute this step, you need to know how the user would use your app. This is because we are doing work when the workload is minimal against a probability that the user might do a certain thing.
Consider a scenario where the user can comment on a post. Assuming the user would take at least 3 seconds to comment on something, you could use that time to load more content on the home page. The user would comment and scroll down to find the content are loading seamlessly.
Cache data when necessary. This goes for media elements, data structures, and much more. This is extremely useful and a very common technique. You can read all about the Cache API here.
In conclusion, improving the performance of your app is an art. There is a balance between visual and technical design that contributes to your app’s performance. I hope using these 4 steps, you can drastically improve your web app’s performance. Feel free to comment below if it helped you or if you have any questions and I will be more than happy to answer them. Cheers!
I hope you enjoyed this read.
My name is Vishnu Sasidharan and I write technical articles, code, and tell stories. I aim to reduce complex concepts into something simple and explain it in layman’s terms. I also share real-life stories that have inspired me.
If you liked this article you may also like:
This Is Why You Should Switch Over To TypeScript
What is TypeScript anyway?
javascript.plainenglish.io
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
