Youtube iframe 라이브러리 요청 문제

Youtube iframe 라이브러리 요청 문제

이전에 어느 고객사에서 페이지 로딩 시간이 오래걸린다는 이야기가 나와서 왜그런지 확인해본 적이 있다.
원인은 페이지를 요청하면 똑같은 라이브러리들을 반복적으로 여러번 가져오고 있어서 
거의 한 페이지 가져오는데 용량이 70mb 정도 였던것 같았다.

해당 라이브러리들이 뭔지 찾아보니 유튜브 영상을 가져와서 iframe으로 재생할 때 필요한 라이브러리들이었다.
페이지에 유튜브 영상 iframe을 삽입하면 페이지가 렌더링될 때
필요한 라이브러리들을 유튜브서버?에서 가져오게 된다.

그리고 삽입된 iframe의 수 만큼 라이브러리들을 요청하게 된다.

 

문제가 됐던 부분은 영상들의 리스트(영상 썸네일)들을 이미지가 아닌 실제 iframe을 넣어서 썸네일 이미지처럼 보이게 해두었다.

즉, 영상 리스트의 수가 많아질수록 iframe의 수도 그만큼 증가하고, 그만큼 라이브러리를 추가로 계속 요청하게 된다. 

 

참고로 그 이후의 동작은, 영상을 클릭하면 클릭된 해당 iframe이 재생되는 것이 아니라 따로 팝업창을 띄어서 팝업창 안에서 재생하게 만들었다.

 

iframe으로 삽입된 유튜브 영상이 몇 개 안 된다면 크게 문제가 되지 않지만 
한 페이지 안에서 많은 유튜브 iframe들이 삽입되어 있다면, 
삽입된 iframe 갯 수 만큼 라이브러리들을 가져오게 되어 페이지가 매우 무거워진다.

 

유튜브 iframe이 렌더링되면 가져오는 유튜브관련 라이브러리들

 

아래 코드는 불필요하게 유튜브 iframe을 많이 사용하여 유튜브 라이브러리들을 여러번 가져오는 잘못된 예시

(js, css는 생략)

<!-- ❌❌❌ 잘못된 경우 ❌❌❌ -->
<ul>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/VTUVHBZ7iYg">
      <iframe width="857" height="482" 
      src="https://www.youtube.com/embed/VTUVHBZ7iYg" 
      title="Disney Soundtracks With Lyrics 👛 Walt Disney&#39;s Best Classic Movie Soundtracks 💦 Disney Songs" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      referrerpolicy="strict-origin-when-cross-origin" 
      allowfullscreen></iframe>
    </a>   
  </li>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/sJrJO9ymOBw">
      <iframe width="857" height="482" 
      src="https://www.youtube.com/embed/sJrJO9ymOBw" 
      title="𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭 지친 마음을 달래줄 따뜻한 지브리 OST 모음 | 오케스트라 버전 | 가사 없는 음악 | Studio Ghibli OST" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      referrerpolicy="strict-origin-when-cross-origin" 
      allowfullscreen></iframe>
    </a>   
  </li>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/bhLKFT8YkOA">
      <iframe width="857" height="482" 
      src="https://www.youtube.com/embed/bhLKFT8YkOA" 
      title="𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭 🔥1초만 들어도 무조건 아는 띵곡 팝송" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
      referrerpolicy="strict-origin-when-cross-origin" 
      allowfullscreen></iframe>
    </a>   
  </li>
</ul>

<!-- 팝업창 -->
<div class="overlay"></div>
<div class="video-popup">
  <button class="close-btn">Close</button>
  <iframe id="youtubeIframe" 
  src="" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe>
</div>

 

li a 를 클릭하면 팝업창인 video-popup이 화면에 보이고 클릭한 영상의 id 값의 유튜브 영상을 재생한다.

썸네일(이미지)영역에 썸네일 이미지가 아닌 iframe을 그대로 넣어서 썸네일처럼 보이게 해놨다.

 

유튜브 iframe을 3개 추가했다. 같은 라이브러리를 여러번 가져오는 네트워크 창.

 

아래는 iframe을 팝업창에서 한 번만 사용하고 썸네일은 iframe 대신 이미지로 교체

(js, css는 생략)

<!-- 리스트에 iframe 대신 이미지로 교체 -->
<ul>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/VTUVHBZ7iYg">
      <img src="https://img.youtube.com/vi/VTUVHBZ7iYg/hqdefault.jpg" alt="">
    </a>   
  </li>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/sJrJO9ymOBw">
      <img src="https://img.youtube.com/vi/sJrJO9ymOBw/hqdefault.jpg" alt="">
    </a>   
  </li>
  <li>
    <a href="#" data-video="https://www.youtube.com/embed/bhLKFT8YkOA">
      <img src="https://img.youtube.com/vi/bhLKFT8YkOA/hqdefault.jpg" alt="">
    </a>   
  </li>
</ul>

<!-- 팝업창 -->
<div class="overlay"></div>
<div class="video-popup">
  <button class="close-btn">Close</button>
  <iframe id="youtubeIframe" 
  src="" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe>
</div>

 

위 코드처럼 html을 작성하고 영상 이미지를 클릭하는 순간 iframe의 src 속성에 유튜브 url값을 설정하도록 js를 작성한다.

iframe의 src속성에 영상 url값이 들어가는 순간(영상 재생 타이밍)에 라이브러리들을 불러오게 된다.(페이지 요청 시가 아니라)

 

결과

위 코드 수정과 더불어 추가로 이미지와 영상들의 용량을 줄이는 작업도 진행했다.

결과적으로 개발자 도구에서 나오는 네트워크 용량이 줄어들었고, 성능 측정에서도 성능이 많이 좋아진 것으로 나왔다.

(대략, 70MB -> 10MB로 줄임)

 

정리

• 삽입된 유튜브 iframe의 수 만큼 필요한 라이브러리를 요청하게 된다.
  (라이브러리 요청 조건은 iframe의 src속성에 유효한 값(유튜브 영상 url)이 있을 때이다. 유효하지 않으면 라이브러리 불러오지 않음.)
• 그러므로 iframe의 수가 많을수록 사이트가 무거워진다. 한 페이지에 최소한의 iframe만 사용하도록 하자.
• 예를 들어
  • 썸네일에는 iframe대신 썸네일 이미지를 사용하고,
  • 하나의 iframe에 src 속성을 수정해가며 영상을 교체해주자.
• 물론, iframe을 사용하는 것은 기본적으로 성능과 로딩 속도에 영향을 준다.
  유튜브 iframe 같은 경우에는 iframe 수 만큼 라이브러리를 추가로 또 불러와서 더 문제였던 것..

 

그런데..인터넷을 찾아보니 또 다른 의견도 있었다...'추가' 참고

 

추가

나중에 인터넷을 찾아보니 비슷한 내용의 외국 글도 있는 것 같았다.

거기 글에 의하면 개발자 도구의 네트워크 탭에서는 삽입된 iframe 수 만큼 라이브러리들을 반복적으로 가져오는 것 처럼 보이고 네트워크 사용량도 그렇게 나오지만, 

실제로는 한 번만 가져온다고 하던데..이 이상은 더 확인이 불가능하여 맞는지는 잘 모르겠다.