영상 용량의 표준 수치를 왜 제시하지 않나

상세페이지 영상은 몇 메가바이트 이하로 맞추라는 안내가 흔하지만 이 수치를 정한 공식 문서는 확인되지 않습니다. 구글이 문서화한 것은 파일 용량이 아니라 사용자가 체감하는 결과 지표입니다. 코어 웹 바이탈 기준으로 LCP는 2.5초 이내, INP는 200밀리초 이내, CLS는 0.1 이하가 양호 등급입니다.

용량이 아니라 결과로 판정해야 하는 이유는 같은 용량이라도 네트워크, 기기, 로딩 방식에 따라 체감 속도가 완전히 달라지기 때문입니다. 4MB 영상이 지연 로딩되면 LCP에 영향을 주지 않지만, 1MB 영상이라도 첫 화면에서 동기적으로 로드되면 지표가 무너집니다. 판단 단위는 파일이 아니라 로딩 순서입니다.

영상을 붙이면서 첫 화면 속도를 지키는 방법은 무엇인가

구글 web.dev의 영상 지연 로딩 가이드는 video 요소의 preload 속성값을 none, metadata, auto 세 가지로 설명하고, 기본값인 metadata도 의도보다 많은 데이터를 내려받을 수 있으므로 영상 로딩을 최대한 피하려면 preload를 none으로 두는 편이 가장 확실하다고 안내합니다. 지원하는 브라우저에서는 video 요소에 loading을 lazy로 주면 영상과 포스터 이미지를 함께 지연 로딩합니다.

포스터 이미지는 영상 자리표시자로서 영상 자체보다 빨리 표시됩니다. 자동 재생이 아닌 영상이라면 마우스가 올라올 때 preload 값을 metadata로 바꾸는 방식으로 초기 데이터 소비는 줄이면서 재생 지연도 줄일 수 있습니다. 다만 모바일에는 마우스 오버가 없으므로 이 기법은 데스크톱 보조 수단입니다.

첫 화면 이미지에 지연 로딩을 걸면 무엇이 무너지나

가장 흔한 사고가 상세페이지 이미지 전체에 일괄로 지연 로딩 속성을 넣는 구현입니다. 구글은 LCP 후보 이미지를 초기 HTML에서 발견 가능하게 두고 fetchpriority를 high로 부여하라고 권고하며, LCP 이미지를 지연 로딩하면 항상 불필요한 리소스 로드 지연으로 이어지므로 절대 지연 로딩하지 말라고 명시합니다.

같은 가이드는 LCP를 첫 바이트까지의 시간, 리소스 로드 지연, 리소스 로드 시간, 요소 렌더 지연 네 구간으로 나누고, 잘 최적화된 페이지의 배분 기준으로 첫 바이트 약 40퍼센트, 리소스 로드 지연 10퍼센트 미만, 리소스 로드 시간 약 40퍼센트, 요소 렌더 지연 10퍼센트 미만을 제시합니다. 이 배분은 어느 구간을 손봐야 하는지 알려주는 진단 도구이지 구간별 시간 상한이 아닙니다.

움직이는 이미지가 필요할 때 어떤 포맷을 고르나

제품이 움직이는 모습을 보여주려고 애니메이션 GIF를 쓰는 경우가 있는데, 구글은 애니메이션 GIF가 수 메가바이트까지 커지는 반면 같은 시각 품질의 영상은 훨씬 작다며 GIF 대신 영상으로 대체할 것을 권고합니다. 다만 절감 폭을 수치로 제시하지는 않으므로 실제 차이는 자사 소재로 직접 비교해야 합니다.

정지 이미지 쪽에서는 최신 포맷이 유리합니다. 구글 공식 문서 기준으로 WebP 손실 압축 이미지는 동등한 화질의 JPEG보다 파일 크기가 25에서 34퍼센트 작고, 무손실 WebP는 PNG보다 26퍼센트 작습니다. WebP는 손실과 무손실 양쪽에서 투명도를 지원하므로 누끼 이미지에서 PNG 대비 절감 폭이 큽니다.

소리와 움직임에서 걸리는 규정은 무엇인가

자동 재생은 성능만의 문제가 아닙니다. 한국형 웹 콘텐츠 접근성 지침 2.2는 검사항목 5.4.2에서 자동으로 소리가 재생되지 않아야 한다고 규정하며, 3초 미만의 소리는 예외로 두되 그 이상이면 제어 수단을 제공하도록 합니다. 같은 지침 6.2.2는 자동으로 변경되는 콘텐츠에 정지 기능을 제공하도록 요구합니다.

실무에서는 상세페이지 상단 영상을 음소거 자동 재생으로 두고 소리 켜기 버튼을 노출하는 형태가 이 요구를 만족시키는 기본형입니다. 재생과 정지 버튼을 함께 두어야 정지 기능 요구도 함께 충족됩니다.

도입 효과는 어떤 순서로 확인하나

영상을 넣고 나서 판정할 것은 두 가지입니다. 첫째, 코어 웹 바이탈 세 지표가 양호 구간을 유지하는지입니다. 둘째, 상세페이지에서 장바구니로 넘어가는 비율이 기준선 대비 움직였는지입니다. 로드 시간이 늘어나면 이탈이 는다는 방향성은 여러 성능 자료에 반복 인용되지만, 그 증가율 수치는 국내 이커머스 표본으로 검증된 공식 통계가 아니므로 목표치로 삼지 않습니다.

비교는 4주 기준선을 확보하고 한 번에 한 항목만 바꾸며 같은 요일끼리 대조하는 절차로 합니다. 영상 도입과 동시에 상세페이지 구성을 함께 바꾸면 원인을 분리할 수 없습니다.