YouTube Web ekibinin performansı iyileştirmek, Core Web Vitals geçme oranlarını artırmak ve temel işletme metriklerini yükseltmek için yaptığı değişikliklerin örnek olayı.
Chrome ekibi sık sık "daha iyi bir web oluşturmak"tan 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. Test sürümü, Google'ın kültürünün bir parçası olduğundan Chrome ekibi, "Daha iyi bir web oluşturma" adlı yeni seriyle bu süreç boyunca alınan dersleri paylaşmak için YouTube ile iş ortaklığı yaptı. Dizinin ilk bölümünde, YouTube'un nasıl daha hızlı bir web deneyimini geliştirdiği ele alınacak.
Daha hızlı bir web oluşturma
YouTube'da performans, videoların ve diğer içeriklerin (ör. öneriler ve yorumlar) web sayfalarına ne kadar hızlı yüklendiğiyle ilgilidir. Performans; YouTube'un arama, oyuncu kontrolü, beğenme ve paylaşım gibi kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiği 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 sağlamak kritik bir hedeftir.
YouTube, tüm kullanıcılara kapsayıcı bir deneyim sunmak için geç yükleme ve kod modernizasyonu ile Önemli Web Verileri gibi performans metriklerini iyileştirmek üzere yola çıktı.
Core Web Vitals'ı İyileştirme
YouTube ekibi, iyileştirme yapılabilecek alanları belirlemek için Chrome Kullanıcı Deneyimi Raporu'nu (CrUX) kullanarak sahada mobil cihazlarda gerçek kullanıcıların video izleme ve arama sonucu sayfalarını nasıl yaşadıklarını gördü. Largest Contentful Paint (LCP) metriğinin bazı durumlarda 4-6 saniye sürdüğünden Core Web Vitals metriklerinin iyileştirilmesi gerektiğini fark ettiler. Bu süre, şirketin 2,5 saniye olan hedefinden epey yüksekti.
İyileştirilmesi gereken alanları belirlemek için YouTube izleme sayfalarını denetlemek üzere Lighthouse'a başvurdular ve 3, 5 saniyelik İlk Zengin İçerikli Boyama (FCP) ve 8, 5 saniyelik LCP ile düşük Lighthouse (lab) puanı elde ettiler.
YouTube ekibi, FCP ve LCP'yi optimize etmek için birkaç deneme yaptı ve bunun sonucunda iki büyük keşif ortaya çıktı.
İ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ı iyileştirebilecek olmalarıydı. Laboratuvar testleri, bunun hem FCP'yi hem de LCP'yi 4,4 saniyeden 1,1 saniyeye iyileştirebileceğini göstermiştir.
İkinci keşif ise LCP'nin video akışındaki kareleri değil, yalnızca
<video>öğesi poster resimlerini değerlendirmesidir. YouTube geleneksel olarak video oynatılmaya başlayana kadar en kısa süre için optimizasyon yapıyordu. Bu nedenle ekip, LCP'yi iyileştirmek için poster resimlerini ne kadar hızlı teslim edebileceklerini de optimize etmeye başladı. Birkaç poster resmi çeşidiyle denemeler yaptılar ve kullanıcı testinde en iyi sonucu seçenleri seçtiler. Bu çalışma sonucunda hem FCP hem de LCP belirgin bir iyileşme gösterdi ve alan LCP değeri 4, 6 saniyeden 2, 0 saniyeye yükseldi.
Bu optimizasyonlar LCP'yi iyileştirmiş olsa da ekip, LCP'nin amacı olan sayfanın "ana içeriğinin" yüklendiği zamanı kullanıcı açısından LCP metriğinin mevcut tanımının tam olarak yakalayamadığını düşündü.
YouTube ekibinin üyeleri, bu endişeleri gidermek için Chrome ekibinin üyeleriyle birlikte çalışarak LCP metriğinin kullanım alanlarını ele almak üzere nasıl iyileştirilebileceğini araştırdı. Ekipler, birkaç seçeneğin uygulanabilirliğini ve etkisini değerlendirdikten sonra video öğesinin ilk karesinin boyama süresini LCP adayı olarak değerlendirmek için bir teklifte bulundu.
Bu değişiklik Chrome'da kullanıma sunulduğunda YouTube ekibi, LCP için optimizasyon çalışmalarına devam etme konusunda heyecanlı. Metriğin güncellenmiş sürümü ise bu optimizasyonların gerçek kullanıcı deneyimleri üzerinde daha doğrudan etkiye sahip olacağı anlamına gelir.
Geç yükleme ile modülerleştirme
YouTube sayfaları, istekle yüklenen çok sayıda modül içeriyordu. Ekip, 50'den fazla bileşenin oluşturulma şeklini optimize etmek için JS modül haritasına, istemciye hangi modüllerin yükleneceğini söyleyen bir bileşen oluşturdu. Bileşenleri yavaş 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 bağımlılıklarının optimum olmayan zamanlarda yüklendiğine dair bir şelale etkisi olduğunu fark etti.
Ekip, bu sorunu çözmek için bir görünümde gereken minimum bileşen kümesini belirleyip bunları tek bir ağ isteğinde toplu hale getirdi. Sonuçlar iyileştirildi, JavaScript ayrıştırma süresi kısaltıldı ve nihayetinde ilk oluşturma süreleri daha iyi hale geldi.
Bileşenlerde 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 etmelerini sağlayan oynatıcının zamanla aşırı bileşen aldığını gösterdi.
Her ilerleme çubuğu dokunarak hareket ettirme etkinliği, stil için fazladan iki yeniden hesaplama işlemini tetikledi ve laboratuvardaki performans testi çalıştırmaları 21,17 ms sürdü. Zaman içinde yeni kontroller eklendikçe, merkezi olmayan kontrol düzeni genellikle döngüsel bağımlılıklara ve bellek sızıntılarına yol açarak izleme sayfası performansını olumsuz yönde etkiler.
Ekip, merkezi olmayan kontrolden kaynaklanan sorunları düzeltmek için oyuncu kullanıcı arayüzünü tüm güncellemeleri senkronize edecek şekilde güncelledi. Böylece oyuncu, verileri alt öğelerine aktaracak tek bir üst düzey bileşen olarak yeniden düzenlendi. Bu, herhangi bir durum değişikliği için yalnızca bir kullanıcı arayüzü güncelleme (oluşturma) döngüsü sağlayarak zincirleme güncellemeleri ortadan kaldırır. Yeni oyuncu ilerleme çubuğundaki dokunarak taşıma etkinliğinde, JavaScript yürütülürken stilin yeniden hesaplanması gerekmemektedir ve bu etkinlik artık eski oynatıcının zamanının yalnızca% 25'ini gerektirmektedir.
Bu kod modernizasyonu, eski cihazlarda izlenme yükleme sürelerinin uzaması, vazgeçilen oynatma sayısının azalması ve önemli olmayan hata sayısının azalması gibi performansla ilgili ek iyileştirmeler de sağladı.
Sonuç
YouTube'un performansa yaptığı yatırımın sonucunda, izleme sayfaları çok daha hızlı yükleniyor. YouTube mobil web sitesi URL'lerinin% 76'sı artık sahadaki Önemli Web Verileri metrik eşiklerini geçiyor. İzleme sayfasının laboratuvar LCP değeri, masaüstünde yaklaşık 4,6 saniyeden 1,6 saniyeye düşürüldü. Sitenin, özellikle YouTube video oynatıcısının etkileşim ve oluşturma performansında, JavaScript yürütmesinde geçmişe kıyasla% 75'e kadar daha az zaman harcandığı görülüyor.
Geçen yıl YouTube web'in performansında yapılan iyileştirmeler, izlenme süresi ve günlük etkin kullanıcı sayısı gibi işletme metriklerini de iyileştirdi. Bu çalışmaların başarısına dayanarak, gelecekte optimizasyon için daha da fazla yöntem araştırmaya devam etmeyi planlıyoruz.
Bu dizinin "Erişilebilir bir web oluşturma" başlıklı ikinci bölümünde, YouTube'un ekran okuyucu kullanıcıları için web sitesini nasıl daha erişilebilir hale getirdiğini okuyacaksınız.
Bu çalışmaya yaptıkları katkılardan dolayı 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 hem YouTube hem de Chrome ekiplerine teşekkür ederiz.