YouTube 동영상으로 완벽한 Core Web Vitals 달성하기

YouTube 동영상을 임베드하는 방법(느린 방식)

YouTube 동영상을 페이지에 임베드하는 방법은 매우 간단합니다. 먼저 동영상 페이지로 이동한 뒤 동영상 아래의 '공유'를 클릭합니다.

다음으로 '퍼가기'를 선택하고 임베드 코드를 복사합니다:

이 코드를 복사하여 사이트 HTML에 붙여넣습니다. 이후 Lighthouse 감사를 실행하면 First Contentful Paint, Speed Index, Largest Contentful Paint, Total Blocking Time 등 주요 지표가 약 1~1.5초 늘어납니다. 기본 YouTube 임베드는 JavaScript, CSS, 폰트, 추적 스크립트 등 1.3~2.6MB에 달하는 리소스를 로드합니다. 또한 8~10개의 서로 다른 도메인으로 20개 이상의 HTTP 요청을 보냅니다. 이 모든 작업이 방문자가 재생 버튼을 누르기도 전에 일어납니다. 이제 이 문제를 해결해 보겠습니다:

기본 YouTube 임베드

스마트 YouTube 임베드

YouTube Core Web Vitals 개선하기!

이미지 플레이스홀더를 만들어 Core Web Vitals를 개선합니다. 페이지 로드 중에는 플레이스홀더만 로드됩니다. 실제 YouTube 동영상이 필요한 시점에만 플레이스홀더를 실제 동영상으로 교체합니다. 이를 퍼사드 패턴(facade pattern)이라고 합니다. 가벼운 대체 요소를 먼저 보여주고, 무거운 서드파티 리소스는 상호작용이 일어날 때만 로드하는 방식입니다. 동일한 기법을 Google Maps와 채팅 위젯에도 적용할 수 있습니다.

1단계: 플레이스홀더 이미지 다운로드

플레이스홀더 이미지를 다운로드하는 것은 매우 간단합니다. YouTube 동영상 URL을 확인하십시오. 이 예제에서는 다음 URL을 사용합니다: https://www.youtube.com/watch?v=Oxv6IRcuNaI

URL을 보면 'Oxv6IRcuNaI'라는 변수가 있습니다. 이 변수를 복사하여 YouTube 동영상의 기본 이미지 경로에 넣습니다: https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

해당 URL로 접속하여 이미지를 마우스 우클릭한 뒤 '이미지를 다른 이름으로 저장'을 선택합니다. 다운로드한 이미지는 필요에 맞게 크기를 조절합니다.

2단계: 플레이스홀더 만들기

다음 단계는 플레이스홀더를 만드는 것입니다. relative 위치가 지정된 div를 사용하고, 그 안에 object-fit:cover 속성을 가진 이미지와 나중에 채워 넣을 빈 iframe을 배치합니다. 개인정보 보호를 위해 임베드 URL에서 youtube.com 대신 youtube-nocookie.com을 사용할 수 있습니다. 이렇게 하면 동영상이 실제로 재생되기 전까지 YouTube가 추적 쿠키를 설정하지 않습니다.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        width="560"
        height="315"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe
       id="ytiframe"
       width="560"
       height="315"
       data-src="https://www.youtube-nocookie.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

기본 구조를 잡았으니 이제 스타일을 추가해 보겠습니다. YouTube 플레이스홀더에 적용한 패딩은 모든 기기에서 동영상 크기가 알맞게 조절되도록 하는 트릭입니다. 이미지는 상단에 absolute 위치로 배치되며 object-fit:cover 속성을 가집니다. 이는 배경 이미지처럼 동작하면서도 lazy loading과 반응형 이미지를 활용할 수 있게 해줍니다. 마지막으로 iframe 자체도 absolute 위치를 가지며, 화면에 표시될 때 플레이스홀더 전체를 덮습니다.

이제 핵심 동작입니다. 플레이스홀더 이미지를 실제 동영상으로 교체해 보겠습니다. YouTube 플레이스홀더에 이벤트 리스너를 추가합니다. 방문자가 이미지 위로 마우스를 올리면(hover) YouTube iframe이 로드되고, opacity 변경을 통해 화면에 나타납니다.

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder');

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);

YouTube 동영상 항상 표시하기

한 걸음 더 나아가, 상호작용이 없더라도 플레이스홀더 이미지가 항상 YouTube 동영상으로 교체되도록 큐에 등록해 보겠습니다. 페이지 로드 즉시 실행하지 않고 브라우저가 유휴 상태가 될 때까지 기다립니다. 여기서는 단순성을 위해 setTimeout을 사용하지만, requestIdleCallback() 메서드를 사용하는 것도 좋은 선택입니다. 다만 Safari는 requestIdleCallback을 아직 기본적으로 지원하지 않으므로 주의해야 합니다. 다음과 같이 fallback을 사용하십시오: const idle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));

<script>
var ytplaceholder = document.getElementById ('ytplaceholder');

var videolistner = function (e) {
   var ytiframe = document.getElementById ('ytiframe');
   ytiframe.src = ytiframe.getAttribute ('data-src');
   ytiframe.onload = ytiframe.style.opacity=1;
   ytplaceholder.removeEventListener ("mouseover", videolistner);
   };

ytplaceholder.addEventListener ('mouseover', videolistner);

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

단 몇 줄의 코드만으로 완벽한 페이지 속도 점수를 유지하면서 YouTube 동영상을 임베드할 수 있습니다.

대안: srcdoc 속성을 활용한 기법

JavaScript를 전혀 사용하지 않으려면 iframe의 srcdoc 속성을 활용하면 됩니다. 이 방식은 iframe 태그 안에 직접 미니 HTML 페이지(썸네일과 재생 버튼만 포함)를 임베드합니다. 방문자가 재생 버튼을 클릭하면 브라우저가 이를 실제 YouTube 플레이어로 교체합니다.

<iframe
   src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
   srcdoc="<style>*{padding:0;margin:0;overflow:hidden}
   html,body{height:100%}
   img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
   span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;
   color:white;text-shadow:0 0 0.5em black}</style>
   <a href=https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1>
   <img src=https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp
   alt='Video title'><span>&#x25BA;</span></a>"
   width="560"
   height="315"
   loading="lazy"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

srcdoc 방식은 방문자가 상호작용하기 전까지 외부 리소스를 전혀 로드하지 않습니다. 단점은 일부 모바일 브라우저에서 두 번의 탭(첫 번째는 srcdoc 링크 활성화, 두 번째는 동영상 재생)이 필요하다는 점입니다.

프로덕션 적용: lite-youtube-embed

즉시 도입 가능한 솔루션을 선호한다면 Paul Irish가 만든 lite-youtube-embed 웹 컴포넌트가 적합합니다. 단 하나의 커스텀 엘리먼트로 이 모든 동작을 처리합니다. 기본 YouTube 임베드보다 약 224배 빠르며, web.dev에서 권장하는 솔루션이기도 합니다.

<lite-youtube videoid="Oxv6IRcuNaI"></lite-youtube>

썸네일, 재생 버튼, 반응형 크기 조절, 접근성까지 별도 설정 없이 기본으로 지원합니다. 기본값으로 youtube-nocookie.com을 사용합니다.

이 기법 확장하기

물론 지금까지 살펴본 코드는 특정 ID를 가진 단일 YouTube 동영상만을 위한 간단한 예제입니다. 실제 사이트에서는 querySelector에 이벤트 리스너를 등록하고, IntersectionObserver를 함께 사용하여 동영상이 viewport 안으로 스크롤되기 전에 자동으로 로드되도록 구성하는 것이 좋습니다. 어떤 방식으로 확장하든 기본 핵심 원리는 동일합니다.

CoreDash로 모니터링하는 사이트 전체를 분석한 결과, YouTube에 퍼사드 패턴을 적용한 페이지는 직접 임베드한 페이지보다 LCP가 평균 800ms 더 빨랐습니다. 퍼사드 패턴을 구현했다면 Real User Monitoring을 통해 실제 방문자 데이터로 성능 개선 효과를 검증하십시오.