동영상 실적

이전 모듈에서는 이미지(이미지를 사용할 수 있음)는 웹에서 널리 사용되는 리소스 유형으로 최적화를 위해 주의를 기울이지 않고 사용자의 표시됩니다.

하지만 이미지 외에도 웹에서 흔히 볼 수 있습니다. 동영상 웹페이지에서 자주 사용되는 또 다른 인기 미디어 유형입니다. 몇 가지 기능을 살펴보기 전에 최적화가 필요한 경우 먼저 <video>의 작동 방식을 이해하는 것이 중요합니다. 요소의 작동 원리를 알 수 있습니다.

동영상 소스 파일

미디어 파일로 작업할 때 운영체제에서 인식하는 파일은 (.mp4, .webm 등)을 컨테이너라고 합니다. 컨테이너에는 스트림이 여러 개 이상 있어야 합니다. 대부분의 경우 동영상 및 오디오 스트림입니다.

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

컨테이너와 코덱의 차이점을 이해하면 도움이 됩니다. 왜냐하면 훨씬 적은 대역폭으로 미디어 파일을 압축하고 이렇게 하면 전체 페이지 로드 시간이 단축되고 페이지 로드 시간이 단축될 수 있습니다. 페이지의 최대 콘텐츠 페인트 (LCP)는 사용자 중심 측정항목인 3가지 코어 웹 바이탈 중 하나입니다

동영상 파일을 압축하는 한 가지 방법은 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만큼 압축하지는 않습니다.

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>에 상응하는 것이 이 유형의 미디어에 훨씬 더 효율적이기 때문입니다.

동영상 자동재생이 웹사이트의 요구사항인 경우 autoplay 속성을 <video> 요소에 직접 추가하면 됩니다.

<!-- 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 요소이므로 poster 이미지의 크기를 <link rel="preload"> 힌트를 사용하여 fetchpriority="high":

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

동영상 삽입

동영상 콘텐츠를 효율적으로 최적화하고 제공하는 데 필요한 모든 복잡성을 감안할 때 이러한 문제를 전용 동영상 서비스에 맡기는 것이 (YouTube 또는 Vimeo) 이러한 서비스는 동영상 전송을 최적화하지만 제3자 서비스의 동영상을 삽입하는 것은 많은 추가 동영상을 제공할 수 있기 때문에 리소스를 포함할 수 있습니다

이러한 현실을 고려할 때 서드 파티 동영상 삽입은 확인할 수 있습니다 HTTP Archive에 따르면 YouTube의 퍼가기는 기본 스레드를 차단합니다. 1.7초 넘게 조회 기본 스레드 차단 장기간 걸리며 기간은 심각한 사용자 환경 문제로 페이지의 Interaction to Next Paint (INP)를 참조하세요. 그러나 타협할 수도 있습니다 임베딩을 즉시 로드하지 않고 대신 실제 동영상 삽입으로 대체되는 삽입 동영상의 자리표시자 생성 사용자가 광고와 상호작용할 때 발생합니다.

동영상 데모

학습한 내용 테스트

다음 도움말: 웹 글꼴 최적화하기

다음은 특정 리소스 유형을 최적화하는 데 있어 글꼴입니다. 웹사이트 글꼴을 최적화하는 것은 간과하기 쉽지만 웹사이트의 전반적인 로드 속도 및 LCP 및 누적 레이아웃 변경 (CLS)과 같은 주요 구성요소를 사용합니다.