기본 지연 로딩 - 비디오 요소에 없는 이유는 무엇입니까?

지연 로딩은 초기 페이지 로드에 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략입니다. critical rendering path 의 길이를 줄이는 방법으로 페이지 로드 시간이 줄어듭니다. 더 빠른 웹사이트로 연결됩니다.

이제 loading attribute 을 통해 브라우저에서 이미지와 iframe을 지연 로드할 수 있습니다.

<img src="cat.jpg" alt="felix the cat" loading="lazy">

<iframe src="video-player.html" title=".." loading="lazy"></iframe>

Support for lazy-loading is good . 이미지 지연 로딩은 이제 모든 주요 브라우저에서 지원됩니다. 그러나 iframe의 경우 여전히 약간 고르지 않습니다. Firefox는 iframe의 지연 로딩을 지원하지 않으며 현재 Safari에서 실험적 플래그 아래에 있습니다. 그래서 우리는 거기에 도착하고 있습니다!


video 요소가 간과된 이유가 궁금했습니다. 현재 대부분의 동영상이 YouTube에 있고 iframe을 통해 웹사이트에 삽입되어 있기 때문인가요?

나는 모르지만 확실히 그렇지 않기를 바랍니다! 😕🤞

최근에 기사를 작성할 때 일부 기능을 시연하기 위해 짧은 화면을 녹화했습니다. 애니메이션 GIF를 사용하는 것과 유사한 자동 재생 비디오로 포함하고 싶었습니다. 그때 비디오에 대한 기본 지연 로딩이 없다는 것을 깨달았습니다.

이것은 대신 비디오를 WebP로 변환하도록 나를 자극했습니다. WebP가 GIF와 동일하지만 더 나은 압축률로 애니메이션을 지원한다는 사실을 알고 계셨습니까?

이 작업에 online video to WEBP converter을 사용할 수 있습니다.

내가 하고 있는 일과 약간의 접선이었기 때문에 이 주제를 깊이 파고들지는 않았습니다! 하지만 Google Devs에서 이 주제에 대해 "Lazy-loading video" 이라는 적절한 제목의 최근 기사(2019년 후반)를 읽었습니다. 그들은 다르게 처리되는 비디오를 임베딩하는 두 가지 고유한 사용 사례를 설명합니다. 주제를 더 잘 이해하기 위해 이것들을 살펴봅시다.

사용 사례 1: 사용자가 재생을 시작한 동영상

비디오에 대한 컨트롤이 있고 사용자가 비디오를 재생합니다.
preload 요소에 video attribute을 지정하여 로드를 제어할 수 있습니다. preload="none" 를 제공하면 브라우저가 비디오 데이터를 로드하지 못하도록 해야 합니다.

<!-- disable preloading -->
<video controls preload="none" width="300" poster="img/cover.jpg">
    <source src="files/sample.mp4" type="video/mp4">
</video>

autoplay를 무시하고 비디오를 로드할 수 있으므로 여기에 preload="none" 속성을 포함하지 마십시오!
preload와 관련된 브라우저 기본 동작은 고정되어 있지 않으므로 이를 명시하는 것이 좋습니다.

일부 브라우저에서는 비디오에 배경이 없습니다. poster 속성을 사용하여 미리보기 이미지를 표시하면 더 보기 좋게 만들 수 있습니다.

사용자가 동영상의 재생 버튼을 클릭하면 동영상이 로드됩니다.

사용 사례 2: 애니메이션 GIF 대체 역할을 하는 비디오

이것은 나의 사용 사례였습니다.

Google은 vanilla-lazyload과 같은 지연 로딩 라이브러리를 사용하도록 권장하거나 자체 JavaScript 코드를 작성할 수 있습니다.

자신만의 코드를 작성하는 것은 그리 길지 않습니다.

HTML에서 src 속성을 source 요소에 넣지 않고 대신 비디오 URL을 data-src 속성에 숨깁니다. video를 "게으른"클래스로 표시합니다.

<video class="lazy" autoplay muted loop playsinline width="600" height="300" poster="cover.jpg">
  <source data-src="screen-recording.webm" type="video/webm">
  <source data-src="screen-recording.mp4" type="video/mp4">
</video>

JavaScript 코드는 IntersectionObserver API을 사용하여 "lazy"클래스가 있는 video 요소가 표시되는 시점을 감지하고 비디오 URL이 있는 각 src 요소에 source 속성을 추가합니다.

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

비디오에 대해 항상 이 작업을 수행하시겠습니까?

이런 기능이 추가되면 참 좋을 것 같습니다. 추가할 수 있습니다 preload="lazy" ; 또는 loading 속성을 사용하여 다른 2개 요소와 일치시킵니다.

제안 상자는 어디에 있습니까? 😄