2024-04-17.md

DIL: 모던 리액트 딥 다이브, 7주차-3

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

DIL-week7-3_2024-04-17

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | --------------------------------------------------------------------------------------- | ----------- | | 7주차 | 12장, 13장 | 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표, 웹 페이지의 성능을 측정하는 다양한 방법 | 790~799p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 총 1시간

FID

예제

사용자나 E2E 도구의 입력이 필요!
- 클릭 이벤트가 발생한 시점 => 실제 함수 호출이 있기 까지
  - 이벤트 핸들러가 완료되는 데 걸리는 시간은 측정x
    - 이벤트 핸들러의 실행 시간 측정은? Event Timming API를 사용

기준 점수

| FID, 최초 입력 지연 | 기준 결과 | | ------------------- | --------- | | >100ms | 좋음 | | >300ms | 보통 | | ≤300ms | 나쁨 |

개선 방안

메인 스레드에 이벤트를 실행할 여유를 줘야 한다

long task

브라우저에서 작업해야 하는가?
- 아니라면 서버로
- 맞다면 긴 작업 나누기
  - 당장 로딩에 필요하지 않은 요소?
    - 리액트의 Suspence나 lazy, Next.js의 dynamic

자바스크립트 코드 최소화

안 쓰는 js 리소스 => 크롬 개발자 도구의 커버리지에서 확인할 수 있다
polyfill의 경우! 다음 내용 고려하기
- 필요한 환경인가? 구형 브라우저 지원 안한다면? 굳이?
- 꼭 필요한 폴리필인가? 여러 군데에서 자주 사용되는 코드인지 확인
  - 몇 군데 되지 않는다면? 저수준의 자바스크립트 코드를 직접 구현 -> 코드 크기를 줄일 수 있다.
@babel/preset-env를 사용해 애플리케이션 코드에서 사용하고 있는 내용만 폴리필에 담을 수 있다.
Next.js의 SWC 내부에 구현되어 있어 별도 처리x

타사 자바스크립트 코드 실행 지연

ex) Google Analytics, Firebase 등의 도구
- 웹 페이지 로드에 중요한 자원 아님

| script 속성 | 다운로드 | 실행 | | ----------- | ----------------------------------- | --------------------------------------------------------- | | defer | 다른 리소스와 함께 병렬 다운 | 다운로드가 완료되면 바로 실행, 다운로드가 완료된 순서대로 | | async | 다른 리소스와 함께 병렬 다운 | 페이지가 완전히 로딩된 이후에 실행 | | - | script를 만나면 동기적으로 다운로드 | 다운로드가 완료되면 바로 실행, 블락킹 |

CLS, Cumulative Layout Shift

정의

뷰포트 내부의 Layout Shift만 측정
최초 렌더링이 시작된 위치에서 레이아웃의 이동이 발생한다면, 레이아웃 이동 점수로 기록하게 된다.

The layout shift score is a product of two measures

Layout shift score
https://web.dev/articles/cls#layout-shift-score

영향분률과 거리분률을 곱함
impact fraction
distance fraction
- Initially, the layout shift score was calculated based only on impact fraction. The distance fraction was introduced to avoid overly penalizing cases where large elements shift by a small amount.