Yazan: Akın SAYLIK
# HTML <video> Etiketi Neden Sayfa Yüklemesini Yavaşlatır? (ve Çözümü)
Bir siteye video eklemek istediğinizde aklınıza gelen ilk çözüm muhtemelen doğrudan `<video>` etiketi kullanmak. Ancak bu yaklaşımın gizli bir bedeli var: tarayıcı sayfayı açar açmaz video dosyasını arka planda indirmeye başlar.
## Ortam
Statik bir HTML sitesi: harici framework yok, sadece HTML, CSS ve küçük bir JavaScript parçası. Sitenin açılış hızı önemli çünkü mobil bağlantılarda bile iyi performans göstermesi gerekiyor.
## Sorun
Siteye bir tanıtım videosu eklemek gerekiyordu. Klasik `<video src=”tanitim.mp4″>` yöntemiyle eklediğimde tarayıcı, kullanıcı videoyu hiç açmasa bile dosyayı yüklemeye başlıyor.
Örneğin, 15 MB’lık, 1 dakikalık bir MP4 videosunu doğrudan <video> etiketiyle eklediğinizde, sayfa yüklenirken mobil bir kullanıcı en az 1-2 MB’lık meta veri ve ön yükleme verisini hemen tüketir. Sayfa açılış süresi (özellikle Time to Interactive – TTI), bu gereksiz veri transferi yüzünden saniyelerce uzayabilir. Bu, yavaş bağlantılarda sitenin hiç açılmaması anlamına gelebilir.
Kullanıcının büyük çoğunluğu videoyu izlemeyecek. Neden hepsinin bant genişliğini ve zamanını harcayalım?
## Çözüm: Thumbnail + Tıklayınca Yükle
Yaklaşım basit:
– Sayfa açıldığında video yerine bir **thumbnail resmi** ve üzerinde bir **play butonu** göster.
– Kullanıcı tıkladığında thumbnail’ı gizle, video elementini göster ve oynat.
– Video elementi baştan sayfada var, ama `preload=”none”` sayesinde tarayıcı onu indirmiyor.
HTML kısmı:
“`html
<div id="video-wrapper" style="position: relative; cursor: pointer;">
<!-- Sayfa açılışında bu görünür -->
<img id="video-thumbnail" src="thumbnail.jpg" style="width: 100%;">
<!-- Play butonu overlay -->
<div id="play-btn" style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
<div style="width: 80px; height: 80px; background: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-play" style="color: white; font-size: 1.8rem; margin-left: 6px;"></i>
</div>
</div>
<!-- Video başta yüklenmez -->
<video id="promo-video" style="display: none; width: 100%;" controls preload="none">
<source src="tanitim.mp4" type="video/mp4">
</video>
</div>“`
JavaScript kısmı:
“`javascript
document.getElementById('video-wrapper').addEventListener('click', function () {
document.getElementById('video-thumbnail').style.display = 'none';
document.getElementById('play-btn').style.display = 'none';
const video = document.getElementById('promo-video');
video.style.display = 'block';
video.play();
});“`
## Neden `preload=”none”` Yeterli?
Tarayıcılar `<video>` etiketini gördüklerinde varsayılan olarak `preload=”metadata”` davranışını benimser — yani en azından dosyanın boyutunu ve süresini öğrenmek için başlangıç kısmını indirir. `preload=”none”` bu davranışı tamamen kapatır.
`src` attribute’u baştan yazılmış olsa bile `preload=”none”` varken tarayıcı tıklanana kadar tek byte indirmiyor.
## Alternatif: src’yi Tıklamada Ata
Daha katı bir yaklaşım: video elementinin `src`’sini JavaScript ile tıklama anında atamak.
“`javascript
video.querySelector(‘source’).setAttribute(‘src’, ‘tanitim.mp4’);
video.load();
video.play();
“`
Bu yöntemde video dosyasının adresi DOM’da bile yazmıyor, tarayıcının önceden tahmin edip yüklemesi (prefetch) de engellenmiş oluyor. Paranoyak ama emin.
## Öğrenilen Dersler
— `<video>` etiketini doğrudan koymak basit görünür ama bant genişliği maliyetini ziyaretçiye yüklüyor.
— `preload=”none”` ile thumbnail kombinasyonu çoğu senaryo için yeterli; ekstra güvenlik için `src`’yi JavaScript ile atayabilirsiniz.
— Kullanıcıların büyük çoğunluğu bir içeriği tüketmeyecekse, o içeriği tüketene kadar yüklememek iyi bir kural.
— Bu teknik video için geçerli ama aynı mantık büyük resimler, haritalar veya iframe’ler için de uygulanabilir.
—
**HTML, JavaScript, Web Performansı, Lazy Load, Video**