웹 성능을 80% 향상시키는 20% 최적화

오늘날과 같이 초고속 세상에서,
아직 로드되지 않은 웹사이트의 3초는 사용자가 닫기 버튼을 클릭하기에 충분합니다.


이는 웹 기반 스타트업을 구축하려는 경우 특히 중요합니다.
웹사이트를 최적화하면 훨씬 더 많은 수익을 올릴 수 있습니다.

웹사이트의 구성요소

웹상의 모든 것에는 3가지 주요 구성 요소가 있습니다.

프론트엔드

백엔드

네트워크

백엔드가 아무리 최적화되더라도(일반적인 큰 실수 😅)

결국 웹사이트 성능의 80%에 영향을 미치는 것은 네트워크입니다.

따라서 파레토의 법칙에 의해
우리는 네트워크에 집중합니다
네트워크는 프런트엔드를 백엔드에 연결하는 것입니다.
대부분의 사이트는 사이트가 로드될 때 백그라운드에서 수백 건의 요청을 합니다.

각 응답에 많은 데이터가 포함된 경우

데이터가 클라이언트에 도달하는 시간이 늘어남

각 리소스를 렌더링하는 시간이 증가합니다

.
basically the website take forever to load

해결책

파일 크기 줄이기

코드 분할

이라고도 하는 웹 사이트가 아닌 사용자에게만 전송

파일

제거whitespaces 또는 uglifying

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]

이미지를 최적화하여 이미지 크기 줄이기

이미지를 최적화하여 이미지 크기 줄이기

이것은 무엇을 의미 하는가?

해상도를 줄여서 크기를 줄이는 것이 아니라
색상의 배율을 줄여 크기를 줄입니다.

설명하겠습니다.

인간의 눈은 #000000과 #010101을 구별할 수 없습니다.
따라서 이미지를 최적화할 때 픽셀의 색상 데이터를 저장하는 데 사용되는 비트를 줄입니다.

어떻게 하죠?

우리를 위해 이것을 처리하는 라이브러리가 있습니다.

그러나 모든 이미지에 대해 매번 이 작업을 수행하는 프로그램을 만들 수는 없으므로 Shirmkage + shrink 를 나타내는 image라는 CLI 도구[My First CLI Application]를 만들었습니다.

내 github에서 source code을 확인하거나 놀 수 있습니다.

npm install -g shrimkage 

Shrimkage를 사용하면 이미지를 대량으로 쉽게 최적화할 수 있습니다.

터미널에서 직접 사용할 수 있습니다.

shrimkage folder

The default level of reduction is 50 (/100). so if you want more optimization you can shrimkage folder --level=10

Shimkage는 개별 이미지에 최적화를 적용할 수 있는 옵션도 제공합니다.

shrimkage file --path=./test.png

이것이 웹 성능을 80% 향상시키기 위한 20%의 노력입니다.
✌

당신이 ❤️이 경우,

나를 팔로우하세요 ,

내 모든 작업(블로그 포함)에 대한 업데이트를 볼 수 있는 곳

DM도 잊지마세요
작은 개발자 이야기를 나누자
😁✌