자료
성능 최적화
브라우저 기준의 성능 측정
웹 페이지가 로딩될 때 DOMContentLoaded, load 이벤트가 발생하며, 각 이벤트가 발생하는 시점으로 성능을 측정하게 된다.
이 모델에서 DOMContentlLoaded 이벤트(파란색 표시), load 이벤트(빨간색 표시) 발생 시점이 빠를수록, 그리고 두 이벤트 발생 구간의 폭이 좁을수록 성능이 좋다고 말한다.
사용자 기준의 성능 측정
개발 패러다임이 변화하면서 DOMContentLoaded, load 이벤트 발생 시점만 가지고 성능을 판단하기 어려워졌다. 최근에 많이 사용되는 SPA(Single Page Application)에서는 웹 페이지에 포함된 적은 양의 HTML로 DOMContentLoaded, load 이벤트가 일찍 발생할 수 있으나, 이벤트가 발생한 이후에도 수많은 스크립트 실행으로 인해 여전히 "느린 로딩"이 존재한다. 이러한 이유로 사용자 기준의 새로운 성능 측정 방식이 필요하게 되었다.
사용자 기준의 성능 측정
사용자 기준의 성능 측정은 사용자에게 콘텐츠를 보여주는 여러 시점을 기반으로 한다. 의미 있는 콘텐츠가 처음 보이는 시점이 빠를수록 성능이 좋다고 판단하며, 이 시점을 앞당길 수 있도록 최적화해야 한다. 아래 이미지는 DOMContentLoaded, load 이벤트가 같은 시점에 발생했으나 사용자 기준에서 성능 최적화가 잘 된 페이지와 그렇지 않은 페이지를 비교한 예다. 최적화가 잘 된 경우(위) 0.3초에 콘텐츠 일부분이 보이고 이후 점진적으로 모든 콘텐츠가 화면에 출력된다. 반면 최적화가 안 된 경우(아래) 흰 화면만 보이다가 1.5초 후에 모든 콘텐츠가 보인다. 사용자는 최적화가 잘 된 페이지를 볼 때 로딩이 더 "빠르다"고 느낀다.
-
FP(First Paint)
흰 화면에서 화면에 무언가가 처음으로 그려지기 시작하는 순간이다. -
FCP(First Contentful Paint)
텍스트나 이미지가 출력되기 시작하는 순간이다. -
FMP(First Meaningful Paint)
사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간이다. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고 스타일이 적용되어 주요 콘텐츠를 읽을 수 있다. -
TTI(Time to Interactive)
자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간이다.
성능 측정 도구
- Performance 패널
- Network 패널
- Lighthouses 패널
Triplus 프로젝트 성능 측정
