Yayınlanma tarihi: 16 Ağustos 2019, Son güncelleme tarihi: 2 Temmuz 2026
Resim öğelerinde olduğu gibi videoyu da geç yüklemek isteyebilirsiniz. Videolar genellikle <video> öğesiyle yüklenir. Ancak YouTube gibi diğer hizmetlerde barındırılan videolar için <iframe> kullanılabilir (bu durumda iframe'leri geç yükleme makalesine göz atın).
Birkaç farklı çözüm olduğundan <video> öğesinin geç yüklenmesi kullanım alanına bağlıdır.
loading özelliğini kullanma
Tarayıcılar, medya öğelerinde (<video> ve <audio>) loading özelliğini desteklemeye başladı. Bu özellik desteklendiğinde, loading="lazy" özelliği eklenerek hem medya hem de poster resmi otomatik olarak geç yüklenir:
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
loading="lazy" kullanıldığında, poster resmi görüntü alanına girene veya görüntü alanının yakınına gelene kadar hiç yüklenmez. Ardından, video öğesinin ne kadarının yükleneceğine karar vermek için preload özelliği kullanılır. Bu, autoplay videolarının, görünüm alanında veya görünüm alanının yakınında olana kadar otomatik olarak oynatılmayacağı anlamına da gelir. loading="lazy" özelliği poster, preload ve autoplay özellikleriyle birlikte çalışır ve bunların yerine geçmez.
Medya öğelerinde loading özelliğini desteklemeyen tarayıcılar bu özelliği yoksayar. Bu durumda poster resmi hemen yüklenir ve video, bir sonraki bölümde ele alacağımız preload özelliğine göre yüklenir.
Otomatik oynatılmayan videoları geç yüklemek için preload özelliğini kullanın.
Otomatik oynatılan videolardan kaçınmak, kontrolü kullanıcıya bıraktığı için genellikle en iyi uygulamadır. Bu gibi durumlarda, <video> öğesinde preload özelliğini belirtmek, gerekene kadar videonun tamamının yüklenmesini önlemenin en iyi yoludur:
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Önceki örnekte, tarayıcıların herhangi bir video verisini, görünüm alanında olsa bile önceden yüklemesini engellemek için none değerine sahip bir preload özelliği kullanılıyor. poster özelliği, video yüklenirken alanı kaplayacak bir yer tutucu sağlar.<video>
Çoğu tarayıcıda preload varsayılan olarak metadata olur ve videonun bir kısmı Content-Range başlığı kullanılarak önceden yüklenir. Bu durum, istenenden daha fazla verinin indirilmesine neden olabilir. Tarayıcılar, meta verilerin hangi baytlarda depolandığını bilemez ve meta veriler dosyanın başında depolanmamış olabilir. Bu nedenle, videonun yüklenmesini önlemenin en iyi yolu preload="none" kullanmaktır.
Bu, kullanıcı videonun üzerine geldiğinde meta verileri önceden yüklemek için daha da geliştirilebilir. Bunun için onmouseenter özelliği (veya eşdeğer mouseenter etkinlik işleyicisi) kullanılabilir:
<video controls
loading="lazy"
preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Bu sayede, kullanıcı videoyu oynatmaya başladığında gecikme azalır ve videonun süresi hemen gösterilir.
Videolar LCP adayı olabilir. poster resmi, videodan daha hızlı yüklenir. Bu nedenle, LCP adayı olan yerlerde poster resmi kullanmanız gerekir. Ancak yazıldığı sırada poster özelliklerinde fetchpriority özelliğini belirtemediğiniz için fetchpriority özellik değeri "high" ile önceden yüklemeniz de gerekir:
<link rel="preload" href="one-does-not-simply-placeholder.jpg" as="image" fetchpriority="high">
<video controls preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
LCP öğeleri olan videolarda loading="lazy" kullanılmamalıdır. LCP resimlerini geç yüklememeniz gerektiği gibi, videoları da geç yüklememelisiniz.
Animasyonlu GIF yerine kullanılan video için
Otomatik oynatılan videolar, genellikle GIF tarzı hızlı animasyonlar için kullanılır. Animasyonlu GIF'ler yaygın olarak kullanılsa da dosya boyutu başta olmak üzere çeşitli açılardan video eşdeğerlerinden daha düşüktür. Animasyonlu GIF'ler birkaç megabaytlık veri aralığına ulaşabilir. Benzer görsel kalitedeki videolar çok daha küçük boyutlu olur.
<video> öğesini animasyonlu GIF'in yerine kullanmak, <img> öğesini kullanmak kadar kolay değildir. Animasyonlu GIF'lerin üç özelliği vardır:
- Yüklendiklerinde otomatik olarak oynatılırlar.
- Sürekli olarak döngüye girerler (ancak bu durum her zaman geçerli değildir).
- Ses parçası içermeyen videolar
<video> öğesiyle bunu yapmanın görünümü şu şekildedir:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
loading="lazy" özelliği, videonun görüntü alanına yakın olana kadar yüklenmesini engeller. autoplay, muted ve loop özellikleri kendi kendilerini açıklıyor. playsinline, iOS'te otomatik oynatmanın gerçekleşmesi için gereklidir.
Artık platformlar arası çalışan, hizmet verilebilir bir video-GIF alternatifi elde ettiniz. Peki, geç yükleme nasıl yapılır?
Bu özelliği destekleyen tarayıcılarda loading="lazy" en kolay seçenektir:
<video loading="lazy" autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Diğer tarayıcılarda videonun geç yüklenmesini desteklemek için JavaScript kullanmanız ve <video> işaretlemenizi buna göre değiştirmeniz gerekir:
<video class="lazy" preload="none" controls muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
autoplay öğesinin kaldırıldığını ve class="lazy", preload="none" ve poster özelliklerinin eklendiğini göreceksiniz. Bu özellikler, video geç yüklenene kadar <video> öğesinin alanını kaplayacak bir yer tutucu belirtmenize olanak tanır. Ardından, otomatik oynatmayı yeniden etkinleştirmek için bir JavaScript Intersection Observer kullanırız:
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) {
video.target.removeAttribute('preload');
video.target.removeAttribute('controls');
video.target.autoplay = true;
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Bu yöntemde video, varsayılan olarak otomatik oynatılmaz ve yalnızca Intersection Observer, videonun görüntü alanına girdiğini algıladığında oynatılır. Ayrıca, controls özelliği, JavaScript'in başarısız olduğu durumları ele alır. Bu sayede, animasyonlu GIF davranışını taklit eden ancak animasyonlu GIF'ler gibi yoğun veri kullanımı gerektirmeyen bir video çözümüne sahip olursunuz ve bu içeriği geç yükleyebilirsiniz.
Kitaplıkları geç yükleme
Aşağıdaki kitaplıklar, videoyu geç yüklemenize yardımcı olabilir:
- vanilla-lazyload ve lozad.js, yalnızca Intersection Observer'ı kullanan son derece hafif seçeneklerdir. Bu nedenle, yüksek performanslı olsalar da eski tarayıcılarda kullanabilmeniz için polyfill'lerle doldurulmaları gerekir.
- React'e özel bir geç yükleme kitaplığına ihtiyacınız varsa react-lazyload'u kullanabilirsiniz. Intersection Observer'ı kullanmasa da React ile uygulama geliştirmeye alışkın olanlar için görüntüleri geç yüklemenin kullanışlı bir yöntemini sunar.
Bu geç yükleme kitaplıklarının her biri iyi bir şekilde belgelenmiştir ve çeşitli geç yükleme çalışmalarınız için çok sayıda işaretleme kalıbı içerir.
<video> için loading özelliği daha fazla tarayıcıda kullanıma sunuldukça, daha fazla kontrol isteyenler hariç, yerleşik çözümlerin lehine JavaScript çözümlerinin (kitaplıklar dahil) daha az kullanılacağını düşünüyoruz.