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 gösteren 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 (ör. öneriler ve yorumlar) web sayfalarına ne kadar hızlı yüklenmesiyle 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. Core Web Vitals metriklerinde iyileştirme yapmaları gerektiğini fark ettiler. Largest Contentful Paint (LCP) metriği bazı durumlarda 4-6 saniye olarak ölçülüyordu. 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 işlemin hem FCP'yi hem de LCP'yi 4,4 saniyeden 1,1 saniyeye düşürebileceğini gösterdi.
İ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, videonun oynatılmaya başlaması için gereken en kısa süreyi optimize eder. 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, LCP metriğinin mevcut tanımının, kullanıcının bakış açısından sayfanın "ana içeriğinin " ne zaman yüklendiğini tam olarak yansıtmadığını (LCP'nin amacı budur) düşünüyordu.
Bu endişeleri gidermek için YouTube ekibi, Chrome ekibiyle birlikte çalışarak LCP metriğinin kullanım alanlarını karşılayacak şekilde iyileştirilebileceği yolları 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ğerlendirmeyi amaçlayan 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ı, istenmeden yüklenen birçok modül içeriyordu. Ekip, 50'den fazla bileşenin oluşturulma şeklini optimize etmek için istemciye hangi modüllerin yükleneceğini bildirecek bir bileşen JS modülü haritası oluşturdu. Bileşenler geç yükleme olarak işaretlendiğinde JS modülleri daha sonra yüklenir. Bu da sayfanın ilk yükleme süresini ve istemciye gönderilen kullanılmayan JavaScript miktarını azaltır.
Ancak geç yükleme uygulandıktan sonra ekip, geç yüklenen bileşenlerin ve bunların bağımlılıklarının en uygun olmayan zamanlarda yükleneceği bir şelale etkisi fark etti.
Ekip bu sorunu çözmek için bir görünümde gereken minimum bileşen grubunu belirledi ve bunları tek bir ağ isteğinde topladı. 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 gibi özellikleri kontrol etmesine olanak tanıyan oynatıcının zaman içinde aşırı derecede bileşene ayrıldığını gösterdi.
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 kontrol modeli genellikle döngüsel bağımlılıklara ve bellek sızıntılarına neden olarak izleme sayfası performansını olumsuz yönde etkiliyordu.
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 düşürüldü. Ö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'de son bir yılda yapılan performans iyileştirmeleri, 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.