체크메이트 서비스의 성능 최적화를 하며 느낀 점과 학습한 내용을 공유합니다.

성능을 개선하기 전에 꼭 알아야하는 부분은 다음과 같습니다.

• 성능이란 무엇일까요?
• 성능이 좋으면 어떤 장점이 있을까요?
• 현재 서비스의 성능은 어떤가요?
• 현재 서비스에 성능 개선이 필요한가요?

프론트엔드에서의 성능

웹 페이지의 성능은 페이지의 로딩 시간과 로딩 후 렌더링에 많은 영향을 받습니다. 즉 프론트엔드 성능 개선은 로딩 성능과 렌더링 성능에 영향을 미치는 요소를 찾아 개선하는 작업이라고 볼 수 있습니다. 프론트엔드에서 정량적 지표로 나타낼 수 있는 몇 안되는 요소 중 하나이기도 합니다.

성능은 사용자 경험에 직접적으로 영향을 미치는 요소입니다.

• 느린 성능은 사용자 이탈율을 높입니다.
• 저사양, 구버전의 브라우저를 사용하는 사용자들이 존재합니다.

성능 리포트

성능을 개선하기 위해서는 기존 성능을 측정하고 어떤 요소가 개선되어야하는지 문제를 정의해야합니다.

관리 대상 및 성능 지표

• 메인 페이지: 로그인 페이지, 모임 목록 페이지

  • FCP
  • LCP

• 출석부 페이지: 출결

  • TTI

• 모임 상세 페이지: 모임 정보 확인

  • CLS

성능 예산(performance budget)

A performance budget is a limit to prevent regressions. It can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. Time to Interactive), a custom metric (e.g. Time to Hero Element), or a threshold over a period of time.

성능 예산이란 사이트 성능에 영향을 미치는 지표들에 부과하는 한계값들입니다. 페이지의 총 크기, 모바일 네트워크에서 로드되기까지 걸리는 시간, HTTP 요청수 등이 될 수 있습니다. 성능 예산을 정의하면 디자인 변경, 기능 확장 등의 결정이 필요한 순간에서 성능을 추가적인 기준으로 삼을 수 있습니다. 체크메이트에서는 다음과 같은 성능 예산을 정의했습니다.

디바이스: 모바일

출결 특성 상 모바일로 이루어지는 경우가 많습니다.

네트워크: 3G, 4G

사용자 비율이 낮은 5G를 제외합니다.

Performance 90점 이상

Lighthouse의 성능 점수는 코어 웹 바이탈을 종합적으로 반영합니다.

성능 측정

Lighthouse

WebPageTest

렌더링 성능

• 타이머 렌더링 시 컴포넌트 리렌더링

  

• Header Footer 리렌더링 발생

• 모임 상세 페이지 상단 탭 인디케이터 이동 시 Layout Shift 발생

  

문제 정의

측정한 성능 지표에 따라 해결해야할 문제 상황을 다음과 같이 정의할 수 있었습니다.

• 요청 리소스 줄이기
• 불필요한 렌더링과 레이아웃 변경

다음에는 본격적인 개선 작업에 대한 글로 돌아오겠습니다.