[Performance] 집노트 상세 페이지 LCP 및 이미지 전송 최적화 (/home-notes/:id)

[bae-suho]

문제 요약

• 대용량 이미지로 인해 페이지 로딩 및 재방문 성능 저하
• 이미지 캐시 미설정으로 동일 리소스 반복 다운로드
• LCP 이미지가 background-image로 로드되어 우선순위 제어 불가

---

Lighthouse 주요 지표

• Use efficient cache lifetimes

  • Estimated savings: 41,417 KiB

• Avoid enormous network payloads

  • Total image payload: 약 41MB

• LCP request discovery 경고 발생

• Modern HTTP 미사용 (HTTP/1.1)

---

원인 분석 (Lighthouse 기준)

이미지 캐싱 부재

• S3 이미지에 Cache-Control 헤더 없음
• 서명 URL 사용으로 캐시 전략 무력화

LCP 이미지 구조 문제

• LCP 대상이 <img>가 아닌 background-image
• preload / fetchpriority 적용 불가
• 초기 HTML에서 LCP 리소스 미노출

이미지 용량 과다

• PNG 원본 다수 사용
• 리사이징 및 포맷 최적화 미적용

네트워크 병목

• 다수 이미지 요청이 HTTP/1.1 기반
• 병렬 처리 비효율

---

개선 작업 (Action Items)

이미지 캐싱

• S3 또는 CDN에 Cache-Control 설정
• CloudFront 적용 검토

LCP 최적화

• background-image → <img> 구조 변경
• LCP 이미지에 fetchpriority="high" 적용
• 필요 시 eager loading

이미지 최적화

• WebP / AVIF 포맷 적용
• 해상도별 이미지 제공
• 썸네일 전략 도입

네트워크 개선

• HTTP/2 또는 HTTP/3 활성화

---

완료 기준 (Acceptance Criteria)

• Lighthouse Performance 점수 개선
• LCP 2.5s 이하
• 이미지 재방문 시 네트워크 다운로드 대폭 감소
• LCP 이미지 preload 가능 상태

---

참고

• Lighthouse Insights:

  • Use efficient cache lifetimes
  • Avoid enormous network payloads
  • LCP request discovery
  • Modern HTTP