Javascript Dersleri

Youtube Embed Site Yavaşlatma Sorunu

Youtube Embed kodunun siteyi yavaşlatması ve çözümü üzerine inceleme yapıyoruz.

Youtube video embed kodları, site performansını olumsuz etkileyebilir ve yavaşlatır. Bu, özellikle web sayfanızda birden fazla video varsa daha belirgin hale gelir. Ancak, bu sorunun birkaç çözümü vardır:

Lazy Loading: Videonun yüklenmesini geciktiren kodların yerine, videoyu gecikmeli yüklemek için lazy loading yöntemini kullanabilirsiniz. Bunu yapmak için, iframe etiketinin src özelliğini vermek yerine, veri-src özelliğini kullanabilirsiniz. Bu sayede, video yalnızca kullanıcı sayfayı kaydırdığında yüklenir ve sayfanın geri kalanı hızlı bir şekilde yüklenir.

Örnek Kod:

<iframe data-src="https://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen></iframe>

Tabi bu yöntemi kullandığınızda video embed url değeri SRC kısmında olmadığı için, video açılmayacaktır. Bu tarz kullanımlar için bir javascript kodu eklememiz gerekmektedir.

youtubeEmbed = () => {
    var iframe      = document.getElementsByTagName('iframe');
    for (var i=0; i<iframe.length; i++) {
        if(iframe[i].getAttribute('data-src')){
            iframe[i].setAttribute('src',iframe[i].getAttribute('data-src'));
        }
    }
}
window.onload = youtubeEmbed;

Bu javascript koduyla birlikte, data-src kısmında yer alan URL değerini alıp, SRC olarak ekleme yapıyoruz. Bununla birlikte, youtube videoları sayfanın yüklenmesiyle birlikte değilde, yüklendikten sonra yüklenmeye başlayacaktır.

Boyutları Belirleme: Video boyutlarını doğru şekilde belirleyerek, sayfa yüklenme süresini azaltabilirsiniz. Bu sayede, video yüklenme işlemi daha hızlı tamamlanır ve sayfa daha hızlı yüklenir. Ayrıca, sayfa boyutu da daha küçük olur.

Örnek Kod:

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

Otomatik Oynatmayı Devre Dışı Bırakma: Otomatik oynatma, sayfa yüklenirken videoyu yüklemek ve oynatmak için fazladan kaynak tüketir. Bu nedenle, videoyu yalnızca kullanıcının oynaması gerektiğinde oynatmak daha iyidir.

Örnek Kod:

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

HTTPS Kullanımı: YouTube videolarının yüklenmesi için HTTPS kullanılmalıdır. Bu, sayfanın güvenliği ve performansı için önemlidir. Bu nedenle, video embed kodlarınızda HTTPS bağlantılarını kullanmanızı öneririm.

Örnek Kod:

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

Yukarıdaki ipuçları, sitenizin hızını artırmak için embed kodlarınızı nasıl kodlayacağınız konusunda size yardımcı olacaktır. Bu ipuçlarını uygularken, her birini doğru şekilde uygulayarak en iyi sonucu alabileceğinizi unutmayın.

Bu makalede, youtube Embed kodunun siteyi yavaşlatması ve çözümü üzerine incelememizi yaparak sonuca ulaşmış oluyoruz.

İlgili Makaleler

Bir cevap yazın

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