YouTube web ekibinin performansı iyileştirmek, Core Web Vitals geçiş oranlarını artırmak ve temel işletme metriklerini yükseltmek için yaptığı değişiklikleri içeren bir örnek olay.
Chrome ekibi sık sık "Daha iyi bir web oluşturma"dan bahseder. Peki bu ne anlama geliyor? Web deneyimleri hızlı, erişilebilir olmalı ve kullanıcıların en çok ihtiyaç duyduğu anda cihaz özelliklerini kullanmalıdır. Kendi ürününüzü kullanma, Google'ın kültürünün bir parçasıdır. Bu nedenle Chrome ekibi, "Daha iyi bir web oluşturma" adlı yeni bir seride edindiği bilgileri paylaşmak için YouTube ile iş ortaklığı yaptı. Serinin ilk bölümünde, YouTube'un daha hızlı bir web deneyimi sunmak için neler yaptığı ele alınacak.
YouTube'da performans, videoların ve diğer içeriklerin (öneriler ve yorumlar gibi) web sayfalarında ne kadar hızlı yüklendiğiyle ilgilidir. Performans, YouTube'un arama, oynatıcı kontrolü, beğeni ve paylaşım gibi kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğiyle de ölçülür.
Brezilya, Hindistan ve Endonezya gibi gelişmekte olan pazarlar, YouTube mobil web için önemlidir. Bu bölgelerdeki birçok kullanıcının daha yavaş cihazları ve sınırlı ağ bant genişliği olduğundan hızlı ve sorunsuz bir deneyim sunmak kritik bir hedeftir.
YouTube, tüm kullanıcılara kapsayıcı bir deneyim sunmak için Core Web Vitals gibi performans metriklerini, gecikmeli yükleme ve kod modernleştirmesi yoluyla iyileştirmeye karar verdi.
Core Web Vitals'ı iyileştirme
YouTube ekibi, iyileştirme alanlarını belirlemek için Chrome Kullanıcı Deneyimi Raporu'nu (CrUX) kullandı. Böylece, gerçek kullanıcıların sahada mobil cihazlarda video izleme ve arama sonucu sayfalarını nasıl deneyimlediğini görebilirdi. Largest Contentful Paint (LCP) metriğinin bazı durumlarda 4-6 saniyede ilerlemesi nedeniyle Core Web Vitals metriklerinin iyileştirilmesi gereken çok fazla şey olduğunu fark ettiler. Bu süre, 2,5 saniye olan hedeflerinden önemli ölçüde daha yüksekti.
İyileştirme alanları belirlemek için YouTube izleme sayfalarını denetlemek üzere Lighthouse'u kullanan ekip, 3,5 saniyelik İlk Zengin İçerikli Boyama (FCP) ve 8,5 saniyelik LCP ile düşük bir Lighthouse (laboratuvar) puanı elde etti.
YouTube ekibi, FCP ve LCP'yi optimize etmek için çeşitli denemeler yaptı ve iki önemli keşif elde etti.
İlk keşif, video oynatıcının HTML'sini, video oynatıcıyı etkileşimli hale getiren komut dosyasının üzerine taşıyarak performansı artırabilecekleri oldu. Laboratuvar testleri, bu sürenin hem FCP hem de LCP süresini 4,4 saniyeden 1,1 saniyeye çıkarabileceğini göstermiştir.
İkinci keşif, LCP'nin video akışındaki kareleri değil, yalnızca
<video>öğe poster resimlerini göz önünde bulundurduğu oldu. YouTube, geleneksel olarak videonun oynatılmaya başlaması için en hızlı süreyi optimize eder. Bu nedenle ekip, LCP'yi iyileştirmek için poster resmini ne kadar hızlı yayınlayabileceklerini de optimize etmeye başladı. Poster resimleriyle birkaç varyasyon denediler ve kullanıcı testinde en iyi puanı alan görseli seçtiler. Bu çalışmanın sonucunda hem FCP hem de LCP belirgin bir iyileşme gösterdi. Alan LCP'si 4, 6 saniyeden 2, 0 saniyeye düştü.
Bu optimizasyonlar LCP'yi iyileştirse de ekip, sayfanın "ana içeriği" yüklendiğinde (LCP hedefi) kullanıcı açısından LCP metriğinin mevcut tanımının tam olarak yakalanmadığını fark etti.
YouTube ekibinin üyeleri, bu endişeleri gidermek amacıyla Chrome ekibinin üyeleriyle iş ortaklığı yaparak LCP metriğinin kendi kullanım alanlarına göre nasıl iyileştirilebileceğini araştırdı. Ekipler birkaç seçeneğin uygulanabilirliğini ve etkisini değerlendirdikten sonra, bir video öğesinin ilk karesinin boyama süresini LCP adayı olarak değerlendirmek için bir teklife karar verdi.
Bu değişiklik Chrome'a uygulandıktan sonra YouTube ekibi, LCP için optimizasyon çalışmalarına devam edecek. Ayrıca, metriğin güncellenmiş sürümü, bu optimizasyonların gerçek kullanıcı deneyimleri üzerinde daha doğrudan bir etkisi olacağı anlamına gelir.
Geç yüklemeyle modülerleştirme
YouTube sayfalarında, istenmeden yüklenen çok sayıda modül vardı. 50'den fazla bileşenin oluşturulma şeklini optimize etmek için ekip, istemciye hangi modüllerin yükleneceğini bildirecek bir bileşen JS modülü haritası oluşturdu. Bileşenleri geç olarak işaretlediğinizde JS modülleri daha sonra yüklenir, böylece sayfanın ilk yükleme süresi ve istemciye gönderilen kullanılmayan JavaScript miktarı azalır.
Ancak geç yükleme uygulandıktan sonra ekip, geç yüklenen bileşenlerin ve bunların bağımlılarının en uygun olmayan zamanlarda yükleneceği bir şelale etkisi fark etti.
Ekip, bu sorunu çözmek için bir görünüm için gereken minimum bileşen grubunu belirledi ve bunları tek bir ağ isteğinde grupladı. Sonuç olarak sayfa hızı iyileşti, JavaScript ayrıştırma süresi azaldı ve nihayetinde ilk oluşturma süreleri iyileşti.
Bileşenler genelinde durum yönetimi
YouTube, özellikle eski cihazlarda oynatıcı kontrolleri nedeniyle performans sorunları yaşıyordu. Kod analizi, kullanıcıların oynatma hızı ve ilerleme durumu gibi özellikleri kontrol etmesine olanak tanıyan oynatıcının zamanla fazla bileşene sahip olduğunu gösteriyordu.
Her ilerleme çubuğu dokunma ve hareket etkinliği, iki ekstra stil yeniden hesaplaması tetikledi ve laboratuvardaki performans testi çalıştırmaları sırasında 21,17 ms sürdü. Zaman içinde yeni kontroller eklendikçe, merkezi olmayan denetim kalıbı genellikle döngüsel bağımlılıklara ve bellek sızıntılarına neden olarak izleme sayfası performansını olumsuz yönde etkiler.
Ekip, merkezi olmayan kontrolden kaynaklanan sorunları düzeltmek için oynatıcı kullanıcı arayüzünü tüm güncellemeleri senkronize edecek şekilde güncelledi. Böylece oynatıcı, alt öğelerine veri aktaracak tek bir üst düzey bileşen olarak yeniden yapılandırıldı. Bu sayede, herhangi bir durum değişikliği için yalnızca bir kullanıcı arayüzü güncelleme (oluşturma) döngüsü sağlandı ve zincirlenmiş güncellemeler ortadan kaldırıldı. Yeni oynatıcı ilerleme çubuğu dokunma ve hareket etkinliği, JavaScript yürütülmesi sırasında stil yeniden hesaplaması yapmaz ve artık eski oynatıcının yalnızca% 25'i kadar zaman alır.
Bu kod modernizasyonu, eski cihazlarda izleme yükleme sürelerinin iyileştirilmesi, oynatmanın daha az terk edilmesi ve önemli olmayan hata sayısının azaltılması gibi ek performans iyileştirmelerine de yol açtı.
Sonuçlar ve optimizasyonlar
YouTube'un performansa yaptığı yatırım sayesinde izleme sayfaları çok daha hızlı yüklenmeye başladı. YouTube'un mobil web sitesi URL'lerinin% 76'sı artık alandaki Core Web Vitals metrik eşiklerini geçiyor. Masaüstünde izleme sayfası için laboratuvar LCP'si yaklaşık 4,6 saniyeden 1,6 saniyeye indirildi. Özellikle YouTube video oynatıcısında sitenin etkileşim ve oluşturma performansı, JavaScript yürütme işleminde öncekinden% 75'e varan oranda daha az zaman harcıyor.
YouTube web'in performansında son bir yılda yapılan iyileştirmeler, izlenme süresi ve günlük etkin kullanıcı sayısı gibi işletme metriklerini de olumlu yönde etkiledi. Bu çalışmaların başarısına bağlı olarak, gelecekte optimizasyon için daha da fazla yol keşfetmeyi planlıyoruz.
Bu çalışmaya katkıda bulunan Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra ve YouTube ile Chrome ekiplerine özel teşekkürler.