The 20% Optimization That Improves 80% Web Performance

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

1. FrontEnd
2. BackEnd
3. 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

1. The time for the data to reach the client increases
2. The time for each resource to render increases

basically the website take forever to load

Solution

1. Reduce the size of files by
   1. Sending only what the user (and not the website needs) aka code splitting
   2. Removing whitespaces or uglifying the 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]

1. 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
😁✌