[Performance] 집노트 목록 페이지 이미지 캐싱 및 LCP 최적화 (/home-notes)

[bae-suho]

문제 요약

• S3 서명 이미지 다수 로딩으로 네트워크 페이로드 과다
• 이미지 캐시 미설정으로 재방문 시 동일 리소스 반복 다운로드
• HTTP/1.1 기반 이미지 요청으로 병렬 처리 비효율
• LCP 이미지 우선순위 미설정
• 불필요한 JS 로딩으로 메인 스레드 점유 증가

---

Lighthouse 주요 지표

• Use efficient cache lifetimes

  • Estimated savings: 17,125 KiB

• Avoid enormous network payloads

  • Total payload: 21,376 KiB

• Modern HTTP

  • Estimated savings: 2,560 ms

• Reduce unused JavaScript

• Minimize main-thread work

  • Total main-thread time: 2.1 s

• LCP request discovery 경고 발생

---

원인 분석 (Lighthouse 기준)

이미지 캐싱 부재

• S3 서명 URL 사용 (?X-Amz-Security-Token)
• Cache-Control 헤더 없음 (TTL: None)
• 약 30여 개 PNG 이미지가 500~700KB 단위로 반복 다운로드

네트워크 프로토콜 문제

• 이미지 요청 전부 HTTP/1.1
• 다수 이미지 요청으로 인해 연결 병목 발생
• HTTP/2 / HTTP/3 미사용

LCP 이미지 우선순위 미설정

• LCP 대상 <img> 요소에 fetchpriority="high" 미적용
• preload 적용 불가 상태
• 이미지 크기 명시 부족으로 렌더링 지연 가능성

이미지 용량 과다

• PNG 원본 그대로 사용
• WebP / AVIF 미적용
• 목록 페이지임에도 썸네일 전략 없음

메인 스레드 점유

• 불필요한 JS 청크 로딩
• 사용되지 않는 코드 다수 포함
• 긴 Main-thread task 다수 발생

---

개선 작업 (Action Items)

이미지 캐싱 개선

• CloudFront 적용 또는 S3 Cache-Control 설정
• 서명 URL 최소화 또는 public cacheable URL 분리
• 정적 이미지에 long-term cache 전략 적용

이미지 최적화

• WebP 또는 AVIF 포맷 변환
• 목록 페이지 전용 썸네일 이미지 제공
• 이미지 사이즈 명시(width/height)

LCP 최적화

• LCP 이미지에 fetchpriority="high" 적용
• 필요 시 preload 적용
• LCP 이미지 수 1개로 제한

네트워크 개선

• HTTP/2 또는 HTTP/3 활성화
• CDN을 통한 이미지 전달

JavaScript 최적화

• 사용하지 않는 JS 코드 제거
• 페이지 단위 code-splitting 강화
• 필요 시 dynamic import 적용

---

완료 기준 (Acceptance Criteria)

• Lighthouse Performance 점수 개선
• 이미지 재방문 시 네트워크 전송량 대폭 감소
• LCP 이미지 로딩 시간 단축
• HTTP/2 이상 프로토콜로 이미지 요청 처리
• 불필요한 JS 로딩 제거 확인

---

참고

• Lighthouse Insights:

  • Use efficient cache lifetimes
  • Avoid enormous network payloads
  • Modern HTTP
  • Reduce unused JavaScript
  • LCP request discovery
  • Minimize main-thread work

---

비고

• 이미지 구조 개선은 상세 페이지(/home-notes/:id)와 공통 전략으로 묶을 수 있음