최적화 테스트 - Hi-Fi-Club/FE GitHub Wiki

React.lazy & Suspense
: Route-based code splitting
: 현재 lazy는 default에서만 가져올 수 있어 page에서 하나씩 import해서 가져와야 하는 상황
(기존처럼 page/index에서 모두 추출x)
font-display: swap
- FCP(First-Contentful-Paint): 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간
  (LCP(Large-Contentful-Paint): 주요 콘텐츠 로딩이 완료된 시점을 측정하는 것)
- 대략 1.8초 이하를 빠르다고 판단
- FCP를 단축시키는데에 폰트 로딩이 가장 큰 영향을 끼친다.
- CSSOM을 생성할 때, 외부 웹 폰트 링크로 정의된 부분을 만나고 해당 폰트 파일을 다운로드하기 시작
  그리기(paint) 단계에서 웹 폰트 파일처럼 외부 링크로 연결된 파일의 다운로드가 완료되지 않았으면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 차단
- 1font-display: swap` 우선적으로 system font로 렌더링하고 이후에 custom font가 모두 다운로드 되면 글씨체를 변경시킨다.
- 참고링크 : 웹 폰트 사용과 최적화의 최근 동향
- 궁금한 것: 기존처럼 폰트를 미리 다 다운받고 로딩해서 사용하는 것이 좋은지(현재 로딩 전에 시스템글씨체가 반영되있는 듯),
  swap과 같은 속성으로 기본 글씨체를 보여주다가 커스텀으로 변경하는게 좋을지