This is it, people! It has arrived. The most demanded article of this series! This final and Part 4 of my series on “How I Built the Fastest E-commerce Store for a Home Decor Brand” will solely focus on Web Application Performance Optimization. This article will help you with how to boost the performance of your web application along with some tips and optimization hacks to take it to the next level. If you haven't read previous parts, Here are the links:
1. PART 1
2. PART 2
3. PART 3
I believe this article to be your ultimate go-to guide after you have completed the hard part of application development and now want to make it a faster and smoother experience for your end users.
Various parameters are involved in improving Web App Performance. But before fixing the performance issue, You need to understand the fundamentals of the cause which slows down your app. The following topics are what we will be discussing here.
1. 3 Reasons Why Your App Is Not As Fast As It Should Be
2. How to Actually Improve the Performance of Your Web Application?
Before we start, I would like to let you people know that my next article will be on the “Ultimate list of useful Tools and Resources to boost your Web Application Performance”. It will include everything I have personally used in my quest of building faster web appVisit- https://medium.com/better-programming/the-definitive-guide-to-boosting-your-web-application-performance-2b172574f37f
3 Reasons why your app is not as fast as it should be
1. Bundle Size
Bundle size is a combined size of the production build of your app. It is recommended that the bundle size should be below 644 Kb (Uncompressed). If not 644 Kb you must anyhow try to keep it below 1000 Kb at least.
What Causes High Bundle Size?
Importing Unnecessary modules is the main cause of high bundle size. You should import only the modules you need. Avoid importing the whole package of a CSS library, If you are going to use only button element from that library. Sometimes, even though you have splitted main.js/app.js file into chunks, index.html will still call both of those files increasing page load time. It happened with me, So I suggest you to take a look at your index.html file before deployment.
2. Unoptimized Images
Suppose your app is rendering the same image on a mobile device as well as on a desktop. Desktop due to bigger display needs images with high resolution but that’s not the case with Mobile displays. They require small space to display image, hence it is necessary to lower down image resolution for mobile display. This small tweak can reduce image sizes alone by 30 to 40%. I will be answering how to reduce image size drastically in this article.
3. High Number of Network Requests
A web app is loading content through the HTTP request made to the server. More the requests more will be the time taken to completely render your app. You can investigate this for your app through the Network tab in chrome’s developer tools. Basically, Limit the number of resources that are being transferred on the initial load. Lazy loading routes is a great way to reduce the number of network requests made on the initial load.
How to Actually Improve the Performance of Your Web Application?
1. Code Splitting
Code Splitting is the most effective way to improve web application performance. When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if you can split each route’s components into a separate chunk, and only load them when the route is visited. Lazy loading routes is one popular technique to achieve code splitting. There are different ways to achieve code splitting for each major framework but the fundamental concept is the same.
When only you access examplewebsite.com/0 then and then only CSS, Js, Media content related to 0.html will be called.
Useful Resource- https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
2. Tree Shaking
Do you know what is causing the bundle size of your app to go above 1000 kb? It’s probably the excess of NPM packages you are importing in your main.js! A simple solution to solve this issue is to use ES modules. When you use ES modules, Webpack is able to do tree-shaking. Tree-shaking is when a bundler traverses the whole dependency tree, checks what dependencies are used, and removes unused ones. So, if you use the ES module syntax, Webpack can eliminate the unused code:
Importing a Whole module:
import * as myModule from '/modules/my-module.js';Named Import using ES Modules:
import {myExport} from '/modules/my-module.js'*To use ES6, You must setup babel compiler in your project.
Useful Resource: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
3. Optimize Images
Images have a bad reputation for eating a significant amount of bandwidth. A 50% resource of an average webpage is images. It is painful to see them loading pixel by pixel which gives the indications of a slow and unoptimized website.
How to Optimize Images?
1. Lower down the Image resolution
As you can see, the browser needed an image of only 244 x 86 pixels but had to download a full resolution image resulting in unnecessary bandwidth consumption and slow load. You can serve different images for different screen sizes. This is a great article by Google engineers on how to achieve that!
2. Compress Images
To be honest, It is hard to find a great compression tool. I have crawled the internet for a long time to do just that. Anyways, I will be publishing an article on the Ultimate list of such optimization tools to help you save time and get optimized images.
Squoosh is a great option to compress images. Squoosh is maintained by the Google Web DevRel team, the team that runs developers.google.com/web. If you are on Mac OS X, I would recommend iResize. Currently, I use both of these tools as my primary options to optimize images.
After doing all of this, Make sure to get your app a good service worker. Service workers are useful after the first load only! So first, you have to make it faster on initial load through the above techniques we discussed. Workbox is a great tool by google to implement a service worker in your app. It is easy to configure and can be accessed through CLI.
List of some Bonus Hacks
2. Avoid too much preloading by removing some unnecessary rel= “preload” or rel= “prefetch” present in <link> and <script> tags of your html file.
3. Try delivering the images through CDN and notice if you see any positive difference.
4. Visit https://developers.google.com/web/ for any queries, It will do wonders for you!
In the end, I want to thank all of you wonderful people for your amazing response to this series. Hopefully, We will meet soon through another article and exchange ideas to help the Web Development community grow. Also if you have anything to ask, I will be always available for you on https://twitter.com/SwanandKadam5.
Thank You!