logo

20 % optimering som förbättrar 80 % webbprestanda

I dagens extremt snabba värld,
3 sekunder av en ännu inte laddad webbplats är mer än tillräckligt för att användaren ska klicka på den där stängningsknappen

Detta är särskilt viktigt om du försöker bygga en webbaserad startup.
Att ha en optimerad webbplats kan leda till betydligt mer intäkter

Komponenter på en webbplats

Allt på webben har tre huvudkomponenter

  1. Frontend
  2. Bakslut
  3. Nätverk


Oavsett hur optimerad backend-enheten är (ett vanligt stort misstag typ 😅)

Slutet av dagen är det nätverket som påverkar 80 % av en webbplatss prestanda

Så enligt Paretos regel,
Vi fokuserar på NÄTVERKET
Nätverket är det som ansluter gränssnittet till backend .
De flesta webbplatser gör 100-tals förfrågningar i bakgrunden när webbplatsen laddas.

Om varje svar innehåller mycket data

  1. Tiden för data att nå klienten ökar
  2. Tiden för varje resurs att rendera ökar

basically the website take forever to load

Lösning

  1. Minska storleken på filerna med
    1. Sänder bara det som användaren (och inte webbplatsen behöver) aka koddelning
    2. Tar bort whitespaces eller uglifying filen
  1. Minska storleken på bilder genom att optimera dem

Minska storleken på bilder genom att optimera dem

Vad betyder detta?

Vi minskar inte storleken genom att minska upplösningen,
Vi minskar storleken genom att minska färgskalan.

Låt mig förklara,

Det mänskliga ögat kan inte skilja mellan #000000 och #010101.
Så när vi optimerar bilder minskar vi de bitar som används för att lagra färgdata för pixlar

Hur gör vi det?

Det finns bibliotek som sköter detta åt oss.

Men vi kan inte skapa ett program för att göra detta varje gång för varje bild, så jag skapade ett CLI-verktyg [My First CLI Application] som heter Shirmkage som står för shrink + image .

Du kan kolla in/leka med källkoden på min github. 

npm install -g shrimkage

Shrimkage gör det enkelt att optimera bilder i bulk

Du kan använda den direkt i terminalen [det är vad en CLI är tho 😅] 

shrimkage folder

Shimkage ger dig också möjlighet att tillämpa optimeringar på enskilda bilder 

shrimkage file --path=./test.png

Och det är 20 % ansträngning för att få en 80 % ökning av webbprestanda
✌

Om du ❤️ Detta,

Följ mig på Twitter,

Där du kan se uppdateringar om allt mitt arbete [inklusive bloggar]

Glöm inte heller att DM mig
Låt oss prata lite utvecklare
😁✌