preview 최적화 1차

[hexdrinker]

작업 내용

preview 앱의 /show/:showId 공연 상세 페이지 Lighthouse 결과를 기준으로 초기 로딩 성능을 개선했습니다.

LCP 포스터 이미지 로딩 개선

• 공연 상세 loader에서 첫 포스터 이미지 URL을 받은 직후 <link rel="preload" as="image">를 주입합니다.
• ShowPreview에 prioritizeFirstImage 옵션을 추가해 preview 실제 페이지에서만 첫 이미지에 fetchpriority="high", loading="eager"를 적용합니다.
• 나머지 캐러셀 이미지는 loading="lazy"로 늦게 로드합니다.
• React 현재 버전에서 fetchPriority camelCase가 DOM attribute로 정상 처리되지 않아 lowercase fetchpriority를 사용했습니다.

포스터 이미지 후보 제공

• ShowPreview의 images 타입을 기존 string[]과 { src, thumbnailSrc }[]를 모두 받을 수 있도록 확장했습니다.
• preview 페이지에서는 API의 showImg.path와 showImg.thumbnailPath를 함께 전달합니다.
• srcSet/sizes를 추가해 브라우저가 화면 조건에 맞는 이미지 후보를 선택할 수 있게 했습니다.
• 기존 admin 미리보기처럼 string[]을 넘기는 사용처는 그대로 동작합니다.

폰트 로딩 개선

• apps/preview/src/index.css의 Pretendard 외부 @import를 제거했습니다.
• apps/preview/index.html에서 cdnjs.cloudflare.com preconnect와 stylesheet preload를 사용하도록 변경했습니다.
• JS 비활성 환경을 위해 noscript fallback을 추가했습니다.

지도/QR 등 부가 기능 지연 로딩

• QR 코드는 예매 다이얼로그가 열릴 때 lazy-load합니다.
• PreviewMap은 지도 영역 렌더링 시점에 lazy-load합니다.
• preview 앱 루트의 NavermapsProvider를 제거하고, 지도 영역에서만 provider를 로드하도록 분리했습니다.
• Naver Maps client id는 apps/preview/src/constants/ncp.ts로 모았습니다.

변경 영향

• ShowPreview는 packages/ui 공유 컴포넌트라 기존 사용처를 확인했습니다.
• apps/admin의 공연 미리보기는 기존처럼 string[] 이미지를 넘기며, prioritizeFirstImage를 사용하지 않으므로 이미지 우선 로딩 정책이 자동 적용되지 않습니다.
• apps/admin은 기존 top-level NavermapsProvider 구조를 유지합니다.
• preview 앱만 지도 provider를 lazy boundary 안으로 옮겼습니다.

검증

• yarn workspace preview type-check
• yarn workspace preview build
• yarn workspace @boolti/ui type-check
• yarn workspace admin type-check

빌드 결과 참고

지도 provider 분리 후 preview production build 기준 메인 청크가 약 511.60kB에서 482.79kB로 감소했고, Vite의 500kB chunk warning이 사라졌습니다.

남은 과제

• file.boolti.in의 공식 이미지 변환 규칙이 확인되면 WebP/AVIF 및 width 기반 이미지 URL을 적용할 수 있습니다.
• 현재는 thumbnailPath를 srcSet 후보로 활용하는 수준입니다.
• /show/:showId를 SSR/prerender하면 초기 HTML에 첫 포스터 preload와 show별 메타를 포함할 수 있어 LCP request discovery를 더 강하게 개선할 수 있습니다.
• lazy-load로 인해 지도/QR 최초 사용 시점은 개발환경에서 이전보다 늦게 느껴질 수 있습니다.