성능 최적화하기 - (1) 개발자 도구의 활용

 

◽ 성능 최적화란?

로딩 속도와 렌더링 속도를 높이는 것

 

[로딩성능 최적화]

1. 이미지사이즈 최적화

2. code split

3. 텍스트 압축: 다양한 html, js 등을 다운받을 때 서버에서 압축해서 다운받으면 조금 더 빠르게 로드될 수 있다.

4. 컴포넌트 Lazy Loading (Code Splitting)

5. 컴포넌트 Preloading

6. 이미지 Preloading

 

[렌더링 성능 최적화]

1. Bottleneck(=병목현상) 코드 최적화: 특정 js 때문에 느려지는 병목현상을 찾아내고 해결하는 방법을 배움

2. 애니메이션 최적화 (Reflow, Repaint)

 

이미지 지연(lazy) 로딩

Layouy Shift 피하기

useSelect 렌더링 문제 해결

Redux Reselect를 통한 렌더링 최적화

병목 함수에 memoization 기법 적용

병목 함수 로직 개선하기

 

 

 

◽ 크롬 개발자 도구의 3가지 활용

1. 네트워크 탭

2. 퍼포먼스 탭

3. Audit(=Light house): 여러가지 기준으로 점수를매기고 가이드라인을 제공한다.

OPPORTUNITIES는 리소스의 관점(=로딩)이고, DIAGNOSTICS는 내부 소스 관점(=렌더링)에서 제안한다.

 

 

 

◽  Audit(=Light house) 사용하기

빨간색: 문제되는 것

회색: 문제 되는건 아님

 

Resource Size: 현재 이미지 사이즈

Potential Savings: 줄일 수 있는 용량

이미지는 엘리먼트 너비기준으로 2배 정도 사용하는 것이 좋다.

 

 

 

◽ 퍼포먼스 탭

이 줄부터 화면이 그려진다.

화면이 그려지는 ..

 

녹화하면서 퍼포먼스 측정

새로고침하면서 퍼포먼스 측정

멈춤

 

파일로 저장하기

파일 불러오기

 

 쓰레기통: 가비지 컬렉터의 역할

 

 

옅은 회색 - 통신 중

진한 회색 - 다운로드

그 뒤 - 후처리

 

 

 

 

 

시프트를 누르고 고정할 수 있다.

 

 

 

 

---

 

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의