라이트하우스 성능

지역별 둘러보기 페이지 성능 레전드 ㅋㅋ

아 대박 트러블 슈팅 임시저장하고 90일 지나서 다 날라가버렷다.

 

 

lazy 로딩 적용하기 전 용량 -> 1,641.77 kb

 

적용 후 -> 718.49 kB

• Before (최적화 전):
  • 메인 파일(index.js): 1,641 kB (약 1.64 MB)
  • 상황: 사용자가 처음 들어오면 1.64MB를 다 받아야 흰 화면이 사라짐.
• After (최적화 후):
  • 메인 파일(index.js): 718 kB (약 0.71 MB) 📉 (923kB 감소!)

 

최적화 전 이미지 크기: 1.5 MB"

최적화 후 
127 kb

92퍼센트 감소

 

어렵당

 

메인페이지

최적화 전

이미지만 최적화 햇을때

별로 달라진게 없어서 알아본 결과
백엔드 API의 느린 응답 속도 (약 0.6초 낭비)

• /api/regions/major?lang=ko ➔ 568ms (0.56초)
• 브라우저가 화면을 띄우고 이미지를 다운받고 싶어도, 백엔드에서 저 이미지 URL(https://korip-image...)을 0.6초 뒤에야 던져줍니다. 프론트엔드가 아무리 fetchpriority=high로 빨리 다운받으려고 대기해도, 주소를 늦게 알려주니 기다릴 수밖에 없는 겁니다.

2. S3 서버의 무거운 원본 이미지 (215.8 KiB)

• 백엔드에서 준 주소로 S3에 이미지를 가지러 갔더니, WebP 변환이 안 된 무거운 이미지(215.8KB)가 떡하니 있는 겁니다.
• 심지어 화면에 그리는 크기(890x500)보다 훨씬 큰 원본(946x719)을 그냥 던져주고 있습니다. 여기서 또 다운로드 시간이 갉아먹힙니다.

3. 숨어있던 최종 흑막: 폰트 파일 (2MB)

• /fonts/PretendardVariable.woff2 ➔ 2,012.01 KiB (약 2MB!!)
• 이게 진짜 치명적입니다. 프리텐다드 가변 폰트를 통째로 다운로드하고 계시네요! 이미지를 빨리 받아야 하는 그 금쪽같은 초반 네트워크 대역폭을 저 2MB짜리 거대한 폰트 파일이 꽉 막고 비켜주지 않고 있는 겁니다.

폰트 최적화 후

 

다이나믹 서브셋 CDN으로 바꿨더니 댓음