완벽한 YouTube Core Web Vitals

YouTube 비디오를 임베드하는 방법 (느린 방법)

YouTube는 페이지에 비디오를 임베드하는 것을 아주 간단하게 만들었습니다. 먼저 비디오 페이지로 이동하여 비디오 아래의 공유(share)를 클릭하세요

다음으로 임베드(embed)를 선택하고 임베드 코드를 복사하세요:

코드를 복사하여 사이트의 HTML에 붙여넣으세요. 그런 다음 Lighthouse 감사를 실행하면 First Contentful Paint, Speed Index, Largest Contentful Paint 및 Total Blocking Time과 같은 모든 중요한 지표가 약 1초에서 1.5초 정도 증가한 것을 확인할 수 있습니다. 표준 YouTube 임베드는 1.3MB에서 2.6MB 사이의 JavaScript, CSS, 글꼴 및 추적 스크립트를 로드합니다. 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 자리 표시자의 패딩(padding)은 비디오가 모든 기기에서 제대로 확장되도록 하는 작은 트릭입니다. 이미지는 상단에 절대 위치(absolute)로 배치되며 object-fit:cover 속성을 갖습니다. 이는 배경 이미지를 모방하지만 지연 로딩(lazy loading) 및 반응형 이미지를 허용합니다. 마지막으로 iframe 자체는 절대 위치를 가지며, 표시될 때 전체 자리 표시자를 덮습니다.

이제 마법을 부려볼 시간입니다. 자리 표시자 이미지를 실제 비디오로 변경해 보겠습니다. 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 비디오를 대기열에 추가해 봅시다. 즉시 수행하고 싶지는 않으므로 브라우저가 유휴 상태(idle)가 될 때까지 기다립니다. 단순함을 위해 setTimeout을 사용하지만 requestIdleCallback() 메서드도 훌륭한 선택이 될 수 있습니다. requestIdleCallback은 아직 Safari에서 기본적으로 지원되지 않는다는 점에 유의하세요. 다음과 같은 폴백(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 속성을 사용할 수 있습니다. 이는 미니 HTML 페이지(단지 썸네일과 재생 버튼)를 iframe 태그에 직접 임베드합니다. 방문자가 재생을 클릭하면 브라우저가 이를 실제 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

드롭인(drop-in) 솔루션을 선호한다면 Paul Irish의 lite-youtube-embed 웹 컴포넌트가 이 모든 것을 단일 사용자 정의 요소(custom element)에서 수행합니다. 기본 YouTube 임베드보다 대략 224배 더 빠르며 web.dev에서 권장하는 솔루션입니다.

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

이 솔루션은 썸네일, 재생 버튼, 반응형 크기 조정 및 접근성을 기본적으로 처리합니다. 기본적으로 youtube-nocookie.com을 사용합니다.

이 기술 확장하기

물론 이것은 특정 ID를 가진 단일 YouTube 비디오에만 작동하는 간단한 예시일 뿐입니다. 사이트에서는 이벤트 리스너를 querySelector에 연결하고 IntersectionObserver도 연결하여 스크롤되어 화면에 보이기 전에 YouTube 비디오를 자동으로 로드하는 것이 좋습니다. 어떻게 확장하든 핵심 아이디어는 동일하게 유지됩니다!

CoreDash가 모니터링하는 사이트 전반에서 YouTube 퍼사드 패턴(facade pattern)을 사용하는 페이지는 임베드를 직접 로드하는 페이지보다 평균 LCP가 800ms 더 빠릅니다. 퍼사드 패턴을 구현했다면 Real User Monitoring을 사용하여 실제 방문자 데이터로 개선 사항을 검증하세요.