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

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

---

DIL-week7-4_2024-04-18

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

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

---

CLS, Cumulative Layout Shift

기준 점수

| CLS 점수 | 기준 | | -------- | ---- | | <0.1 | 좋음 | | <0.25 | 보통 | | >=0.25 | 나쁨 |

개선방안

• 삽입을 위한 추가 공간 확보

  • useLayouEffect
    • 로딩이 오래 걸리는 것과 같이 보일 수 있다.
    • 동기적으로 발생해, 브라우저의 페인팅 작업에 영향을 미친다
  • 스켈레톤 UI
    • 추천, 누적 레이아웃 쉬프트를 완전히 방지할 순 없다
  • 서버 사이드 랜더링
    • 동적인 요소의 유무를 사전에 판단해 HTML을 미리 제공
    • 타사 스크립트에 의존하는 경우, 불가능할 수도 있다

• 폰트 로딩 최적화

  • FOUT, flash of unstyled text // 기본 폰트로 보이고 있다가, 뒤늦게 폰트가 적용되는 현상
  • FOIT, flash of invisible text // 문서에 지정한 폰트도 없고, 기본 폰트도 없다가 뒤늦게 폰트가 로딩되며, 페이지에 랜더링되는 현상

• 해결 방안

  • <link>의 preload, rel=preload

  • font-family

    | 옵션 | 로딩 | 폴백 폰트 | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | anto | 브라우저가 결정 | | | block | 폰트가 로딩되기 전까지 랜더링을 중단한다(최대 3초) | | | swap | FOUT, 폴백 폰트로 글자를 랜더링, 웹 폰트의 로딩이 완료되면 웹 폰트를 적용 | O | | fallback | 100ms간 텍스트가 보이지 않고, 폴백 폰트로 랜더링, 3초 안에 폰트가 로딩된다면? 해당 웹 폰트로 전환, 아니라면? 폴백 폰트를 계속 사용 | O | | optional | 100ms간 텍스트가 보이지 않고, 폴백 폰트로 랜더링. 0.1초 내로 폰트가 다운로드 되어 있거나, 캐시돼 있지 않다면 폴백 폰트를 사용, 네트워크 상태를 파악해 연결을 취소 | O |

• 적절한 이미지 크기 설정

  • aspect-ratio: 브라우저의 유저 에이전트 스타일시트에 포함되어 있다. 이미지의 가로세로 비율을 자동으로 맞춰주는 역할을 한다.
    • 정확한 숫자를 써주는 것이 좋다. (미지원 오래된 브라우저, CSS 로딩 실패)
  • srcset

  <img
    width="1000"
    height="1000"
    src="image-1000.jpg"
    srcset="image-1000.jsp 1000w, image-2000 2000w"
  >
  

핵심 웹 지표가 아닌 성능 확인 지표들

TTFB, Time To First Byte

• 브라우저가 웹페이지의 첫 번째 바이트를 수신하는데 걸리는 시간
  • 600ms 이상 걸릴 경우? 개선 필요
  • 최초의 응답이 오는 바이트까지 얼마나 걸리나
• 서버사이드 랜더링의 경우 > 서버에서 첫 번쨰 HTML을 그리는 필요한 작업이 많거나느릴 수록, TTFB가 길어지게 된다.
• 고려사항
  • 서버사이드 랜더링
    • 정적 페이지 랜더링 로직을 최적화
    • API 호출 최적화
  • CDN
  • Stream

FCP, First Contentful Paint

| FCP 점수 | 기준 | | -------- | ---- | | <1.8 | 좋음 | | <3.0 | 보통 | | >=3.0 | 나쁨 |

개선방안

• 뭐라도 다운로드해서 TTFB를 단축
• 랜더링을 가로막는 리소스 최소화: 랜더링 방해 요소는 비동기로 로드
• Above the fold: 스크롤 하지 않아도 보이는 영역에 레이지 로딩이나, 스크립트 의존 코드를 피한다
• 페이지 리다이렉트 최소화
  • 리다이렉트는 비용 > 사용자에게 무언가를 보여줄 수 있는 시간이 지연되기 때문
• DOM 크기 최소화: 구글 기준, DOM요소 1500개, depts 32단계, 자식노드는 60개

13. 웹 페이지의 성능을 측정하는 다양한 방법

• create-react-app:
  • reportWebVitals()
    • web-vitals 라이브러리를 사용해서 지표를 측정할 수 있다.
    • PerformanObserver API를 사용해서 웹 페이지 성능을 측정할 수 있다.

import { ReportHandler } from "web-vitals";

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFE }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFE(onPerfEntry);
    });
  }
};

export default reportWebVitals;

reportWebVitals();

• 콘솔 찍기

reportWebVitals(console.log);

• 분석 데이터를 내보내고 싶다면?
  • sendBeacon API
  • fetch로 보내기

function sendToAnalytics(metic: ReportHandler) {
  const body = JSON.stringify(metric);
  const url = "/api/analytics";

  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: "POST", keepalive: true });
  }
}

reportWebVitals(sendToAnalytics);

• googleAnalytics

function sendToAnalytics({ id, name, value }: ReportHandler) {
  ga("send", "event", {
    eventCategory: "Web Vitals",
    eventAction: Math.round(name === "CLS" ? value * 1000 : value),
    eventLabel: id,
    nonInteraction: true,
  });
}

reportWebVitals(sendToAnalytics);