In today's ultra fast paced world,
3 Seconds of a not-yet-loaded-website is more than enough for the user to click that close button
This is especially important if you're trying to build a web based startup.
Having an optimized website could lead to significantly more revenue
Components of a WebSite
Anything on the Web has 3 main components
- FrontEnd
- BackEnd
- Network
No Matter How Optimized the backend is (a common huge mistake kinda π
)
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
Solution
- Reduce the size of files by
- Sending only what the user (and not the website needs) aka code splitting
- Removing
whitespacesoruglifyingthe file
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
Reducing the size of images by optimizing them
What does this mean?
We don't reduce the size by reducing resolution,
We reduce the size by reducing the scale of colors.
Let me explain,
The human eye can't distinguish between #000000 and #010101.
So when we optimize images we're reducing the bits used to store color data of pixels
How do we do that?
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 shrink + image.
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 π
]
shrimkage folder
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
πβ
Top comments (2)
Nice pitch man,
and ofc great tool β€οΈ
LoL
Pitch...... πππ
β€οΈ