컨텐츠가 늦게 뜨는 경우
2023. 11. 24. 07:10
컨텐츠가 늦게 뜨는 경우 어떻게 대응해야 할까?
1. 문제의 범위 파악 - FE단이 문제인지, BE단이 문제인지
2. FE단
- 혹시 blocking 방식의 코드를 사용하고 있는지 체크 (API에 요청 날리는 코드들 async로 바꾸기)
- 사용자 브라우저가 응답으로 받는 JS 번들 사이즈 줄이기 (bundle size analyzer 등 활용해서 각 모듈의 번들 사이즈를 시각적으로 체크, NextJS 프레임워크 react server component 등 활용해서 데이터 조회 및 처리 로직을 화면 렌더링 및 state 관리 로직과 분리)
- lazy 로딩 (이미지, 영상 등)
- FE단 캐시 활용 (브라우저 캐싱, GraphQL이나 react-query 같은 FE단 캐싱 라이브러리 활용)
- 사용자 위치에 근접한 CDN 사용해서 컨텐츠 딜리버리 (특히 이미지 영상 같은 static file들)
3. BE단
- 비즈니스 로직이 느린지 (AOP 활용해서 메소드별 소요시간 측정)
- DB에서 조회가 느린지 (slow query인가? BE -> DB로 날리는 쿼리가 인덱스를 잘 타는지 체크)
- 외부 API 호출하고 응답받는게 느린지
- 캐시 활용 (static file은 CDN 혹은 nginx 통해서 바로 서빙 요청이 서버까지 안가도록)
- 모니터링을 통해, API 응답 속도, 각 메소드 처리 속도, DB read write 지연 등 파악하기 (Pinpoint가 정말 편하구나)