[Next.js] 당근마켓 프로젝트 성능 최적화 과정2 - 제품 검색 후 제품 상세 페이지로 이동하는 과정

🐥 당근마켓 프로젝트 성능 최적화 과정2

상품 검색을 한 후 해당 상품에 들어가기까지의 시간을 측정하고 있었습니다.

근데 시간이 오래 걸려서 최적화 작업을 진행했습니다.

확인해보니 비슷한 상품이 적을 경우에는 상관이 없는데 많아질 경우에 느려지는 문제가 생겼습니다.

---

비슷한 상품을 가져오는 개수 설정하기

 

비슷한 상품을 가져오는 개수에 제한을 두도록 하겠습니다.

비슷한 상품을 가져오는 개수 설정하기

첫 번째 문제

저는 test라는 검색어로 상품을 검색했습니다. 

하지만 네트워크 쪽을 보면 시간이 꽤 긴 것을 확인할 수 있었습니다.

노란색으로 표시한 부분이 FID라고 볼 수 있습니다. 입력 지연 시간은 100ms 가 양호한데 이 경우에는 약 2500ms ~ 2900ms가 약 400ms가 걸리는 것을 확인할 수 있었습니다. 게다가 요청 자체를 처리하는 시간도 오래걸렸습니다. 

따라서 총 1.41s 정도가 걸렸는데 이 경우 사용자가 느꼈을 때 클릭 후 동작하는 데 시간이 걸린다고 생각할 수 있습니다.

 

개선 후

1.41s에서 988.11ms로 줄어들었습니다.

두 번째 문제

recalculate style에서도 오랜 시간이 걸리는 것을 확인할 수 있는데요.

 

 

이 두 가지 문제의 원인을 찾아보니 비슷한 상품을 찾아서 보여주는 Similar items를 설정하는 부분에서 개수를 설정해두지 않아서 오래 걸린 것이었습니다. test라는 이름의 상품을 테스트용으로 500개 정도 만들어놓았는데 이 때문에 상품명이 test에 해당하는 모든 상품들이 비슷한 상품으로 출력된 것이다.

즉, 너무 많은 상품들을 보여주게 되면서 시간이 오래걸린다고 볼 수 있습니다. 

따라서 비슷한 상품을 6개만 보여주도록 수정해줬습니다.

 

 

스크롤의 압박....😫

 

개선 후 

39.3ms에서 2ms로 recalculate style 시간이 줄어들었습니다.

 

 

 

혹시나 비슷한 상품을 세로로 출력할 때와 가로(스크롤)로 출력할 때의 recalculate 시간에 유의미한 차이가 있을까하고 실험을 해봤는데.. 뭐.. 별 차이 없었습니다//.. 끝~