- Varsayılan YouTube `` embed'i, boş bir sayfaya yalnızca bir tane eklendiğinde bile 32 istek ve 1.3MB veri transferi oluşturuyor; bu da küçük bir video arayüzüne kıyasla büyük bir yük anlamına geliyor
- Birden fazla video eklendiğinde kaynaklar paylaşılmadığı için yük doğrusal olarak artıyor; Zach Leatherman'ın ölçümünde 2 embed 2.4MB'a, 3 embed ise 3.6MB'a çıkıyor
- Kullanıcının ilk gördüğü şey çoğunlukla poster görseli, başlık ve büyük oynat düğmesi olduğu için `` gibi bir Web Component ile aynı deneyim çok daha hafif şekilde yeniden üretilebiliyor
lite-youtube-embed, yaklaşık 100KB düzeyinde ve birden çok embed arasında kaynak paylaşabildiği için, işlev kaybı olmadan hız ve verimliliği artırıyor- YouTube embed'leri çok yaygın kullanıldığından, embed başına megabayt düzeyindeki veriyi azaltmak elektrik tüketimini ve karbon emisyonunu da düşüren somut bir optimizasyon oluyor
Varsayılan `` embed'inin maliyeti
- YouTube paylaşım menüsünde
Embed seçildiğinde, `` tabanlı HTML veriliyor
- Varsayılan kodda
loading="lazy" bulunmadığı için, ekran dışında kalan videolar bile hemen yüklenebiliyor
- YouTube, varsayılan iframe'e yalnızca lazy loading eklese bile anında performans iyileşmesi sağlanabilir
- iframe'i duyarlı hale getirip orijinal oranı korumak için CSS ile YouTube embed iframe'ini doğrudan hedefleyebilirsiniz
iframe[src^="https://www.youtube.com/embed/";] {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
}
Gerçek ölçümler ve doğrusal artış
- Boş bir sayfaya yalnızca tek bir YouTube embed'i eklendiğinde bile yükleme maliyeti oldukça yüksek çıkıyor
-
32 istek
- 1.3MB veri transferi
- Yazarın WiFi bağlantısında 2.76 saniye yükleme süresi
- Zach Leatherman, embed sayısı arttıkça kaynaklar paylaşılmadığı için yükün doğrusal arttığını belirtiyor
- 2 embed: 2.4MB
- 3 embed: 3.6MB
- Görünüşe göre boyut, Zach'in bunu doğruladığı zamana kıyasla bugün daha da artmış durumda
Kullanıcının ilk gördüğü arayüz basit
- YouTube embed'inde kullanıcının ilk karşılaştığı öğeler sınırlı
- Videonun poster görseli
- Video başlığı
- Tıklanınca oynatan büyük oynat düğmesi
- Bu düzeyde bir arayüz ve davranış, tüm YouTube oynatıcı kaynaklarını en başta yüklemeden de uygulanabilir
- Hafif embed'lerin etkileşimi düşürdüğü iddiasını, yöntem ve veri paylaşılmadan değerlendirmek zor
- Geçmişte bir YouTube mühendisi daha hafif bir video sayfasını test ettiğinde, ortalama yükleme süresinin tersine arttığı bir örnek de vardı
- Daha hafif sayfa, düşük performanslı cihazlar ve yavaş internet kullanan kullanıcılara da ulaşabildi
- Yeni erişim kazanılan bu kullanıcıların kullanımı, ortalama yükleme süresi metriğini yavaşlatmış olabilir
- Yalnızca ortalama yükleme süresine bakmak, kullanıcı bazındaki gerçek hız iyileşmesini gözden kaçırabilir
Alternatif: `` Web Component
- Google'ın performans alanındaki isimlerinden Paul Irish'in hazırladığı lite-youtube-embed, varsayılan embed deneyimini daha hafif biçimde yeniden oluşturan bir Web Component
- Proje açıklaması, gerçek embed gibi render ederken yaklaşık 224 kat daha hızlı olduğunu söylüyor
- Kullanıcı deneyimi varsayılan YouTube embed'iyle neredeyse aynı
- Poster görselini gösterme
- Başlığı gösterme
- Büyük oynat düğmesini gösterme
- Tıklayınca videoyu oynatma
- Fark, kaynak kullanımı ve paylaşım biçiminde ortaya çıkıyor
- Varsayılan YouTube embed'i: yaklaşık 1.3MB
- ``: yaklaşık 100KB
- Birden fazla embed arasında kaynak paylaşımı mümkün
- İşlev kaybı olmadan hız, verimlilik ve varsayılan gizlilik avantajı sağlanabiliyor
Kullanım şekli ve ilgili uygulamalar
- JavaScript ile Web Component kaydedildikten sonra `` öğesi kullanılıyor
- npm kurulumu, doğrudan kopyalama ve CDN bağlantısı yöntemlerinin hepsi mümkün
import "https://esm.sh/lite-youtube-embed";;
- README'nin önerdiği yaklaşım, önce HTML'i koyup ardından script'i asenkron yükleyerek progressive enhancement uygulamak
- JavaScript yüklenmeden önce de doğru görünmesi için
background-image HTML içine yerleştirilebiliyor
[Play Video: Keynote (Google I/O '18)](https://youtube.com/watch?v=ogfYd705cRs)
- İlgili başka uygulamalar ve alternatifler de var
2 yorum
lite-youtube-embed - daha hızlı YouTube embed'i
Hacker News yorumları
Topluluk forum platformunda YouTube embed'lerini tespit edip, tıklanmadan önce yüklenmeyen proxy küçük görsellerle değiştiriyorum
Başlıktaki birinin bir YouTube videosu paylaşmış olması, o sayfayı açan herkesin 1MB+ JavaScript indirmek ve IP'sinin Google tarafından takip edilmesi zorunda olduğu anlamına gelmemeli
Takibi çok önemsemediğim için YouTube'un sağladığı küçük görselleri doğrudan kullanıyorum
SoundCloud oynatıcısı da inanılmaz ağır
Küçük görselleri hotlink ederseniz Google oradan da takip yapabilir
Yazar, daha hafif sürümün etkileşimi düşürdüğüne dair kanıta inanmadığını söylemiş ama ben bunun gayet mümkün olduğunu düşünüyorum
Önerilen lite-youtube-embed projesinin demosunda hem hafif oynatıcı hem normal oynatıcı var; hafif sürümde video oynatmanın başlaması gözle görülür biçimde daha uzun sürüyor
Yükleme süresine eklenen her 1 milisaniye etkileşimi azaltır, burada da fark birkaç yüz milisaniyeden fazla gibi görünüyor
https://paulirish.github.io/lite-youtube-embed/
Her milisaniye önemlidir mantığı web sayfası için de geçerli. Kullanıcı sayfadan çıkarsa videoya zaten hiç gelmez
Ayrıca kullanıcının videoyu izlemek istememesi de sorun olmayabilir. Kişisel olarak web sayfasında bir özet varsa videodan kaçınabildiğim için memnunum
YouTube'un masaüstü yeniden tasarımından da memnun değilim; izlemeye geldiğim videodan çok diğer videoları öne çıkarmak için ekranı kullanıyor. Keşke daha az dikkat dağıtıcı unsur olsa
Trafik ışığı benzetmesiyle, tüm ışıkların kısa süreli kırmızı olmasındansa sadece yaklaştığım ışığın yeşil olmasını tercih ederim
Büyük şirketlerin gerçek davranışlarına bakınca buna aldırmadıkları açık; onlar için önemli değilse bizim de onların yerine optimizasyon yapmamız için bir neden yok
Bu kullanım örneğinde büyük bir mesele değil ama yığının geri kalanında performansa dikkat etmek gerek
Nasıl oldu da bu kadar geri gittik bilmiyorum; Google sanki düzgün çalışan şeyleri zamanla bozuyor
Ortama göre değişebilir: Firefox, yaklaşık 2 yıllık i7-1185G7 dizüstü, Windows 11, 32 bit modunda Edge sürekli güncelleniyor ve haftalardır yeniden başlatılmamış durumda
Yavaş hissettiren şey büyük ölçüde dönen yükleme göstergesi. Adeta kendi yavaşlığını ilan ediyor
Tıklamadan sonra oynatmaya kadar olan gecikme etkili olabilir ama bunun derecesini düzgün ölçmek için YouTube ölçeğinde bir aktör gerekir
Daha hafif embed'lerin etkileşimi düşürdüğü söylentisi ve önerilen lite-youtube-embed hakkında, kullanıcılar oynatıcı biraz farklı görünse ya da farklı davransa bile bunu yabancı ve güvenilmez bir şey olarak algılayabilir
Demodaki lite-youtube-embed, başlık görünse de gerçek YouTube sayfasına giden bir bağlantı sunmadığı için, asıl “içeriğe” gitmeyi engelleyen düşmanca bir his bile veriyor
Elbette bu özellik kolayca eklenebilir ama daha büyük bir sorunu da ortaya koyuyor
Gömülü videoları neredeyse hiç oynatmam ama oynatacaksam sıradan YouTube deneyimi benim için yeterli. Bunu bilinmeyen başka bir katmanla sarmak tıklama olasılığını azaltıyor
Bu yazıdaki “hiçbir şey feda edilmiyor” ifadesi, geliştiricinin kullanıcıların yazılımı nasıl kullandığını bildiğini sanmasının bir örneği. Gerçekte bu her zaman sadece bir tahmindir
Umarım videolar azalır, her yerdeki Google bağımlılığı ve JavaScript yığınları da azalır. Daha iyi bir web için YouTube videoları her yere embed edilmemeli
https://paulirish.github.io/lite-youtube-embed/
Artık bildiğime göre bu tür hafif oynatıcılarda da o düğmenin olmasını isterim. Yine de bu uygulama bağlantıyı edinmenin kolay yolunu tamamen engellemiyor
Videoyu oynatınca erişilebiliyor ama bu amaca aykırı. Videoyu oynatmak istemiyorum; yüklenmesini bekleyip duraklattıktan sonra kaydet düğmesine basmak da istemiyorum
Artık blog yazarlarının GitHub Gist embed kullanmasını da engellemek kaldı
Hugo ve muhtemelen diğer statik site oluşturucular, sözdizimi vurgulamalı kod parçacıklarını zaten yerleşik olarak destekliyor; daha dinamik siteler de highlight.js ile üçüncü taraf hizmet bağımlılığını ortadan kaldırabilir
Küçük kod parçaları için ağır bir iframe kullanmak gerçekten garip
https://gohugo.io/content-management/syntax-highlighting/
https://highlightjs.org
Benim hoşuma gitmese bile, zevkime uysun diye site değişikliği “dayatmak” mantıklı değil
Birkaç hafta içinde düzeltildi ama o hâliyle yıllarca kalmış olması şaşırtıcıydı
Sayfada Content Security Policy kullanabiliyorsanız, reklamları engelleyerek embed'in toplam ağırlığını azaltabilir ve kullanıcı deneyimini de iyileştirebilirsiniz
İlgili bilgi: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
Content-Security-Policyiçine gelişigüzel unsafe-inline koymamak iyi olurÇünkü CSP'nin enjeksiyon saldırılarına karşı korumasını kapatır. Gerçekten gerekliyse, inline script'e izin vermenin daha güvenli yolları var
https://content-security-policy.com/
“Daha hafif embed, etkileşimi düşürdü” anlatısında büyük bir eksik var gibi görünüyor
Normalde yükleme süresi kısalınca etkileşimin iyileşmesi gerekir. Ama hafif embed'de etkileşim düştüyse, bu bazı özelliklerin ya da davranışların feda edildiği anlamına gelir
Oysa bu yazı hiçbir şeyin feda edilmediğini söylüyor; demek ki hikâyenin bir yerinde eksik bir parça var
Burada da benzer bir durum olabilir. Daha hafif embed sayesinde birçok kişi videoyu ilk kez yükleyebildi ama cihazı ya da bağlantısı yavaş olduğu için oynatma aşamasında ayrılmış olabilir
Bu durumda, daha önce oynatıcıyı hiç yükleyemediği için veri bırakmayan insanlar artık “video izlemeyi yarıda bırakanlar” oranını yükseltiyormuş gibi görünebilir
Kullanıcıların hedefe göre yükleme süresi beklentileri ve toleransı değişir; sayfanın kendisiyle içindeki video da farklı hedeflerdir
Sayfanın toplam yüklenme süresi her zaman embed'in yüklenme süresine bağlı değildir ve sayfanın genel yüklenmesi içerik yüklenme süresini de perdeleyebilir
Daha önemli metrik, embed yüklenme süresi değil, tıklamadan oynatmaya kadar geçen gecikme olabilir
uBlock kullanıcıları için istemci tarafında bir çözüm olarak click2load filtresi kullanılabilir
Ancak Chrome Manifest V3'e geçiyor, bu yüzden çalışmayabilir. yokoffing/filterlists içindeki filtreye bakabilirsiniz
https://raw.githubusercontent.com/yokoffing/filterlists/main...
Betterfox'un geliştiricisi ve GitHub'da başka faydalı filtreleri de var
İstediğim şey sadece normal bir bağlantı olduğu için, eskiden sayfadaki YouTube iframe'lerini linke çeviren kısa bir kullanıcı betiği yazmıştım
Basit bir uygulama için şaşırtıcı derecede iyi çalışıyor.
youtube.com/embedveyoutube-nocookie.com/embediframe'lerini bulupwatch?v=bağlantılarına çeviriyor, zaman damgasını da koruyabiliyor ve istenirse küçük görseli de ekleyebiliyor“Embed sayısı arttıkça ağırlık da doğrusal artıyor. İki tane 2.4MB, üç tane 3.6MB” kısmı tuhaf
Bu kaynakların neden önbellekten gelmediğini merak ediyorum. Hepsi
www.youtube.comüzerinden yükleniyorsa, aynı kaynak politikası gereği önbelleğe alınmış kaynakların kullanılabilmesi gerekmez mi?Yazıdaki en iyi kısım, daha hafif sayfaya geçince ortalama sayfa yükleme süresinin aslında yükseldiğini anlattığı bölümdü
Daha yakından bakınca, düşük donanımlı ve yavaş internetli cihaz kullanıcılarının da YouTube'u ilk kez gerçekten kullanabilir hâle geldiği ve onların yoğun kullanımı yüzünden ortalamanın yavaşlamış gibi göründüğü ortaya çıkmış
Gerçek kullanım hızı herkes için göreli olarak artmıştı ve ortalama sayfa yükleme hızı metriğinin sonuçta anlamsız bir dikkat dağıtıcı olması çok etkileyiciydi
Bir zamanlar tüm YouTube embed'lerini küçük görsele çeviren ve tıklayınca YouTube'u açan bir Firefox eklentisi yapmıştım
Başta telefonda Flash olmadığı hâlde Flash embed'ler yaygın olduğu için yapmıştım; sonra iframe embed'leri de işleyecek şekilde genişlettim
Çoğu durumda, küçük bir embed penceresindense doğrudan YouTube sitesini ya da uygulamasını tam olarak açmak kullanıcı deneyimi açısından daha iyiydi
O dönemde yeni üst seviye eklenti API'sine göre yazmış olmama rağmen, tarayıcı sürümleri arasında desteğin beklediğim kadar sürmemesi can sıkıcıydı; bu yüzden WebExtension'a taşımadım. Bu yazıyı görünce tekrar port etmeyi istedim