[docs]: 페이지네이션 성능 측정 (FCP 60% 단축)

[chae-dahee]

테스트 내용 설명

#870 이하
CSMDict

1. view, engine reverse 제거
2. csm 페이징, 캐싱

테스트 시나리오 1: 초기 구동 및 첫 페이지 로딩 시간

방법 1 순수 분석 시간

21,038 로그 React 저장소	기존 total_analysis_time	페이징 init_parsing	페이징 analyze_git_first_page
1회	13.003s	12.676s	0.556ms
2회	12.850s	12.486s	0.555ms
3회	12.815s	12.075s	0.563ms
4회	12.913s	12.839s	0.535ms
5회	12.578s	11.810s	0.587ms

• [기존] total_anaysis_time : 페이징 없는 전체 초기 분석 시간
• [페이징] init_parsing : 초기 파싱 시간. init() 함수가 실행되는 데 걸리는 전체 시간
• [페이징] analyze_git_first_page : init 이후 첫 페이지 분석 시간 . 보여줄 데이터를 생성하는 데 걸리는 시간

방법 2 : FCP, TBT, INP 분석 (VSCode Webview Developer Tools)

21,038 로그 React 저장소	기존	페이징
FCP	58.740s	23.148s
TBT / INP	335.63ms / 408ms	0ms / 65ms

• web-vitals를 사용해 소숫점 3자리까지 추출

<기존 TBT 335.63ms 소요>

<페이징 도입 : FCP 23.148ms TBT 0ms 소요>

결론

• 방법 2
  • 모든 데이터를 한 번에 처리하며 발생했던 렌더링 부하를 줄임
  • 앱 멈춤 현상(TBT) 0ms, 반응성(INP) 향상
  • 렌더링 시간(FCP) 59.4% 단축
  • 프론트엔드의 reverse(), 데이터 가공 단계를 단축해 사용자에게 보이는 화면을 더 빨리 띄울 수 있었습니다.
• 방법 1
  • 순수 백엔드 소요 시간 평균값은 기존과 유사
  • init 무거운 작업의 단계 구분 및 분류
  • 추후 단게적으로 init_parsing 을 개선할 수 있는 지표가 되었습니다.

참고

추후

• 시나리오 2: "Load More" 페이지 추가 로딩 시간
• 시나리오 3: 캐시된 페이지 로딩 시간
  내용 본문에 채우도록 하겠습니다.