[React] web성능 메트릭

 

❓Pre-rendering이란?
Next.js에선 기본적으로 모든 페이지를 프리 렌더링한다. 즉 HTML이 클라이언트 사이드에서 자바스크립트를 통해 생성이 되는 게 아니라 Next.js가 사전에 각 페이지를 만들어 놓는다. 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어있다. 페이지가 브라우저에 의해 로드될 때는 hydration이라는 프로세스를 거치게 된다. hydration은 자바스크립트 코드가 실행되어 해당 페이지를 완전히 인터렉티브하게 만드는 것을 의미한다.
프리 렌더링을 할 경우, 프리 렌더링을 하지 않을 때보다 더 나은 성능과 SEO를 갖출 수 있다.

*Next.js는 프리 렌더링 및 서버사이드 렌더링을 포함한 페이지 렌더링을 위한 런타임으로 Node.js를 사용한다.

 

• `CRA(create-react-app)` 디폴트 파일 중 하나
• 리액트 프로젝트를 생성하면 index.js에서 사용
• 앱의 퍼포먼스 시간들을 분석하여 객체 형태로 보여주는 것이 목적.다음과 같이 작성하여 콘솔에서 확인이 가능.
• 즉, 사용자들에게 편의를 제공하는 페이지나 컴포넌트는 아니므로 삭제해도 무방하다.

reportWebVitals(console.log);​​​​

 

 

LCP (Largest Contentful Paint)

페이지에서 가장 용량이 큰 컨텐츠가 표시되는 시점을 나타낸다.

 

 

 

 

CLS (Cumulative Layout Shift)

페이지가 로드되기 시작하는 시점과 lifecycle 상태가 숨김으로 변경되는 시점 사이에 발생하는 모든 예기치 않은 레이아웃 이동의 누적 점수를 측정한다. 일반적으로 리소스가 비동기적으로 로드되거나 DOM 요소가 기존 컨텐츠가 있는 페이지에 동적으로 추가될 때 발생한다.

 

 

 

 

 

 

FID (First Input Delay)

사용자가 페이지와 처음 상호작용한(클릭 또는 키 입력 등) 시간부터 브라우저가 실제로 이벤트 핸들러 처리를 시작할 수 있는 시간까지의 시간을 측정한다.

일반적으로 입력 지연은 브라우저의 기본 스레드가 다른 작업 (예: 대용량 js 파일 파싱)을 실행 중일때 발생한다. 위와 같이 메인 스레드에서 작업중인데 user input이 발생하면 브라우저가 이에 대응하는데 FID만큼의 시간이 소요된다.

 

 

 

• `name` 에는 어떠한 지표인지 나온다.
• `value`는 측정값으로 보통 단위는 ms이다.

---

https://velog.io/@yrnana/%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EB%A9%94%ED%8A%B8%EB%A6%AD

 

 

https://velog.io/@jollypyun/React-reportWebVitals

[React] reportWebVitals