이전 모듈에서는 이미지와 관련된 몇 가지 성능 기법을 배웠습니다. 이미지와 관련된 성능 기법은 웹에서 널리 사용되는 리소스 유형이며, 이미지를 최적화하고 사용자의 표시 영역을 고려하지 않으면 상당한 대역폭을 소비할 수 있습니다.
그러나 이미지 외에도 웹에서 흔히 볼 수 있는 미디어 유형이 있습니다. 동영상은 웹페이지에서 자주 사용되는 또 다른 인기 미디어 유형입니다. 가능한 최적화를 살펴보기 전에 먼저 <video> 요소의 작동 방식을 이해하는 것이 중요합니다.
동영상 소스 파일
미디어 파일로 작업할 때 운영체제에서 인식하는 파일(.mp4, .webm 등)을 컨테이너라고 합니다. 컨테이너에는 하나 이상의 스트림이 포함됩니다. 대부분의 경우 동영상 및 오디오 스트림입니다.
코덱을 사용하여 각 스트림을 압축할 수 있습니다. 예를 들어 video.webm는 VP9을 사용하여 압축된 동영상 스트림과 Vorbis를 사용하여 압축된 오디오 스트림이 포함된 WebM 컨테이너일 수 있습니다.
컨테이너와 코덱의 차이를 이해하면 훨씬 적은 대역폭을 사용하여 미디어 파일을 압축하여 전체 페이지 로드 시간이 단축되고 사용자 중심 측정항목이자 3가지 코어 웹 바이탈 중 하나인 페이지의 최대 콘텐츠 렌더링 시간 (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는 일반적으로 수 MB의 데이터를 사용하므로 더 중요한 리소스에 사용할 때 대역폭을 크게 소모할 수 있습니다. 일반적으로 애니메이션 이미지 형식은 피해야 합니다. 이러한 유형의 미디어에는 <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와 같은 전용 동영상 서비스에 문제를 오프로드하는 것이 합리적입니다. 이러한 서비스는 동영상 전송을 최적화하지만 서드 파티 서비스의 동영상을 삽입하면 성능에 영향을 미칠 수 있습니다. 삽입된 동영상 플레이어가 자바스크립트와 같은 많은 추가 리소스를 제공할 수 있기 때문입니다.
이러한 현실을 감안할 때 서드 파티 동영상 삽입은 페이지 성능에 상당한 영향을 미칠 수 있습니다. HTTP Archive에 따르면 YouTube 삽입은 중앙값 웹사이트에서 기본 스레드를 1.7초 이상 차단합니다. 기본 스레드를 장기간 차단하면 페이지의 다음 페인트와의 상호작용 (INP)에 영향을 미칠 수 있는 심각한 사용자 환경 문제입니다. 하지만 초기 페이지 로드 중에 삽입을 즉시 로드하지 않는 방법으로 문제가 될 수 있습니다. 대신 사용자가 상호작용할 때 실제 동영상 삽입으로 대체될 삽입의 자리표시자를 만들 수 있습니다.
동영상 데모
학습한 내용 테스트
상위 <video> 요소 내에 있는 <source> 요소의 순서는 최종적으로 다운로드되는 동영상 리소스를 결정하지 않습니다.
<video> 요소의 poster 속성은 LCP 후보로 간주됩니다.
다음 과정: 웹 글꼴 최적화
특정 리소스 유형을 최적화하는 내용 중 다음으로 다룰 내용은 글꼴입니다. 웹사이트 글꼴 최적화는 간과되는 경우가 많지만 웹사이트의 전반적인 로드 속도와 LCP 및 레이아웃 변경 횟수 (CLS) 등의 측정항목에 상당한 영향을 미칠 수 있습니다.