들어가며

성능을 최적화하기 전에 측정 항목을 명확히 알고있으면 목표가 분명해질 것이다.

프론트엔드에서 성능 최적화를 위한 항목은 대표적으로 세 가지가 있다.

로딩 최적화
렌더링 최적화
메모리 최적화

이외에도 구글에서 성능 측정의 지침으로 정해둔 Web Vitals가 있다.

로딩 최적화

로딩 최적화와 관련된 용어는 다음과 같다.

FCP(First Contentful Paint)

첫 요소가 로드 될 때까지 걸리는 시간
보통 로딩 바가 FCP의 측정 대상 요소가 된다. 단, 로딩 컨텐츠의 경우 여전히 사용자에게 기다린다는 느낌을 줄 수 있는 요소이다. 때문에 FCP를 로딩 최적화의 지표로 사용하는 것은 적절하지 않을 수 있다.

FMP(First Meaningful Paint)

사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간
사용자가 보고 싶은 컨텐츠가 나타나는 측정 지표
연구 결과에 의하면 약 20% 항목에서 FMP는 정확하지 않다고 밝혀졌다.

참고 자료

First Meaningful Paint

LCP(Largest Contentful Paint)

최대 컨텐츠가 로드 될 때까지 걸리는 시간
페이지의 메인 컨텐츠의 로드 시간을 측정하기 위해 기존에는 FMP 또는 Speed Index를 지표로 사용했지만, 해당 지표는 잘못된 경우가 빈번했다. 따라서 단순하게 가장 큰 요소가 메인 컨텐츠라고 가정하고, 메인 컨텐츠의 로드 시간을 가장 큰 요소의 로드 시간으로 측정하게 됐다.
- 만약, 가장 큰 요소가 메인 컨텐츠가 아니라면 해당 컨텐츠의 로딩 시간을 측정하기 위해 사용자 정의 메트릭을 이용할 수 있다.
Web.dev에 의하면 LCP가 2.5초 이하인 경우에 좋은 사용자 경험을 제공할 수 있다고 한다. 그리고 4.0초 이상이면 형편없는 사용자 경험을 제공한다고 한다.

참고 자료

Largest Contentful Paint (LCP)

렌더링 최적화

사람은 FPS가 최소 60 이상의 화면을 볼 때 자연스러움을 느낀다. 즉, FPS가 60보다 작아지면 버벅임을 느낀다.

메모리 최적화

메모리 최적화와 관련해서 해결해야하는 문제는 메모리 누수를 방지하는 것이다. 자바스크립는 가비지 콜렉터에 의해 메모리 누수가 적은 편이다. 그럼에도 메모리 누수가 발생되는 대표적인 원인은 다음과 같다.

전역 변수
해제되지 않은 타이머 콜백
돔 외부에서의 참조
클로저

Web Vitals란?

구글에서 제안한 성능을 측정하기 위해 수행해야하는 지침이다.

Web.dev에 의하면 Web Vitals의 측정 항목은 다음과 같다.

Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP): 로딩 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 합니다.
First Input Delay(최초 입력 지연, FID): 상호 작용을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.
Cumulative Layout Shift(누적 레이아웃 시프트, CLS): 시각적 안정성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 합니다.
- 단, 버튼을 누른 이벤트에 의해 레이아웃이 변경되는 예시처럼 사용자가 화면의 변화를 예측할 수 있는 상황이라면 성능 측정의 대상으로 포함되지 않는다.

Lighthouse에서는 FID를 측정할 수 없다.

Lighthouse는 사용자 없이 시뮬레이션 환경에서 페이지 성능을 측정하고 있기 때문에 사용자의 상호작용에 관한FID(First Input Delay)를 측정할 수 없다. 대신 Lighthouse에는 TBT(Total Blocking Time)이라는 지표가 있다. 해당 지표는 FID를 충분히 대체할 수 있다고한다. Web.dev 문서에 의하면 TBT는 아래와 같이 정의돼 있다.