올리브영 메인페이지, 0.5초 딜레이를 없애고 LCP를 81% 개선!
by DD
3년 전
조회수 2
메인페이지 렌더링 시 불필요한 0.5초 지연 로직을 제거하여 LCP 3.9초 → 3.4초로 개선
LCP 개선을 위해 이미지 로딩 우선순위 조정 및 탭 렌더링 방식 최적화
쿼리 요청 분리 및 CSR/SSR 유사 방식 적용으로 LCP 81% 감소, 로딩 타임 122% 개선
불필요한 0.5초 딜레이 제거
메인페이지 렌더링 시 0.5초 딜레이를 유발하는 불필요한 로직을 제거했다. setTimeout을 사용한 탭 활성화 체크 로직은 LCP를 지연시키는 주요 원인이었다. 따라서 해당 로직 삭제를 통해 LCP 3.9초에서 3.4초로 개선했다.
LCP 개선을 위한 이미지 로딩 최적화
LCP 개선을 위해 이미지 로딩 순서를 최적화했다. DOMContentLoaded 시점에 불필요하게 로드되는 이미지를 지연시켜 LCP를 개선했다. 탭 렌더링 방식을 변경하여 사용자가 보지 않는 탭의 리소스 로딩을 늦추고, DOM 로딩 시간을 단축했다.
쿼리 요청 분리 및 CSR/SSR 유사 방식 적용
서버 응답 시간 개선을 위해 쿼리 요청을 분리하고, CSR/SSR과 유사한 방식으로 메인페이지를 개선했다. API 분리를 통해 사용자가 빈 화면을 보는 시간을 줄이고, LCP P75 2.28초, LCP P90 3.37초에서 개선된 결과를 얻었다. 결과적으로 LCP 81% 감소를 달성했다.
