Yayınlanma tarihi: 16 Ağustos 2019
Resim öğelerinde olduğu gibi videoları da geç yükleyebilirsiniz. Videolar genellikle <video> öğesiyle yüklenir. Ancak YouTube gibi diğer hizmetlerde barındırılan videolar için <iframe> öğeleri de kullanılabilir (Bu durumda gecikmeli yükleme iframe'leri konulu makaleyi inceleyin).
<video> öğesinin nasıl yavaş yükleneceği, birkaç farklı çözüm olduğu için kullanım alanına bağlıdır.
Otomatik oynatılmayan videolar için
Kontrolü kullanıcıya bıraktığı için videoların otomatik olarak oynatılmasını önlemek genellikle en iyi uygulamadır. Bu durumlarda, videonun tamamını yüklemekten kaçınmanın en iyi yolu <video> öğesinde preload özelliğini belirtmektir:
<video controls 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 önceden yüklemesini önlemek için none değerine sahip bir preload özelliği kullanılmaktadır. poster özelliği, <video> öğesine video yüklenirken alanı kaplayacak bir yer tutucusu verir.
Ç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, özellikle Content-Range üstbilgisi tarayıcı tarafından desteklenmiyorsa istenenden daha fazla veri indirilmesine neden olabilir. Bu desteklendiğinde bile tarayıcılar, meta verilerin hangi baytlarda depolandığını bilemez ve meta veriler dosyanın başında depolanmayabilir. Bu nedenle, videonun yüklenmesini önlemek için en iyi seçenek none belirtmek ve preload="none" kullanmaktır.
Bu, kullanıcı fareyle videonun üzerine geldiğinde meta verileri önceden yüklemek için onmouseenter özelliğiyle (veya eşdeğer mouseenter etkinlik işleyicisiyle) daha da geliştirilebilir:
<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>
Bu sayede kullanıcı videoyu oynatmaya gittiğinde gecikme azalır ve videonun süresi hemen gösterilir.
Videolar LCP adayı olarak kabul edilebilir. poster resminin yüklenmesi videodan daha hızlı olacağından, LCP adayı olduğunda poster resmi kullanmalı ve fetchpriority özelliğini "high" olarak ayarlayarak önceden yüklemelisiniz:
<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>
Animasyonlu GIF yerine video kullanma
Otomatik oynatılan videolar en çok GIF tarzı hızlı animasyonlar için kullanılır. Animasyonlu GIF'ler yaygın olarak kullanılsa da özellikle dosya boyutu açısından videolara kıyasla birçok açıdan daha düşük performans gösterir. Animasyonlu GIF'ler birkaç megabaytlık veri boyutuna ulaşabilir. Benzer görsel kaliteye sahip videolar genellikle çok daha küçüktür.
Animasyonlu GIF yerine <video> öğesini kullanmak, <img> öğesi kadar kolay değildir. Animasyonlu GIF'lerin üç özelliği vardır:
- Yüklendiğinde otomatik olarak oynatılır.
- Sürekli olarak döngü halinde oynatılırlar (ancak bu her zaman geçerli değildir).
- Ses parçası içermediklerinden
<video> öğesiyle bunu yapmak için aşağıdaki gibi bir kod kullanabilirsiniz:
<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>
autoplay, muted ve loop özellikleri açıklayıcıdır. playsinline, iOS'te otomatik oynatmanın gerçekleşmesi için gereklidir. Artık platformlar genelinde kullanılabilen, GIF olarak video özelliğini kullanabilirsiniz. Peki bunu nasıl yavaş yükleyebiliriz? Başlamak için <video> işaretlemenizi uygun şekilde değiştirin:
<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
Video, ertelenen yükleme modunda olana kadar <video> öğesinin alanını kaplayacak bir yer tutucu belirtmenize olanak tanıyan poster özelliğinin eklendiğini göreceksiniz. <img> yavaş yükleme örneklerinde olduğu gibi, video URL'sini her <source> öğesindeki data-src özelliğine yerleştirin. Ardından, Intersection Observer tabanlı resim gecikmeli yükleme örneklerine benzer bir JavaScript kodu kullanın:
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);
});
}
});
Bir <video> öğesini yavaş yüklediğinizde tüm alt <source> öğelerini iterasyonla gezmeniz ve data-src özelliklerini src özelliklerine dönüştürmeniz gerekir. Bunu yaptıktan sonra öğenin load yöntemini çağırarak videonun yüklenmesini tetiklemeniz gerekir. Ardından medya, autoplay özelliğine göre otomatik olarak oynatılmaya başlar.
Bu yöntemi kullanarak, animasyonlu GIF davranışını taklit eden ancak animasyonlu GIF'ler kadar yoğun veri kullanımı gerektirmeyen bir video çözümüne sahip olursunuz. Ayrıca bu içeriği yavaş yükleyebilirsiniz.
Kitaplıkları geç yükleme
Aşağıdaki kitaplıklar, videoları yavaş 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ıdırlar ancak eski tarayıcılarda kullanabilmeniz için bunların polifill ile doldurulması gerekir.
- yall.js, Intersection Observer'ı kullanan ve etkinlik işleyicilerine geri dönen bir kitaplıktır. Ayrıca
data-posterözelliğini kullanarak videoposterresimlerini de yavaş yükleyebilir. - React'e özel bir yavaş yükleme kitaplığına ihtiyacınız varsa react-lazyload'ı kullanabilirsiniz. Intersection Observer'ı kullanmasa da React ile uygulama geliştirmeye alışkın olanlar için resimleri gecikmeli yükleme konusunda aşina oldukları bir yöntem sunar.
Bu gecikmeli yükleme kitaplıklarının her biri, çeşitli gecikmeli yükleme denemeleriniz için çok sayıda işaretleme kalıbıyla iyi bir şekilde belgelenmiştir.