This is especially important if you're trying to build a web based startup.
Having an optimized website could lead to significantly more revenue
Anything on the Web has 3 main components
End of the day it is the network that impacts 80% of a website's performance
So by Pareto's Rule,
We focus on the NETWORK
The network is what connects the frontend to the backend.
Most sites make 100s of requests in the background as the site loads.
If each response carries a lot of data
- The time for the data to reach the client increases
- The time for each resource to render increases
basically the website take forever to load
- Reduce the size of files by
- Sending only what the user (and not the website needs) aka code splitting
If you use webpack, this is automatically done for you
BONUS: You could PWA and cache data on the client [But That Topic Is For Another Blog]
- Reducing the size of images by optimizing them
We don't reduce the size by reducing resolution,
We reduce the size by reducing the scale of colors.
There are libraries that take care of this for us.
However we can't create a program to do this every time for every image so, I created a CLI Tool [My First CLI Application] called
Shirmkage which stands for
You can check out/play around with the source code on my github.
npm install -g shrimkage
Shrimkage makes optimizing images in bulk easy
You can use it directly in the terminal [that's what a CLI is tho 😅]
The default level of reduction is 50 (/100). so if you want more optimization you can
shrimkage folder --level=10
Shimkage also give you the option to apply optimizations to individual images
shrimkage file --path=./test.png
And That is The 20% Effort to gain an 80% increase in web performance
If You ❤️ This,
Follow Me on Twitter,
Where you can see updates on all my work [including blogs]
Also, Don't forget to DM Me
Let's have small dev talk