모던 리액트 Deep Dive

웹사이트와 성능

웹사이트에 기대하는 사항
- 웹사이트 방문 목적 달성
- 달성 시간 최소
- 개인정보 누출 등 보안 철저
개발자들이 성능에 크게 관심을 갖지 않는 이유
- 개발자의 기기가 평균 기기보다 성능이 뛰어나다.
- 성능 개선 작업은 쉽지 않고, 눈에 띄는 성능 향상을 기대하기 어렵다.

페이지가 처음으로 로드를 시작한 시점 ~ 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는데 걸리는 시간
사용자의 기기가 노출하는 뷰포트 내부에서 가장 큰 영역을 차지하는 요소가 렌더링되는데 얼마나 걸리는지 측정한 지표
큰 이미지 또는 텍스트 의 종류
- img
- svg
- video
- url image
- block level element
DOMContentLoaded
- HTML 문서를 완전히 불러오고 파싱했을 때 발생하는 이벤트
- document 대상으로 단 한 번만 호출
- 스타일시트, 이미지, 하위 프레임의 로딩을 기다리지 않는다는 제한이 있다.
기준 점수
- 2.5초 - good
- 4초 - bad
개선 방안
- 이미지 대신 텍스트로 채우기
- 이미지 불러오는 방식에 대한 고민
  - img, video.poster 는 프리로드 스캐너에 의해 빠르게 로딩된다.
- 이미지 무손실 압축
- fadein과 같은 애니메이션 적용 금지
- 적절한 lazy loading 사용

웹사이트의 반응성을 측정하는 지표
웹사이트 내부의 이벤트 반응이 늦어지는 이유
- 해당 입력을 처리해야 하는 브라우저 메인 스레드가 바쁘기 때문
- 대규모 렌더링이 일어나거나, JS 분석 및 실행에 리소스 할애
RAIL
- Response: 사용자 입력에 대한 반응 속도 (50ms 미만)
- Animation: 10s 이하
- Idle: 유휴 시간을 극대화해 페이지가 50ms 이내 사용자 입력에 응답
- Load: 5초 이내 컨텐츠 전달
기준 점수
- 100ms - good
- 300ms 이내 - soso
- 그 외 - bad
개선 방안
- 실행에 오래 걸리는 긴 작업 분리
  - 크롬 CPU, 네트워크 속도 감속으로 테스트
- JS 코드 최소화
  - 개발자 도구 - 커버리지 기록으로 확인 가능
- 타사 JS 코드 실행 지연
  - async, defer
  - intersection observer

최초 바이트까지의 시간
브라우저가 웹페이지의 첫 번째 바이트를 수신하는 데 걸리는 시간
600ms 이상 걸릴 경우 개선 필요
SSR에서 주의 깊게 봐야 할 지표
- 최초 페이지를 만들기 위해 서버에서 어느 정도 작업을 수행해야 하기 때문
- 로직 최적화, api 트랜잭션 최소화, 사용자 위치에 가까운 서버 이용, 스트리밍 api