Angular 업그레이드로 인해 서비스의 성능이 얼만큼 개선되었는지 궁금했다.
크롬에서 제공하는 lighthouse라는 툴을 이용해 성능을 비교해봤다.
[v4]
[v12]
performance의 측정 항목은 아래의 5가지 metric으로 정의된다.
- First Contentful Paint
- Largest Contentful Paint
- Total Blocking Time
- Cumulative Layout Shift
- Speed Index
performance 점수는 33에서 60으로 약 1.8배 상승했다.
각 항목에 어떤 변화가 있었는지는 아래 표로 정리해 보았다.
| 항목 | v4 | v12 | 차이 |
|---|---|---|---|
| First Contentful Paint | 1.3s | 1.8s | + 38% |
| Largest Contentful Paint | 16.4s | 4.2s | - 74% |
| Total Blocking Time | 1,290ms | 90ms | - 93% |
| Cumulative Layout Shift | 0.008 | 0.007 | - 12% |
| Speed Index | 7.7s | 2.4s | - 68% |
가장 많은 변화가 있었던 항목은 Total Blocking Time과 Largest Contentful Paint였다.
-
TBT:
Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력으로부터 페이지가 응답하지 못하도록 차단된 총 시간 -
LCP:
LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users.
가장 큰 컨텐츠를 렌더링 하는데 걸리는 시간
Lighthouse는 검사 조건에 따라 점수의 변동성이 있긴 하지만, 여러번 검사를 실시한 결과 전반적으로 performance가 향상된 것을 확인할 수 있었다.
(4에서 12까지 버전이 확 높아진 만큼, 성능 개선은 당연한 것 일수도..)
검사 보고서를 보면, 어떤 부분에서 더 성능을 향상할 수 있는지 제안까지 해준다.
성능 최적화를 위해 단순히 프레임 워크 업그레이드에 의존하는 것이 아니라, Lighthouse등 여러 tool등의 도움을 받아 꾸준히 점검하고 시간을 투자해야 한다는 것을 또 깨닫는 경험이었다.
Angular12의 feature들 참고:
관련 링크
Top comments (0)