[여정 프로젝트] 메인 페이지 로딩 25초 → 1.5초, 최적화

 

메인 페이지가 늦게 뜨는 문제 해결기

 

메인 페이지 진입 시 25초 이상 걸리는 이상 현상을 해결했던 과정을 공유합니다.
SVG, 압축, lazy loading 등 단순한 이슈였지만, 초기 렌더링 시간보다 94% 단축하여 체감 성능을 10배이상 개선했습니다.

 

현상 요약

• 메인 페이지 첫 진입 시 25초 이상 지연
• 서버는 빠르게 응답했지만, 브라우저 렌더링이 한참 뒤에 완료됨
• DevTools -> Network 탭에서 보면, 몇몇 리소스가 수십 MB 수준의 SVG
• 이미지 수십 개가 동시에 요청되며 렌더링 병목 발생함

1. SVG 파일 용량이 비정상적으로 큼
   
   • .svg 하나당 12~16MB
   • 벡터 그래픽이라 용량이 낮을 것으로 생각했는데, 내부에 base64 인코딩 이미지가 포함되어 있었음.
   • 실제로는 텍스트가 아닌 이미지 덩어리라 용량이 매우 커짐
2. 압축(gzip) 미적용
   
   • Content-Encoding: gzip 헤더 없음
   • CloudFront, S3 설정에서 압축이 적용되지 않음
   • 텍스트 기반 리소스임에도 압축 없이 전송되어 네트워크 병목 발생
3. Lazy Loading 미적용
   • 모든 이미지가 <img> 태그로 직접 로드됨
   • <img loading="lazy"> 미적용 -> 한 번에 전체 이미지 요청
   • 초기 렌더링 시간 급증, 브라우저 메모리도 폭발 

해결 방법

1. svg -> jpg로 대체

• 용량 큰 .svg -> .jpg로 리사이징/재변환
• 이미지 품질이 중요하지 않은 경우 svg대신 압축 이미지 포맷 사용

 

2. gzip 압축 적용

• CloudFront / S3에서 정적 리소스 gzip 설정 추가

적용 결과

첫 진입 시간	약 25초	1.54초
네트워크 리소스 총 용량	약 60MB+	약 5MB

• 약 94% 이상 렌더링 시간 단축