1. 필요성
위의 로딩 이미지를 아마 한 번쯤은 모두가 접해 보았을 것이다.
페이지가 로딩되면서 UI가 렌더링이 되기 전에 위와 같은 이미지들을 노출시켜서 사용자가 기다릴 수 있도록 유도하는 것이다.
그러나 사용자 입장에서 이러한 화면을 보는 것이 그렇게 유쾌하지는 않다.
웹은 그 기능이 다양해짐에 따라 정적인 요소(html, css, javascript) 뿐만 아니라 동적인 요소(데이터베이스 연동, API 통신 등) 들을 다루게 되면서 복잡도가 증가하고, 거대해졌다. 무거워진 웹은 사용자에게 보여지기까지 수초가 걸리게 한다.
이러한 로딩 시간의 길어짐은 사용자의 경험(UX)에 직접적인 영향을 미친다.
지연속도가 늘어날수록 이탈률은 증가하며 구매 전환율은 급감한다. 우리의 사용자는 기다려주지 않는다.
프론트엔드의 성능 개선은 더 이상 선택이 아니게 되었다. 성능 개선은 곧 사용자의 이탈률, 구매 전환율과 연결되기 때문이다.
핀터레스트(Pinterest)에서는 성능 개선을 통해 사용자의 대기시간을 40% 감소, SEO 트래픽 15% 증가, 가입 전환율 15% 증가의 성과를 내보인 바 있다.
2. 프론트에서 측정 가능한 성능
2-1. 로딩
(1) FCP(First Contentful Paint)
- 첫 요소가 로드될 때까지 걸리는 시간
- 전체가 아닌 일부 콘텐츠가 렌더링 되었을 때를 기준으로 잡으므로, 그 대상이 실제 메인 요소가 아닌 부가 요소일 수 있다.
사용자 입장에서는 이 역시 자연스러워 보이지 않을 수 있다. (여전히 로딩되고 있는 상태로 인식할 수 있음)
ex)
(2) FMP(First Meaningful Paint)
- 사용자에게 의미있는 첫 요소가 로드될 때까지 걸리는 시간
- 페이지 로드의 작은 차이에 지나치게 민감하여 신뢰도가 떨어져 현재는 사용하지 않는 개념이다.
(3) LCP(Larget Contentful Paint)
- 주요 콘텐츠(뷰 포트 내 가장 큰 이미지 또는 텍스트 블록)가 로드될 때까지 걸리는 시간
- 사용자가 감지하는 로드 속도를 측정할 수 있는 사용자 중심 메트릭
(4) TTI(Time to Interactive)
- 자바스크립트의 실행이 완료되고, 사용자가 직접 액션을 취할 수 있는 상태이다.
2-2. 렌더링
- 렌더링 = 자바스크립트의 실행과 그로 이한 DOM, CSS 변경을 다시 화면에 그리는 시간
= 브라우저에서 웹 페이지의 컨텐츠를 표시하기 위한 과정
- 웹에서의 다양한 기능과 그에 따른 시각적 변화를 자바스크립트를 통해 구현하기 때문에 자바스크립트가 성능에 어떤 영향을 주고 있는지 파악해야 한다.
- 먼저, 브라우저의 렌더링 과정은 다음과 같다.
시각적 변화 > CSS > 레이아웃 (너비, 위치) > 색상을 채우고 > 병합
# 렌더링 성능을 측정하는 방법
크롬 개발자 도구 > 퍼포먼스 탭 > 새로고침 하거나 새로운 페이지 열기 > 개발자 도구 탭에서 자원 로드 시간, 페이지 로드 시간 등을 확인
웹 페이지의 성능을 최적화할 때 이러한 지표들을 기준으로 작업을 진행할 수 있다.
또한, 웹 페이지의 성능을 측정할 수 있는 추가적인 도구로는 Lighthouse, PageSpeed Insights 등이 있다.
# 렌더링 최적화 방법에 대한 가이드
(1) 코드 최적화 : 중복 제거
(2) 캐시 최적화 : 웹 브라우저가 자주 사용하는 코드들은 캐시에 저장하여 재사용
(3) 파일 최적화 : 웹 페이지에 필요한 파일을 최소화 (하나로 합치거나, 코드 중복을 제거)
(4) 적은 수의 HTTP 요청 : 웹 페이지 로드시 요청하는 자원의 수를 줄이기 위함. (적은 수의 CSS, JS. 파일 사용)
2-3. 메모리 누수
일반적으로 자바스크립트는 가비지 콜렉터 언어이기 때문에 메모리 누수가 잘 발생하지는 않지만, 특정 원인에 의해서 발생하기도 한다.
이전에 할당한 메모리가 가비지 컬렉터에 의해 수집되지 않고, 계속해서 자원을 소모하고 있는 경우인데(힙과 노드가 감소하지 않음)
대표적인 원인은 다음과 같다.
1. 전역변수의 우발적인 사용
2. 해제되지 않은 타이머, 콜백
3. DOM 외부에서의 참조
4. 클로저
* 참고자료
https://www.youtube.com/watch?v=A6J74xLWqYg&list=WL&index=32