프로파일링 & 리엑트 성능 최적화

최하영·2024년 3월 25일

React

목록 보기

5/6

모든 웹 개발자는 웹 성능을 최적화 시키기위해서 개발을 하지 않을까?
이번 주제는 핵심 웹 지표 최적화를 통한 웹성능 개선에 대해서 알아보자

❗우선 , 웹 성능을 알수 있으려면 웹 페이지의 실제 사용 데이터에 따른 페이지 성능을 객관적으로 판단할수 있어야한다. 이때 나온게 바로..!

📋핵심적인 웹 지표 (Core Web Vital)

핵심적인 웹 시표는 구글에서 만든 자료로, 실제 사용 데이터에 따른 페이지의 성능을 보여주는 지표이다.

핵심 웹 지표

LCP (Largest Contentful Paint) : 최대 콘텐츠풀 페인트
FID (First Input Delay) : 최초입력 지연
CLS (Cumulative Layout Shift) : 누적 레이아웃 이동

특정 문제 진단시 필요한 지표

TTFB (Time To First Byte) : 최초 바이트까지의 시간
FCP (First Contantful Paint) : 최초 컨텐츠풀 시간

웹 지표를 토대로 페이지 성능을 확인하는 도구를 살짝 짚고 시작하겠다!

🔧페이지 성능 측정도구

(1) React-profiler
(2) 구글 라이트하우스 사용 => 점수 나옴
(3) 네트워크 및 메모리 탭

🔍LCP : 최대 콘텐츠풀 페인트??

LCP는 사용자가 URL을 요청한 시접부터 페이지내에서 가장 큰 콘텐츠를 그리는데 걸리는 시간이다.
즉, 사용자의 기기가 노출하는 뷰포트 내부에서 가장 큰 요소가 렌더링 되는데 얼마나 걸리는지 측정한다.
이는 사용자에게 페이지 정보를 화면에 전달하는 속도를 객관적으로 판단할수 있겠다.

📎기준점수

2.5초 이내: 좋음
4초 이내: 보통
그 이상: 나쁨

📎개선방법

image 보다 text
-당연히 img 보다는 text가 LCP 점수를 높인다.
image 최적화
-코드에서 이미지를 불러올때는 다양한 방법이 존재한다.
```
//img 태그
<img src= "***"/>
```
-이미지 태그를 저렇게 사용한다면 가장 먼저 발견되어 빠르게 요청이 일어난다.
```
//svg 태그
<svg xmlns="">
	<img href="***"/>
</svg>
```
-svg태그로 묶어 사용시 모든 리소스를 다 불러온 후 이미지를 불러온다. 그냥 img 태그보단 느리다고한다.
```
<div style="background-image: ***"></div>
```
-태그 안 css 스타일을 주는것은 브라우저가 해당 리소스를 필요로하는 DOM을 그릴때까지 리소스 요청을 뒤로 미루기때문에 지양하는것이 좋다.
사용하지 않는 CSS 제거
애니메이션 효과 지양
-애니메이션 처리하는 과정은 LCP점수를 떨어뜨린다.

🔍CLS : 누적 레이아웃 이동??

CLS는 페이지의 생명주기 동안 발생하는 모든 이동에 대한 지표를 계산한것이다.
최초 렌더링이 시작된 위치에서 레이아웃 이동이 발생하면 누적 레이아웃 이동 점수로 기록된다.
이때 사용자의 액션으로 인한 레이아웃 이동은 포함되지 않는다.

📎기준점수

0.1 이하: 좋음
0.25이하 보통
그 외: 나쁨

📎개선방법

CSS / JS 코드 최적화
-useEffect와 같은 내부에서 요소에 영향을 미치는 작업이나 뷰포트에서 노출될 확률이 높은 작업은 최소화 시키는것이 좋다고한다.
스켈레톤 UI를이용한 추가적인 공간 확보
-삽입이 예상되는 요소를 위해 스켈레톤으로 미리 무언가 동적으로 뜰것으로 예상되는 공간을 미리 확보해두면 좋다고한다.
반응형 웹사이트 만들때, 이미지 크기
-사용자 기기의 크기에 따라 반응하는 반응형 웹사이트는 자칫하면 해당 이미지의 높이나 너비를 명확하게 알지 못해 레이아웃 이동이 크게 발생한다. 이때 auto 로 설정하지 않고 직접적으로 지정하게 되면 레이아웃 이동이 크게 발생하지 않고 , 다른 방안으로는 srcset 속성 을 이용하는것도 좋다.

🔍FID : 최초 입력 지연??

웹 페이지가 사용자의 동작(클릭, 입력, 터치 등) 에 반응할때까지 걸리는 시간이다.
화면이 그려지고 난 뒤 사용자가 상호작용을 수행했을때 이 이벤트에 대한 반응을 할 수 있을때 까지의 소요되는 시간을 의미한다.
즉, 사용자가 웹페이지의 응답을 받을 수 있는지 측정할 수 있다.