What is Web Performance?
Web performance is all about making websites fast, including making slow processes seem fast. A good web app gives your users a good first impression of the platform the moment you click on the page. Users don't have a horrendous amount of time just to access a link on your site and as Front end Developers, it's our job to make sure we set that good impression with the design, and load speed.
Today, we'll be looking at different ways to enhance our apps to be web performant regardless of the device it's used on.
Tips for Building Web Apps with Good Performance
1. Minify Images & Videos
This has its benefits in improving web performance, but if the image or video has been compressed to the point that all the videos and images are blurry at first glance or you want to showcase artistic work, then I recommend you don't overuse technologies that offer minification.
Here are some tools I recommend you try out if you're looking to reduce your image and video space:
For Images:
AVIF is a new image file format specification for storing images or image sequences compressed with AV1, which has shown to have a better compression efficiency than JPEG or any other image file format currently available, so if you want to compress your images, do so in that format. Check out this blog for more info on that, and how to use it in your code.
For Videos:
Tools:
- Video compressor by FreeConvert - I've used this tool for years and it has definitely served its purpose, highly recommend you use this as I've found it's easier to use and doesn't require much effort to set up.
- Wondershare video compressor
2. Cache, Cache, Cache
The Cache is a storage mechanism for the web that allows users to store and fetch web resources which greatly reduces network traffic & latency, providing a smooth and excellent user experience with your website.
Fun fact, according to a publication by Thomas M. Kroeger et al, they found that "prefetching could reduce latency by at best 57%, and a combined caching and prefetching proxy could provide at best a 60% latency reduction" which is a significant reduction of load time, and improvement of speed if you ask me.
To learn more about using the Cache, check out these great articles and documentation:
3. Make your website a PWA
A progressive web app is a web app that uses service workers, cacheAPI, and other web technologies to make your website function like a standalone or native app, completely installable, and can be used offline.
According to a test done by Tigren, PWAs first loading time averaged a time as short as 4.5s, and the second was only 1.3s! Content on the webpage appears almost instantaneously!
Some examples of web apps that are PWAs are Twitter, Uber, Pinterest, etc.
To learn more about making your own PWA, check out these links:
Here are also some frameworks that offer a PWA feature:
- React
- Angular
- Vue
- Ionic
4. Reduce the Use of External HTTP Requests and APIs
A significant portion of your app can come from using external APIs to perform specific functions or some extra CSS or plugins. Take your time to examine and eliminate any features you don't need or ones you can just download and load as a file. Another solution is DNS prefetching, which allows the browser to perform DNS lookups in the background while the user browses the current page
To learn more about how to reduce the use of external HTTP requests and APIs, read this
Note: A great way to test the speed of your website is by utilizing Google Lighthouse located in your developer tools, just beside the Security tab to audit for performance, accessibility, progressive web apps, SEO, and more.
Use this tool to your advantage as it can be useful in identifying several flaws with your web app, and listing out possible solutions or steps to them you can take.
Conclusion
A study done by Imperva Incapsula shows that more than half the visitors to your site leave once it takes more than 5 seconds to load. Remember, we're trying to create a good first impression of our web app, and having a web app with good performance is the right step in enhancing that first user experience. Thank you for reading! I hope these tips helped boost your web app's performance! Feel free to ask me any questions in the comments if you have any. 😊