-
웹사이트에서 YouTube 동영상의 로드 시간 단축YouTube 2024. 3. 16. 05:09
웹사이트에서 YouTube 동영상의 로드 시간을 줄이려면 다음 전략을 고려할 수 있습니다.
- 지연 로딩: 동영상에 지연 로딩을 구현합니다. 즉, 사용자에게 표시될 때만(예: 아래로 스크롤할 때) 동영상 로드가 시작됩니다.
- 썸네일 크기 최적화: 동영상에 최적화된 썸네일을 사용합니다. 전체 비디오 플레이어를 로드하는 대신 처음에는 썸네일을 표시합니다. 이를 클릭하면 비디오를 로드하고 재생할 수 있습니다.
- 동영상 수 제한: 단일 페이지에 삽입된 동영상 수를 줄입니다. 동영상이 많을수록 로드 시간이 길어집니다.
- 비동기 로딩: 페이지의 나머지 부분이 렌더링되는 것을 차단하지 않도록 비디오 플레이어 스크립트를 비동기적으로 로드합니다.
- 경량 삽입 사용: 간단한 iframe 삽입 사용과 같이 동영상 삽입을 위한 경량 대안 사용을 고려해보세요.
- 로드 우선순위: 페이지에 여러 리소스가 있는 경우 중요한 콘텐츠가 먼저 로드되도록 로드 순서의 우선순위를 지정합니다.
이러한 방법은 사용자를 위한 비디오 콘텐츠를 계속 유지하면서 페이지 로드 성능을 향상시키는 데 도움이 될 수 있습니다.
웹사이트에서 YouTube 동영상의 로드 시간 단축 지연 로딩 vs 비동기 로딩
지연 로딩과 비동기 로딩은 모두 웹 사이트 성능을 향상시키는 데 사용되는 기술이지만 작동 방식은 다릅니다.
- 지연 로딩(Lazy Loading) : 이 기술은 필요할 때까지 리소스 로딩을 지연시킵니다. 예를 들어, 이미지나 비디오는 뷰포트에 들어가려고 할 때(예: 사용자가 근처에서 스크롤할 때)에만 로드됩니다. 이렇게 하면 페이지의 초기 로드 시간이 단축됩니다.
- 비동기 로딩 : 이는 페이지의 나머지 부분과 병렬로 리소스(예: JavaScript 파일)를 로드하는 것을 의미합니다. 리소스는 백그라운드에서 로드되며 페이지 렌더링을 차단하지 않습니다. 이는 모든 스크립트의 로드가 완료되지 않은 경우에도 페이지의 기본 콘텐츠를 로드하고 상호 작용할 수 있음을 의미합니다.
요약하면, 지연 로딩은 필요할 때까지 특정 리소스의 로딩을 지연시키는 것이고, 비동기 로딩은 주요 콘텐츠를 차단하지 않고 리소스를 병렬로 로딩하는 것입니다.
비동기 로딩 코드
HTML 코드에서 YouTube 동영상에 대한 비동기 로딩을 구현하려면 JavaScript를 사용하여 필요할 때 iframe 요소를 동적으로 만들고 DOM에 삽입할 수 있습니다. 이 접근 방식을 사용하면 동영상이 로드될 때까지 기다리지 않고 페이지의 나머지 부분을 로드할 수 있습니다. 다음은 코드를 수정하는 방법에 대한 예입니다.
코드 예시
- 먼저 비디오에 대한 자리 표시자를 만듭니다.
<div class="video-wrap" style="text-align: center;"> <div class="video" id="youtube-video-placeholder"></div> </div>- 그런 다음 JavaScript를 사용하여 iframe을 비동기식으로 삽입합니다.
<script> function loadYoutubeVideo() { var iframe = document.createElement('iframe'); iframe.setAttribute('width', '336'); iframe.setAttribute('height', '280'); iframe.setAttribute('src', 'https://www.youtube.com/embed/u2TaNNiJSxI?rel=0&controls=2&autoplay=1&mute=1&loop=1&showinfo=0&modestbranding=1;'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('gesture', 'media'); document.getElementById('youtube-video-placeholder').appendChild(iframe); } // Load the video when the window loads window.onload = loadYoutubeVideo; </script>
이 스크립트는 창이 완전히 로드될 때까지 기다린 다음 YouTube 비디오에 대한 iframe을 동적으로 생성하고 ID가 `youtube-video인 div에 삽입합니다.
youtube-video-placeholder. 이 접근 방식을 사용하면 비디오가 비동기적으로 로드되므로 웹 페이지에서 비디오를 기다리지 않고 다른 요소를 먼저 로드할 수 있습니다. 이 코드는 웹사이트의 특정 요구 사항과 구조에 맞게 필요에 따라 조정되어야 한다는 점을 기억하세요.
스크립트 코드 위치
YouTube 비디오의 비동기 로드를 위한 스크립트 코드는 HTML 문서의 다양한 위치에 배치할 수 있으며 각각 다른 성능 특성을 제공합니다.
- <head>섹션 에서 : 스크립트를 에 배치하면 <head>페이지 로드 프로세스 초기에 스크립트를 읽을 수 있습니다. 그러나 페이지가 비동기식으로 로드되도록 설정되지 않은 경우 페이지 렌더링이 지연될 수 있습니다.
- <body>섹션 끝 부분 : 이는 JavaScript 스크립트의 일반적인 관행입니다. 여기에 배치하면 HTML 콘텐츠가 구문 분석된 후 스크립트가 실행되어 페이지 로드 시간이 향상될 수 있습니다.
- async또는 defer속성 사용 : 에 스크립트를 포함하는 경우 또는 속성을 <head>사용하면 도움이 될 수 있습니다. 페이지의 나머지 부분과 비동기적으로 스크립트를 로드하는 동시에 문서가 구문 분석될 때까지 스크립트 실행을 지연합니다.
선택은 특정 요구 사항과 웹 페이지의 로딩 동작 우선 순위에 따라 달라집니다.
다음은 페이지 스크롤에서 고정 플로팅 비디오 만드는 방법에 대해서 Pretty Button 알아보기