동영상 실적

이전 모듈에서는 이미지를 최적화하고 사용자의 뷰포트를 고려하지 않으면 상당한 대역폭을 소비할 수 있는 웹에서 널리 사용되는 리소스 유형인 이미지와 관련된 몇 가지 성능 기법을 알아봤습니다.

하지만 이미지는 웹에서 흔히 볼 수 있는 유일한 미디어 유형은 아닙니다. 동영상은 웹페이지에서 자주 사용되는 또 다른 인기 있는 미디어 유형입니다. 가능한 최적화를 살펴보기 전에 먼저 <video> 요소가 어떻게 작동하는지 이해하는 것이 중요합니다.

동영상 소스 파일

미디어 파일을 사용할 때 운영체제에서 인식하는 파일(.mp4, .webm 등)을 컨테이너라고 합니다. 컨테이너에는 하나 이상의 스트림이 포함됩니다. 대부분의 경우 동영상 및 오디오 스트림입니다.

코덱을 사용하여 각 스트림을 압축할 수 있습니다. 예를 들어 video.webm는 VP9를 사용하여 압축된 동영상 스트림과 Vorbis를 사용하여 압축된 오디오 스트림이 포함된 WebM 컨테이너일 수 있습니다.

컨테이너와 코덱의 차이를 이해하면 대역폭을 훨씬 적게 사용하여 미디어 파일을 압축할 수 있으므로 전체 페이지 로드 시간이 단축되고 사용자 중심 측정항목이자 3가지 Core Web Vitals 중 하나인 페이지의 최대 콘텐츠 렌더링 시간 (LCP)이 개선될 수 있습니다.

동영상 파일을 압축하는 한 가지 방법은 FFmpeg를 사용하는 것입니다.

ffmpeg -i input.mov output.webm

위 명령어는 FFmpeg를 사용할 때 가장 기본적인 명령어이지만 input.mov 파일을 가져와 기본 FFmpeg 옵션을 사용하여 output.webm 파일을 출력합니다. 위 명령어는 모든 최신 브라우저에서 작동하는 더 작은 동영상 파일을 출력합니다. 동영상 또는 오디오 옵션 FFmpeg 제공을 조정하면 동영상의 파일 크기를 더욱 줄일 수 있습니다. 예를 들어 <video> 요소를 사용하여 GIF를 대체하는 경우 오디오 트랙을 삭제해야 합니다.

ffmpeg -i input.mov -an output.webm

조금 더 세부적으로 조정하려면 가변 비트 전송률 인코딩을 사용하지 않고 동영상을 압축할 때 FFmpeg에서 -crf 플래그를 제공합니다. -crf은 상수 속도 계수를 나타냅니다. 이 설정은 압축 수준을 조정하며, 지정된 범위 내의 정수를 허용하여 조정합니다.

H.264 및 VP9와 같은 코덱은 -crf 플래그를 지원하지만, 사용 여부는 사용하는 코덱에 따라 다릅니다. 자세한 내용은 H.264로 동영상 인코딩 시 일정한 비율 계수 및 VP9로 동영상 인코딩 시 일정한 품질을 참고하세요.

여러 형식

동영상 파일로 작업할 때 여러 형식을 지정하면 모든 최신 형식을 지원하지 않는 브라우저의 대체로 작동합니다.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

모든 최신 브라우저에서 H.264 코덱을 지원하므로 MP4를 기존 브라우저의 대체로 사용할 수 있습니다. WebM 버전은 아직 널리 지원되지 않는 최신 AV1 코덱을 사용하거나 AV1보다 더 잘 지원되지만 일반적으로 AV1만큼 압축되지 않는 이전 VP9 코덱을 사용할 수 있습니다.

poster 속성

동영상의 포스터 이미지는 <video> 요소의 poster 속성을 사용하여 추가됩니다. 이는 재생이 시작되기 전에 사용자에게 동영상 콘텐츠가 무엇인지 힌트를 제공합니다.

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

자동재생

HTTP Archive에 따르면 웹 전반의 동영상 중 20%에 autoplay 속성이 포함됩니다. autoplay는 동영상을 즉시 재생해야 하는 경우(예: 동영상 배경으로 사용하거나 애니메이션 GIF 대체로 사용)에 사용됩니다.

애니메이션 GIF는 특히 복잡한 세부정보가 포함된 프레임이 많은 경우 매우 클 수 있습니다. 애니메이션 GIF는 몇 메가바이트의 데이터를 소비하는 경우가 많으며, 이는 더 중요한 리소스에 사용하는 것이 더 나은 대역폭을 크게 소모할 수 있습니다. 일반적으로 애니메이션 이미지 형식은 피해야 합니다. <video>에 해당하는 형식이 이러한 유형의 미디어에 훨씬 더 효율적이기 때문입니다.

동영상 자동 재생이 웹사이트의 요구사항인 경우 <video> 요소에서 직접 autoplay 속성을 사용할 수 있습니다.

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

poster 속성을 Intersection Observer API와 결합하면 뷰포트 내에 있는 동영상만 다운로드하도록 페이지를 구성할 수 있습니다. poster 이미지는 동영상의 첫 번째 프레임과 같은 저화질 이미지 자리표시자일 수 있습니다. 동영상이 뷰포트에 표시되면 브라우저에서 동영상 다운로드를 시작합니다. 이렇게 하면 초기 표시 영역 내 콘텐츠의 로드 시간이 개선될 수 있습니다. 단점은 autoplay에 poster 이미지를 사용하면 동영상이 로드되고 재생될 때까지 사용자에게 이미지가 잠깐만 표시된다는 것입니다.

사용자가 시작한 재생

일반적으로 브라우저는 HTML 파서가 <video> 요소를 발견하는 즉시 동영상 파일 다운로드를 시작합니다. 사용자가 재생을 시작하는 <video> 요소가 있는 경우 사용자가 상호작용할 때까지 동영상이 다운로드되지 않도록 하는 것이 좋습니다.

<video> 요소의 preload 속성을 사용하여 동영상 리소스의 다운로드에 영향을 줄 수 있습니다.

  • preload="none"을 설정하면 동영상 콘텐츠를 미리 로드하지 않도록 브라우저에 알립니다.
  • preload="metadata"를 설정하면 동영상 메타데이터(예: 동영상 길이)와 기타 대략적인 정보만 가져옵니다.

사용자가 재생을 시작해야 하는 동영상을 로드하는 경우 preload="none"를 설정하는 것이 가장 바람직할 수 있습니다.

이 경우 poster 이미지를 추가하여 사용자 환경을 개선할 수 있습니다. 이를 통해 사용자에게 동영상에 대한 맥락을 제공할 수 있습니다. 또한 포스터 이미지가 LCP 요소인 경우 fetchpriority="high"와 함께 <link rel="preload"> 힌트를 사용하여 poster 이미지의 우선순위를 높일 수 있습니다.

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

삽입

동영상 콘텐츠를 효율적으로 최적화하고 제공하는 데 따르는 모든 복잡성을 고려할 때 YouTube나 Vimeo와 같은 전용 동영상 서비스에 문제를 오프로드하는 것이 합리적입니다. 이러한 서비스는 동영상 게재를 최적화하지만, 서드 파티 서비스의 동영상을 삽입하면 삽입된 동영상 플레이어가 JavaScript와 같은 많은 추가 리소스를 제공할 수 있으므로 실적에 자체적인 영향을 미칠 수 있습니다.

이러한 현실을 고려할 때 서드 파티 동영상 삽입은 페이지 성능에 상당한 영향을 미칠 수 있습니다. HTTP Archive에 따르면 YouTube 삽입은 중간 웹사이트의 기본 스레드를 1.7초 이상 차단합니다. 기본 스레드를 장시간 차단하면 페이지의 다음 페인트에 대한 상호작용 (INP)에 영향을 미칠 수 있는 심각한 사용자 환경 문제가 발생합니다. 하지만 초기 페이지 로드 중에 삽입을 즉시 로드하지 않고 대신 사용자가 삽입과 상호작용할 때 실제 동영상 삽입으로 대체되는 삽입 자리표시자를 만들어 절충할 수 있습니다.

동영상 데모

학습한 내용 테스트

상위 <video> 요소 내의 <source> 요소 순서는 최종적으로 다운로드되는 동영상 리소스를 결정하지 않습니다.

참입니다.
다시 시도해 보세요.
거짓입니다.
정답입니다.

<video> 요소의 poster 속성은 LCP 후보로 간주됩니다.

참입니다.
정답입니다.
거짓입니다.
다시 시도해 보세요.

다음: 웹 글꼴 최적화

특정 리소스 유형 최적화에 관한 다음 내용은 글꼴입니다. 웹사이트의 글꼴 최적화는 간과하기 쉽지만 웹사이트의 전체 로드 속도와 LCP, 누적 레이아웃 이동 (CLS)과 같은 측정항목에 큰 영향을 미칠 수 있습니다.