Site Hızı için Videoları Erteleme

Neden videoları erteliyorsun?

Web sayfalarınızda Youtube, Wistia, Vimeo vb. Yer alan videolar varsa, sayfanızın daha yavaş yüklenmesine neden olur.

Hemen hemen hemen her video, sayfanızın videonun istediği tüm dosyaları ve kaynakları toplamak zorunda kalmadan hızlı bir şekilde yüklenmesine izin verecek ilk sayfa yüklemenizin sonrasına ertelenebilir.

Video dosyalarını erteleyerek genellikle düzinelerce dosya istek ve kaynak indirimi kaydediyorsunuz ve gerçekten sayfa hızınız için bir fark yaratabiliyor. Videolar, sitenizi incelerken pagespeed araçlarında görebileceğiniz Render engelleme javascript hatası altındadır.

Örnek video

Bu sayfaya sadece kavramı göstermek için bir video ekledim. Bu sayfa videoyla birlikte saniyenin yarısından daha az bir sürede yüklenir.

Bu videoyu ertelemeseydim, bu aynı sayfanın yüklenmesi iki buçuk saniyeden fazla sürerdi. Bu sayfa, video henüz yüklenmemiş olsa da yüklenir, bu nedenle sayfanın video için “beklemesi” gerekmez.

Videoları erteleme

Videoyu ertelemek için kullandığımız sistemi kullanarak erteledim . Resimlerle ortak yöntem, resim yüklerken sayfayı yüklemeden gizlemek ve ardından pageload olayından sonra yüklenecek şekilde javascript ile değiştirerek gizlemektir. Videolarla fark, bir dosya yüklemediğiniz, bir iframe yüklediğinizdir.

Aynı kavramı kullanarak, videonun, sayfanın yüklenene kadar iframe src’ini tanımlayarak tüm ilişkili dosyaların yüklenmesini önleyebiliriz.

Katıştırılmış videolar nasıl çalışır?

Youtube veya Vimeo’dan bir videoyu sayfanıza katıştırdığınızda bir iframe yüklüyorsunuz. Bu iframe pageload sırasında çağrıldığında, aslında birkaç ve bazen onlarca ek dosya ve kaynak isteyebilir. Bu ek kaynaklar, bir sayfayı yavaşlatan şeylerdir. Kaynaklar, javascript dosyaları, video sağlayıcısı için analitik kaynaklar (daha fazla kaynak çağrısı yapan) ve sizinle hiçbir ilgisi olmayan birçok şey ve kesinlikle ilk sayfa yükünüzle hiçbir ilgisi olmayan şeylerdir.

İşlev, sunucudan iframe çağrılmadıysa, bu kaynakların hiçbirinin çağrılamayacağı noktadır.

Iframe kaynağını tanımlamazsak, bu ek çağrıları başlatmamız gerekmez.

Videoları erteleme

Bunu yapmak için embed kodunu biçimlendirip küçük ve son derece basit bir javascript eklemeliyiz. Bu sayfa için gerçekten kullandığım yöntemi göstereceğim.

Html

<iframe width="560" height="315" src="https://www.youtube.com/embed/S8qvtNr8hmM" frameborder="0" allowfullscreen></iframe>

Yukarıdaki kodda Youtube’dan katıştırılmış video kodunu aldım ve iki küçük değişiklik yaptım. İlk değişiklik, url’yi aşağıdaki gibi kaldırarak “src” dosyasını boşalttığımdır.

src=""

Yaptığım ikinci değişiklik, “src” den kesip “data-src” e eklediğim url’yi koymaktır.

data-src = "// www.youtube.com/embed/S8qvtNr8hmM"

Javascript

<Script> 
işlevi init () { 
var vidDefer = belge.getElementsByTagName ('iframe'); (VidDefer [i] .getAttribute ('data-src')) { vidDefer [i] .setAttribute ('src', vidDefer [i] .getAttribute ( 
vidDefer.length; i ++) { ( "veri-src)); }}} Window.onload = init; </ script>

kullanım

  1. İstediğiniz videonun embed kodunu alın
  2. Gömme kodunu yukarıda anlatıldığı gibi değiştirin
  3. Komut dosyasını sayfanın altına ekle

Çoğu sayfada, komut dosyasını html’deki son gövde etiketinden hemen önce koyabilirsiniz.

 

Kısa Özet
Yayın Tarihi
Konunun Adı
Site Hızı için Videoları Erteleme
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir