프론트엔드 성능 최적화

백동우·2023년 1월 18일

최적화

프론트엔드 측정 가능 성능 : 로딩시간(로딩), 렌더 시간(렌더링), 메모리누수(메모리) 3가지

로딩속도 측정 기준

FCP(First Contentful Paint) : 첫 요소가 로드 될 때까지 걸리는 시간
FMP(First Meaningful Paint) : 사용자에게 의미있는 첫 요소가 로드 될 때 까지 걸리는 시간
LCP(Largest Contentful Paint) : 주요 콘텐츠가 로드 될 때까지 걸리는 시간
-> 구글 기준 2.5초 미만 좋음 / 2.5~4.0초 개선 필요 / 4.0초과 시 형편없음으로 분류

렌더링 측정 기준

60 사람이 자연스럽다고 느끼는 초당 화면 수
1s/60 = 16ms
브라우저 렌더링 과정이 16ms 초과시 초당 프레임 수는 줄어들고 상태가 안좋아 보임

메모리 누수 측정 기준

메모리누수 : 프로그램이 작동하며 할당됐던 메모리가 더 이상 사용되지 않는 시점에서도 반환되지 않는 현상
-> 원인: 전역변수, 해제하지않은 타이머,콜백, 돔 외부 참조, 클로저 등의 이류

Web Vitals(구글이 제시하는 성능 지침)

LCP(Largest Contentful Paint) : 위와 동일
FID(First Input Delay) : 사용자의 행동에 대해 실제로 이벤트 핸들러가 반응하기 걸리는시간
CLS(Cumulative Layout Shift) : CLS는 시가적인 안전성을 측정하는데 사용되는 기준

이미지 크기로 인한 성능 저하

LightHouse

-> 구글이 제시한 Web Vitals 이용하여 성능 측정

// 4000개의 컴포넌트를 맵을 돌려서 성능을 테스트
 <div style={{ display: "flex", flexWrap: "wrap" }}>
      {Array(4000)
        .fill(0)
        .map((data, index) => (
          <Card
            num={index}
            onClick={() => {
              onClick(index);
            }}
          />
        ))}
    </div>

style={{...backgroundImage:"url(...format&fit=crop&w=4000&q=80)"}}

style={{...backgroundImage:"url(...format&fit=crop&w=2000&q=80)"}}

너무 큰 이미지를 사용 할 경우 performance점수가 떨어지는것을 확인이 가능합니다

-> 하단을 확인해보면 컴포넌트의 수가 너무 많다는 에러또한 확인 가능합니다

React18을 사용한 최적화

(이미지 크기 w=2000으로 변경, 갯수 10000개로 변경)

최적화 전

  const LazyCard = lazy(() => import("./Card")); lazy는 동적 import를 사용하는 함수를 인자
  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      <Suspense fallback={<div>...Loading</div>}>
        {Array(10000)
          .fill(0)
          .map((data, index) => (
            <LazyCard
              num={index}
              onClick={() => {
                onClick(index);
              }}
            />
          ))}
      </Suspense>
    </div>