DEV Community

Cover image for Angular version upgrade v4 to v12 - part 2: performance
Nily
Nily

Posted on • Updated on

Angular version upgrade v4 to v12 - part 2: performance

Angular 업그레이드로 인해 서비스의 성능이 얼만큼 개선되었는지 궁금했다.

크롬에서 제공하는 lighthouse라는 툴을 이용해 성능을 비교해봤다.

[v4]

v4 performance

[v12]

v12 performance


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 TimeLargest 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까지 버전이 확 높아진 만큼, 성능 개선은 당연한 것 일수도..)

Image description

검사 보고서를 보면, 어떤 부분에서 더 성능을 향상할 수 있는지 제안까지 해준다.

성능 최적화를 위해 단순히 프레임 워크 업그레이드에 의존하는 것이 아니라, Lighthouse등 여러 tool등의 도움을 받아 꾸준히 점검하고 시간을 투자해야 한다는 것을 또 깨닫는 경험이었다.


Angular12의 feature들 참고:
관련 링크

Top comments (0)