YouTube Embed'leri fazlasıyla ağır ve bunu düzeltmek mümkün

• YouTube Embed'leri yaklaşık 1.3 MB boyutunda ve birden fazla embed arasında kaynak paylaşmıyor
• <lite-youtube> web component'i kullanıldığında boyut yaklaşık 100k'ya düşüyor, kaynaklar paylaşılıyor ve işlevlerden ödün verilmiyor

YouTube video embed'i

• YouTube videoları bir web sitesine embed edilebilir
• YouTube'un Share menüsünden < > Embed seçeneği seçildiğinde, içinde <iframe> bulunan HTML kodu verilir
• <iframe> performans açısından iyi değildir, ancak korumalı üçüncü taraf içerikler için uygundur

Performansı iyileştirme önerileri

• Video görünmüyorken hemen yüklenmemesi için loading="lazy" niteliği eklenebilir
• Videonun özgün en-boy oranını korumak ve akışkan hale getirmek için satır içi stiller eklenebilir

Mevcut YouTube Embed'inin sorunları

• Tek bir YouTube Embed'i bulunan bir sayfada 32 istek, 1.3 MB veri aktarımı ve 2.76 saniye yükleme süresi görülüyor
• Birden fazla embed arasında kaynak paylaşılmadığı için, embed sayısı arttıkça veri aktarımı doğrusal olarak artıyor

Görünüm ve işlev

• YouTube Embed'i videonun "poster" görselini, video başlığını ve büyük oynat düğmesini sunuyor
• Bu özellikler çok fazla kaynak kullanmadan da uygulanabilir

Neden bu şekilde?

• Hafif embed'ler test edilmiş, ancak etkileşimin azaldığına dair raporlar var
• Ancak bu sonuç sezgiye aykırı görünüyor ve daha derin bir inceleme gerektiriyor
• Çok fazla kaynak kullanımı çevresel açıdan da sorun yaratıyor

Çözüm: embed deneyimini farklı bir şekilde kopyalamak

• Google'dan Paul Irish tarafından oluşturulan lite-youtube-embed adlı bir web component var
• Bu component görsel performansa odaklanıyor ve yaklaşık 224 kat daha hızlı render ediliyor
• Varsayılan embed ile aynı işlevleri sunarken hız, verimlilik ve varsayılan gizliliği iyileştiriyor

Lite YouTube Embed nasıl kullanılır

1. Web component'i başlatan JavaScript'i bağlayın
2. Kullanın

• npm üzerinden kurulabilir veya projeye kopyalanarak kullanılabilir
• CDN üzerinden bağlantı verilerek kullanılabilir

Alternatifler

• Shadow DOM sürümü (stil koruması, ancak stil vermesi zor)
• Doğrudan kendiniz uygulamak
  • Raymond Camden: YouTube Embed web component'i oluşturma (vanilla ve WebC sürümleri)
  • Adrian Roselli: YouTube ve Vimeo web component'leri
• Mux: <youtube-video> (DOM API ile uyumlu)
• React portu ve Next.js resmi sürümü

GN⁺ özeti

• YouTube Embed'leri çok fazla kaynak kullanarak performansı olumsuz etkiliyor
• lite-youtube-embed gibi web component'ler kullanılarak performans büyük ölçüde iyileştirilebilir
• Çevresel açıdan da olumlu bir etki yaratabilir
• Benzer işlevler sunan diğer web component'ler de değerlendirmeye değer

[xguru]

lite-youtube-embed - daha hızlı YouTube embed'i

[GN⁺]

Hacker News yorumları

• Topluluk forumu platformlarında YouTube gömmelerini algılayıp, tıklanana kadar yüklenmeyen proxy küçük resimlerle değiştiriyorum

  • Bir kişinin bir YouTube videosu paylaşması, tüm kullanıcıların 1 MB'tan fazla YouTube JavaScript'i indirmesini ve IP'lerinin Google tarafından izlenmesini gerektirmemeli

• Yazar, hafif sürümün etkileşimi azalttığına inanmıyor

  • Ben ise buna tamamen inanıyorum
  • Önerilen lite-youtube-embed proje sayfasındaki demoda, hafif sürüm videoyu oynatmaya başlamak için daha uzun sürüyor
  • Yükleme süresi milisaniyeler düzeyinde bile arttıkça etkileşim azalır

• Farklı oynatıcıların kullanıcılar tarafından farklı algılanması şaşırtıcı değil

  • lite-youtube-embed, gerçek YouTube sayfasına tıklamayı engelliyor
  • Bu, içeriğin gerçek kaynağına gitmeyi önlemeye yönelik bir girişim gibi görünebilir
  • Gömülü videoları nadiren oynatıyorum ama oynattığımda normal YouTube deneyimini tercih ediyorum
  • Ek bir katman varmış gibi görünüyorsa tıklama olasılığım azalıyor

• Bu, geliştiricilerin kullanıcıların yazılımı nasıl kullandığını tam olarak bilemeyeceğine dair yanlış inanca bir örnek

  • Videoyu ve Google kullanımını azaltmak, JavaScript'in megabaytlarını düşürmek istiyorum
  • Daha iyi bir web için YouTube video gömmelerini bırakmalıyız

• Blog yazarlarının GitHub Gist gömmelerini kullanmaması için baskı yapılması gerekiyor

  • Hugo gibi statik site oluşturucular, sözdizimi vurgulamalı kod parçacıklarını destekliyor
  • Dinamik siteler highlight.js kullanabilir

• Gömmelerin toplam ağırlığını azaltmanın ve UX'i iyileştirmenin bir yolu reklamları engellemektir

  • Sayfadaki reklamları engellemek için Content Security Policies kullanılabilir

• uBlock kullanıcıları için istemci tarafı bir çözüm olarak click 2 load kullanılabilir

  • Chrome manifest v3'e geçtiği için bu çalışmayabilir

• Hafif gömmelerin etkileşimi azalttığını gösteren test sonuçları var

  • Hızlı yükleme süreleri etkileşimi artırmalı, ancak hafif gömmelerde etkileşim düştüyse muhtemelen işlevsellikten ödün verilmiştir

• Gömülü video, YouTube sunucularındaki dosyayı işaret eden bir <video> öğesi olabilirdi

  • Ticari çıkarlar buna engel oldu

• Gömme sayısı arttıkça toplam ağırlık doğrusal olarak artıyor

  • Same-origin policy, önbelleğe alınmış kaynakların kullanılmasına izin vermeli

• lite youtube embed'e alternatif olarak kendi çözümümü paylaşıyorum

  • Tam özelleştirilebilirlik açısından daha iyi bir ödünleşim sunuyor