dentOne 홈페이지

Trouble Shooting

• # MDX 이미지 크기 자동 수집·주입으로 CLS 개선

  [문제]CDN URL로 참조하는 매뉴얼 이미지에 크기가 지정되지 않아, 이미지 로딩 후 콘텐츠가 밀리는 레이아웃 시프트가 발생했습니다. 이미지 68개 중 66개에 width가 없는 페이지를 네트워크 스로틀링 조건에서 측정한 결과, 표준 CLS 중앙값이 3.71이었습니다.

  [해결]MDX 콘텐츠 114편과 원격 이미지 437장의 크기를 수작업으로 관리하면 누락 위험이 커, 크기 정보를 JSON으로 캐싱하고 MDX를 스캔해 캐시에 없는 이미지만 CDN에서 내려받도록 구현했습니다. 렌더링 시 width·height를 주입해 이미지 영역을 미리 확보하고, 크기를 못 구한 이미지는 일반 img로 폴백해 네트워크 없는 CI에서도 빌드가 깨지지 않게 했습니다. 수집 스크립트는 npm lifecycle(predev·prebuild)에 연결해 자동 수행되도록 했습니다. 동일 재현 조건에서 표준 CLS 중앙값을 3.71에서 0.0001로 개선했습니다.

• # 배경 영상 지연 로딩으로 초기 렌더링 성능 개선

  [문제]배경 영상이 다수 배치된 랜딩 페이지에서 Chrome DevTools Network를 확인하던 중, 스크롤하지 않아도 화면 밖 영상까지 초기 요청되는 현상을 발견했습니다. 비가시 영역 영상의 동시 요청이 초기 대역폭을 경쟁하면서, LCP 요소인 히어로 이미지 표시가 3.9s까지 지연됐습니다.

  [해결]preload="none"으로는 자동 재생 영상의 요청을 막을 수 없어, src 주입 시점 자체를 제어하는 방식을 선택했습니다. 초기 렌더링에서는 주입을 보류하고 IntersectionObserver로 뷰포트 근접을 감지한 영상에만 src를 주입하는 LazyVideo 컴포넌트를 구현했으며, display:none인 사본은 교차하지 않아 함께 제외됩니다. 첫 화면 리소스의 네트워크 경합이 줄면서 LCP를 3.9s에서 1.5s로 61% 개선하고, 초기 영상 요청은 19건에서 4건, 전송량은 7.2MB에서 1.4MB로 81% 줄였습니다. (1.6Mbps 스로틀링, 3회 중앙값)