Youtube Videolarının Pagespeed Insights Değerlerini Düşürmesi Sorunu
WordPress sayfalarında youtube, vimeo, twitch, soundcloud gibi websitelerinden video ya da ses embed ettiğinizde pagespeed insights değerlerinin çok fazla düştüğünü fark etmişsinizdir. Bu yazıda wordpress web sayfalarımızda youtube embed ettiğimizde bile yüksek sayfa yüklenme hızı nasıl elde edilir inceleyeceğiz.
Fark etmişsinizdir. WordPress web sayfalarına youtube embed ettiğimizde sayfa yüklenme hızı büyük oranda düşer ve Pagespeed Insights raporlarında : Üçüncü taraf kodun etkisini azaltın Üçüncü taraf kodu, ana ileti dizisini ……. ms. süreyle engelledi uyarısıyla karşılaşırız.
Hatta youtube videoları embed edilen sayfalarda Lazy Load eklentilerinin de sağlıklı çalışmayabilir. Bu tip sayfaların pagespeed Insights sonuçlarında, ”ekran dışındaki resimleri ertele” uyarısı da görebiliriz.
Bununla birlikte bu uyarılara pek çok başka uyarılar da eşlik edebilir. Örneğin Ana iş parçacığı çalışmasını en aza indir ve JavaScript yürütme süresini azaltın gibi.
Youtube Videoları içeren sayfaları hızlandıran WordPress eklentileri
WordPress eklentilerine göz attığımızda youtube videolarını hızlı yüklediğini iddia eden birkaç eklentiye rastladık ve bunları denedik. Bu wordpress hızlandırıcı eklentilerden en iyisi hangisidir ? Hangi eklenti gerçekten sayfa yüklenme hızını artırıyor
Wp Youtube Lyte
Wp Youtube lyte eklentisi, youtube videoları embed edilmiş wordpress sayfalarında sayfa yüklenme hızını artıracağını vaad eden ücretsiz bir eklenti.
Eklentiye aşağıdaki bağlantıdan ulaşabilirsiniz.
WP YOUTUBE LYTE EKLENTİ SAYFASI
Eklenti kurulduktan sonra ayarlar sayfasında şöyle bir görünümle karşılaşıyorsunuz:
Eklenti bizden youtube API girmemizi istiyor. Ancak bu API girilmese de eklenti çalışıyor. Yine de olmuşken tam olsun diye düşünerek uzun uğraşlar sonucu bir youtube API girebildik. Ancak eklenti youtube API ye bağlanmakta sık sık sorun yaşadı ve uyarılar verdi. Biz de eklentiyi Youtube API yi girmeden çalıştırdık. Sonuçlar yine de gayet başarılıydı.
Eklenti Pagespeed Insight sonuçları
Bu eklentiyi kurup denediğimizde birden çok youtube videosu embed edilmiş bir sayfamızı (Buradan sayfayı görebilirsiniz) pagespeed insight ile test ettik ve sonuçları aşağıda paylaştık.
Eklentinin aynı sayfaya hem youtube hem de vimeo videosu embed edilmiş bir sayfamızda da aynı sonucu yarattığını gördük. Bu sonuçlara göre eklentinin gerçekten vaad ettiği gibi sayfaları hızlandırdığını söyleyebiliriz.
Ancak şunu da belirtmeliyiz ki Kullandığınız temaya ya da eklentilere göre sonuçlar farklılık gösterebilecektir. Eklentinin bazı temalarda görünüm açısından sıkıntılar yaşattığını, bazı cache eklentileri ile birlikte kullanıldığında bariz bir fark yaratmadığını söyleyenler de var. Denemek size kalmış.
Eklentinin üstün yönleri :
Eklenti vaad ettiği gibi youtube videoları içeren sayfaları hızlandırıyor
Kullanımı ve ayarları kolay. Kur ve unut.
Zayıf Yönleri:
Bazı temalarda ya da bazı eklentilerle birlikte sağlıklı çalışmadığı sayfa görünümünde bozulmalar yaşandığı gibi geri dönüşler mevcut.
Velocity
Daaren Cooney’in geliştirdiği bu ücretsiz eklentiyi denediğimizde pagespeed insights değerlerini hem mobilde hem de PC sonuçlarında bariz yükselttiğini gördük.
Eklentinin sayfasına aşağıdaki bağlantıdan ulaşabilirsiniz:
Velocity eklentisi
Pagespeed Insights raporlarında çıkan : Üçüncü taraf kodun etkisini azaltın Üçüncü taraf kodu, ana ileti dizisini 2.470 ms. süreyle engelledi sorununu da çözmüş olduğunu gördük.
Eklenti, youtube ID sini girdiğinizde size bir kısakod veriyor. Bu kısakodu, videoyu eklemek istediğiniz kısma yerleştiriyorsunuz.
Önemli not: Youtube ID girerken / dan sonraki kısmı girin.
yani adres diyelim ki şöyle: youtu.be/jNfSAtyLujc
sadece jNfSAtyLujc kısmını giriyoruz.
yukarıdaki kısa kodun bulunduğu kısımdaki COPY yazan butona tıkladığımızda bir pencere daha açılıyor. Bu pencerede kodu seçip sağ tıklıyoruz ve kodu hafızaya kopyalıyoruz.
Daha sonra sayfamızda istediğimiz yere bu kodu ekliyoruz. (Aşağıda)
Kısa kodu eklediğimiz kısım aşağıdaki gibi görünüyor. play butonuna tıkladığımızda youtube videosunu görüyoruz.
Dilerseniz ayarlarda, youtube videonuz için albümden resim de seçebiliyorsunuz. (Aşağıdaki resim)
Bunu yaptığımızda ise sayfanın görünümü aşağıdaki gibi oluyor. Yani aslında youtube videosunu değil onun bir ön izlemesini görmüş oluyoruz.
Bunun sayfayı hızlandırmak dışında iki avantajı var, Birincisi, Lazy load kullanıyorsak bu resim de diğer resimler gibi sonradan yükleniyor. İkincisi resim bir alt tag a sahip olacağı için SEO çalışmanıza bir miktar daha katkısı olabiliyor.
Velocity Öncesi ve Sonrası Sayfa hızı raporu
Eklentinin Üstün Yönleri:
– Sayfa hızını bariz bir şekilde artırıyor.
– Sayfa görünümünde bozulmaya yol açmıyor
– Herhangi bir videoya İstediğiniz ön izleme resmi atayabiliyorsunuz.
Eklentinin Zayıf Yönleri:
– Eklediğiniz her video için ayrı ayrı uğraşmak gerekiyor.
– Kısa kod eklediğiniz için eklentiyi kaldırdığınızda ziyaretçileriniz sayfalarınızda video yerine bu kodu görecekler.