Ziro2Mach dream it... build it!


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 3 secs

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

Components 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 pareto So by Pareto’s Rule, We focus on the NETWORK 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

Network

  1. Reduce the size of files by
  2. Sending only what the user (and not the website needs) aka code splitting
  3. 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, demo 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 😁✌


untill next time !️ ✌

or you could spot me in the wild 🤭 i mean instagram, twitter, linkedin and maybe even youtube where i excalidraw those diagrams