DEV Community

Cover image for The 20% Optimization That Improves 80% Web Performance
Nukala Suraj
Nukala Suraj

Posted on β€’ Edited on

36 7

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
    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,
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 
Enter fullscreen mode Exit fullscreen mode

Shrimkage makes optimizing images in bulk easy

You can use it directly in the terminal [that's what a CLI is tho πŸ˜…]

shrimkage folder
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (2)

Collapse
 
rootz491 profile image
Karan Sharma β€’

Nice pitch man,
and ofc great tool ❀️

Collapse
 
lucidmach profile image
Nukala Suraj β€’

LoL
Pitch...... πŸ˜‚πŸ˜‚πŸ˜‚
❀️

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more