Mükemmel Youtube Core Web Vitals

Bir YouTube videosunu nasıl gömersiniz (yavaş yol)

YouTube, sayfanıza video gömmeyi oldukça kolaylaştırdı. Önce video sayfasına gidin ve videonun altındaki paylaş butonuna tıklayın

Ardından embed seçeneğini seçin ve gömme kodunu kopyalayın:

Kodu kopyalayın ve sitenizin HTML'sine yapıştırın. Ardından bir Lighthouse denetimi çalıştırdığınızda First Contentful Paint, Speed index, Largest Contentful Paint ve Time to interactive gibi tüm önemli metriklerin yaklaşık 1 - 1,5 saniye arttığını fark edeceksiniz. Bunu düzeltelim:

Varsayılan YouTube gömme

Akıllı YouTube gömme

YouTube Core Web Vitals Sorunlarını Düzeltin!

Görsel için bir yer tutucu oluşturarak Core Web Vitals sorunlarını düzelteceğiz. Sayfa yüklenirken yer tutucu yüklenecektir. Yalnızca YouTube videosuna gerçekten ihtiyaç duyduğumuzda yer tutucuyu gerçek video ile değiştireceğiz.

Adım 1: Yer tutucu görseli indirin

Yer tutucu görseli indirmek çok kolaydır. YouTube videosunun URL'sine bakın. Bu örnek için şu URL'yi kullanacağız: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Fark edebileceğiniz gibi URL'de bir değişken var: 'Oxv6IRcuNaI'. Bu değişkeni kopyalayın ve herhangi bir YouTube videosu için varsayılan görsel konumuna yapıştırın https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Bu URL'yi açın, görsele sağ tıklayın ve 'resmi farklı kaydet' seçeneğini seçin. Görseli indirdikten sonra ihtiyaçlarınıza göre yeniden boyutlandırın.

Adım 2: Yer tutucuyu oluşturun

Sonraki adım yer tutucuyu oluşturmaktır. Relative konumlandırılmış bir div kullanacağım, object-fit:cover ile bir görsel ve daha sonra dolduracağımız boş bir iframe yerleştireceğim.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe 
       id="ytiframe" 
       data-src="https://www.youtube.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

Şimdiye kadar her şey yolunda, şimdi biraz stil ekleyelim. YouTube yer tutucusundaki padding, videonun tüm cihazlarda ölçeklenmesini sağlamak için küçük bir numaradır. Görsel üstte absolute olarak konumlandırılmıştır ve object-fit:cover özelliğine sahiptir. Bu, bir arka plan görselini taklit eder ancak lazy loading ve duyarlı görsellere olanak tanır. Son olarak iframe'in kendisi absolute konuma sahiptir ve görünür olduğunda tüm yer tutucuyu kaplar.

Şimdi sihirli kısma geçelim: yer tutucu görseli gerçek bir videoya dönüştürelim. YouTube yer tutucusuna bir event listener ekliyorum. Bir ziyaretçi görselin üzerine geldiğinde YouTube iframe'i yüklenir ve opacity değişikliği sayesinde görünür hale gelir.

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder'); 

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);

YouTube videosunu her zaman gösterin

Bir adım daha ileri gidelim ve YouTube videosunu herhangi bir etkileşim olmadan bile yer tutucu görseli her zaman değiştirmek üzere kuyruğa alalım. Bunu hemen yapmak istemiyorum, tarayıcı boşta kalana kadar bekleyelim. Basitlik açısından bir timeout kullanacağım ancak requestIdleCallback() yöntemi de harika bir seçim olabilir

<script>
var ytplaceholder = document.getElementById ('ytplaceholder'); 

var videolistner = function (e) { 
   var ytiframe = document.getElementById ('ytiframe'); 
   ytiframe.src = ytiframe.getAttribute ('data-src'); 
   ytiframe.onload = ytiframe.style.opacity=1; 
   ytplaceholder.removeEventListener ("mouseover", videolistner); 
   }; 

ytplaceholder.addEventListener ('mouseover', videolistner);   

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

İşte oldu, sadece birkaç satır kodla gömülü bir YouTube videosuyla mükemmel bir PageSpeed puanı.

Bu tekniği genişletin.

Tabii ki bu sadece belirli bir id'ye sahip tek bir YouTube videosu için çalışan basit bir örnektir. Sitenizde event listener'ı bir querySelector'a bağlamak ve ayrıca YouTube videolarını görünüme kaydırılmadan önce otomatik olarak yüklemek için interaction-observer eklemek iyi bir fikir olacaktır. Nasıl genişletmek isterseniz isteyin: fikir aynı kalır!