IntersectionObserver ve YouTube API kullanarak Lazy Load YouTube Videoları

Sorun:

Bir web sayfası yüklenirken, tarayıcının tam olarak oluşturulabilmesi için sayfa tarafından kullanılan tüm komut dosyalarını ve diğer kaynakları indirmesi ve ayrıştırması gerekir. Bir web sayfası çok sayıda komut dosyası içeriyorsa veya komut dosyalarının boyutu büyükse bu, sayfanın yüklenme süresinde gecikmeye neden olabilir.

YouTube API betikleri ( base.js , www-embed-player.js ve www-widgetapi.js ) söz konusu olduğunda , bunlar nispeten büyük dosyalardır ve sayfanın tam olarak açılabilmesi için tarayıcı tarafından yüklenmesi ve ayrıştırılması gerekir. işlendi. Bir web sayfası çok sayıda YouTube videosu içeriyorsa, her video için YouTube API komut dosyalarının yüklenmesi sayfanın yüklenme süresini önemli ölçüde artırabilir. Bu, kullanıcıların sayfanın yüklenmesi için uzun süre beklemesi gerekebileceğinden, kullanıcı deneyimini olumsuz etkileyebilir.

YouTube API komut dosyalarının yüklenmesiyle ilgili bir başka sorun da, özellikle daha yavaş internet bağlantısına sahip kullanıcılar için daha uzun yükleme sürelerine yol açabilecek şekilde web sayfasının genel boyutunu artırabilmesidir.

Ek olarak, YouTube API'sinin hizmet şartları otomatik olarak oynatılan videolar konusunda katıdır, bu nedenle herhangi bir sorunu önlemek için yönergelere uyduğunuzdan emin olun.

Bu sorunları azaltmak için geliştiriciler, tembel yükleme, eşzamansız yükleme, önbelleğe alma ve API'yi yalnızca gerektiğinde yükleme gibi teknikleri kullanabilir ve ayrıca boyutlarını küçültmek ve web sayfasının yükleme süresini iyileştirmek için komut dosyalarını küçültebilir.

Bu sorunu azaltmanın birkaç yolu vardır:

1. Geç yükleme:IntersectionObserver YouTube API komut dosyalarını sayfa yükleme sırasında yüklemek yerine, video öğesinin görünüm alanında olduğunu algılamak ve ardından API komut dosyalarını yüklemek için API'yi kullanarak yavaş yüklemeyi kullanabilirsiniz .
2. Eşzamansız yükleme:async YouTube API komut dosyalarını eşzamansız olarak yüklemek için komut dosyası etiketindeki özelliği de kullanabilirsiniz . Bu, betikler arka planda yüklenirken tarayıcının sayfanın geri kalanını ayrıştırmaya devam etmesini sağlar ve bu da sayfanın genel yükleme süresini iyileştirebilir.
3. Önbelleğe Alma: Web sitenizin yükleme süresini hızlandırmanın başka bir yolu da önbelleğe almayı kullanmaktır. YouTube API komut dosyalarını önbelleğe alarak, tarayıcının aynı dosyaları birden çok kez indirmesi gerekmez ve bu da yükleme süresini azaltır.
4. API'yi yalnızca gerektiğinde yükleme: YouTube API'sini yalnızca web sitenizin belirli sayfalarında veya bölümlerinde kullanıyorsanız API'yi yalnızca gerektiğinde, örneğin kullanıcı belirli bir düğmeyi veya bağlantıyı tıkladığında yükleyebilirsiniz.
5. Komut dosyalarının küçültülmesi: Komut dosyalarının küçültülmesi, dosyaların boyutunu azaltmak için boşluklar, yorumlar ve satır sonları gibi gereksiz karakterleri koddan çıkarma işlemidir. Bu, komut dosyalarının yüklenme süresini hızlandırmaya yardımcı olabilir.

API IntersectionObserver, her bir video öğesini ayrı ayrı gözlemleyerek bir web sayfasına birden çok YouTube videosunu yavaş yüklemek için kullanılabilir.

IntersectionObserverBirden çok YouTube videosunu geç yüklemek için API'yi nasıl kullanabileceğinize bir örnek :

HTML:

<div class="video-container">
  <div class="autoplayer" data-video="video1_id"></div>
  <div class="autoplayer" data-video="video2_id"></div>
  <div class="autoplayer" data-video="video3_id"></div>
</div>

İlk olarak, bu kodu seçmek için ekleyin, "autoplayer" sınıfıyla tüm video öğelerini seçer ve IntersectionObserverher video öğesini gözlemleyen bir oluşturur.

// Get all the video elements
var videoElements = document.querySelectorAll('.autoplayer');

// Create the IntersectionObserver
var observer = new IntersectionObserver(onIntersection);

// Start observing each video element
videoElements.forEach(function (videoElement) {
  observer.observe(videoElement);
});

// Callback function for when the video element is in the viewport
function onIntersection(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      
      // Load the YouTube API scripts
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      
      // Stop observing the video element
      observer.unobserve(entry.target);
    }
  });
}

function onYouTubePlayerAPIReady() {
  var players = document.querySelectorAll('.autoplayer');
  players.forEach(function (element) {
    let videoId = element.dataset.video;

    let player = new YT.Player(element, {
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        showinfo: 0,
        controls: 0,
        loop: 1,
        enablejsapi: 1,
        rel: 0,
        origin: 'https://localhost/',
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

  });
}

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data === 0) {
    event.target.playVideo();
  }
}

Ayrıca youtube API ve video oynatıcı için mantığın geri kalanını onIntersection işlevinin içine ekleyebilir ve videoElements için doğru seçiciye sahip olduğunuzdan ve yineleme olmadığından emin olabilirsiniz.

Teşekkür ederim!