프론트엔드 웹 성능 최적화

웹의 성능 개선은 크게 두 개

1. 로딩 성능 개선

2. 렌더링 성능 개선

 

로딩 성능 최적화

- 이미지 사이즈 최적화

- Code Split

- 텍스트 압축

- 컴포넌트 Lazy Loading

- 컴포넌트 Preloading

- 이미지 Preloading

렌더링 성능 최적화

- Bottleneck 코드 최적화

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

 

분석툴

- 크롬 Network 탭

- 크롬 Performance 탭

- 크롬 Light house 탭

- webpack-bundle-analyzer

 

---

이미지 최적화

CDN - Contents Delivery Network

ㄴ 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술

 

Image CDN - image processing CDN

 

화면에 필요한 크기로 이미지를 불러오는 것이 중요.

화면에 그리는 크기의 2배 정도가 적당,,

 

---

 

번들 파일 분석

https://www.npmjs.com/package/webpack-bundle-analyzer

webpack-bundle-analyzer

 

 

---

 

Code Splitting

불필요한 코드 또는 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것https://ko.legacy.reactjs.org/docs/code-splitting.html

코드 분할 – React

 

 

---

 

텍스트 압축

서버에서 리소스를 압축해서 보내서 성능 개선 가능

 

보통 웹상에서는

1. GZIP

2. Deflate

방식을 사용함

 

(압축이 적용되고 있는지는 Network탭의 Headers-> Response Header -> Content-Encoding 을 통해 확인 가능)

 

모든 파일을 압축하면 오히려 성능이 느려질 수도 있음

파일이 2KB미만이면 그대로 전송하는 것이 나음

 

 

---

 

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

브라우저는 초당 60 프레임을 보여줌

초당 20-30프레임을 보여주게되면 쟁크(버벅이는 현상) 발생

 

브라우저 렌더링 과정

DOM+CSSOM -> Render Tree -> Layout -> Paint -> Composite

 

Reflow - 모두 다 재실행 (위치, 크기 같은 속성 변경)

Repaint - Layout 생략 (색깔, 스타일 같은 속성 변경)

 

Reflow, Repaint 피하기 (GPU 도움 받기)

ㄴ transform, opacity(GPU가 관여할 수 있는 속성) 변경

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

---

 

컴포넌트 Preloading

Preloaing 타이밍

1. 버튼 위에 마우스를 올려 놨을 때

2. 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝났을 때

function lazyWithPreload(importFunction) {
	const Component = React.lazy(importFunction)
	Component.preload = importFunction
	return Component
}

 

---

 

이미지 Preloading

이미지는 요청을 계속 보냄. 똑같은 주소여도 요청을 다시 보내기 때문에 캐시를 설정해주는 것도 중요

- 미리로드하고 캐시를 적용하는 것이 중요!

 

const img = new Image()
img.src = "https://..."