유튜브 영상 넣었더니 페이지가 느려질 때, iframe 지연 로딩과 썸네일 대체법
유튜브 영상을 페이지에 넣으면 사용자가 재생을 누르지 않아도 플레이어 스크립트와 리소스가 페이지 로딩과 함께 내려옵니다.
영상이 두세 개만 되어도 모바일에서 첫 화면이 눈에 띄게 늦어지는데, iframe 지연 로딩과 썸네일 대체 방식으로 대부분 해결됩니다.
💡 영상 하나가 왜 이렇게 무거울까요?
임베드 코드는 작은 iframe 한 줄이지만, 그 안에서 유튜브 플레이어가 자체 스크립트와 스타일, 썸네일을 따로 불러옵니다. 우리 사이트 파일이 아니라서 압축이나 캐시를 손댈 수도 없습니다. 리뉴얼 진단 때 PageSpeed Insights를 돌려 보면 서드파티 코드 항목 상위에 유튜브가 자주 보입니다.
1. 스크롤 아래쪽 영상은 loading="lazy" 한 줄로
가장 손쉬운 방법은 iframe에 loading="lazy"를 붙이는 것입니다. 화면 근처까지 스크롤해야 영상을 불러오기 때문에, 페이지 하단의 시공 영상이나 후기 영상에는 이것만으로도 효과가 큽니다. 주요 브라우저 최신 버전에서 모두 지원하고, 미지원 브라우저는 평소처럼 불러올 뿐이라 부작용이 없습니다. 영상 자리가 갑자기 생기며 화면이 밀리지 않도록 aspect-ratio로 공간을 먼저 잡아 두세요.
<!-- 아래쪽에 있는 영상: 화면 근처에 올 때 불러오기 -->
<div style="aspect-ratio: 16 / 9;">
<iframe
src="https://www.youtube.com/embed/영상ID"
title="시공 과정 소개 영상"
loading="lazy"
style="width: 100%; height: 100%; border: 0;"
allowfullscreen></iframe>
</div>2. 영상이 많거나 첫 화면에 있다면 썸네일로 대체
첫 화면에 있는 영상은 lazy를 붙여도 바로 불러오기 때문에 효과가 없습니다. 이때는 처음에 썸네일 이미지와 재생 버튼만 보여 주고, 사용자가 누른 순간에 진짜 iframe으로 바꾸는 방식을 씁니다. 구글 Lighthouse에서도 '퍼사드(facade)'라는 이름으로 권장하는 방법입니다. 썸네일은 유튜브의 i.ytimg.com 주소를 쓰면 되고, 클릭으로 바꾸는 방식이라 autoplay=1을 붙이면 한 번에 재생됩니다.
<!-- HTML: 처음엔 썸네일 버튼만 -->
<button class="yt" data-id="영상ID"
aria-label="회사 소개 영상 재생">
<img src="https://i.ytimg.com/vi/영상ID/hqdefault.jpg"
alt="" loading="lazy">
</button>
/* JS: 누르는 순간 iframe으로 교체 */
document.querySelectorAll('.yt').forEach(function (btn) {
btn.addEventListener('click', function () {
var f = document.createElement('iframe');
f.src = 'https://www.youtube.com/embed/'
+ btn.dataset.id + '?autoplay=1';
f.allow = 'autoplay; encrypted-media; fullscreen';
f.style.cssText = 'width:100%;height:100%;border:0';
btn.replaceWith(f);
});
});3. 적용 전에 확인할 점
- 썸네일 방식은 클릭 전까지 유튜브 조회수가 잡히지 않습니다. 대신 재생 버튼 클릭을 분석 도구 이벤트로 따로 기록해 두면 관심도를 볼 수 있습니다.
- 게시판 에디터로 영상을 넣는 사이트는 저장된 iframe 코드에 lazy 속성이 빠져 있는 경우가 많으니, 스킨이나 출력 단계에서 일괄로 붙이는 편이 관리하기 쉽습니다.
"영상은 보여 줄 때 불러오면 됩니다. 처음부터 다 실을 필요는 없습니다."
나눔웹은 영상과 외부 위젯이 많은 페이지일수록
불러오는 순서부터 설계해서 첫 화면이 가볍게 뜨도록 만듭니다.