Daha iyi bir web oluşturma: Daha hızlı bir YouTube

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.

Sriram Krishnan
Sriram Krishnan

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.

Chrome Kullanıcı Deneyimi Raporu verilerini gösteren PageSpeed Insights.
Mobil web için YouTube izleme sayfası, Önemli Web Verileri eşiklerini geçiyor.

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.

YouTube izleme sayfası geçiş oranlarını ve YouTube kaynağını gösteren FCP ve LCP grafikleri.

İ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 mobil cihazlar için Lighthouse raporu.
Google, altın standart olarak FCP için 1,8 saniye ve LCP için 2,5 saniyelik bir hedef belirler. FCP ve LCP sırasıyla 3,5 saniye ve 8,5 saniyede açıkça sarı ve kırmızı renkteydi.

YouTube ekibi, FCP ve LCP'yi optimize etmek için çeşitli denemeler yaptı ve iki önemli keşif elde etti.

  1. İ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.

  2. İ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ü.

Kontrol, A denemesi (resim küçük resmi) ve B denemesini (siyah küçük resim) gösteren mobil web için sayfa LCP denemesi
Bu değişiklikten sonra laboratuvarda FCP ve LCP'de 4,4 saniyeden 1,1 saniyeye kadar bir iyileşme gözlemledik. A denemesi: Videonun duraklatılmış olarak başladığı sayfalarda asıl video küçük resminin kullanılması iyi sonuç verirken izleme sayfası gibi otomatik oynatılan video sayfalarında kullanıcı çalışmalarında kötü performans gösterdi. Bu durum, etkin kullanıcı sayısında da düşüşe neden oldu. B denemesi: Kullanıcı çalışmalarında en iyi sonuçların, düz siyah bir poster resminin kullanılmasıyla elde edildiği görülmüştür. Kullanıcılar, videoların siyahtan ilk kareye geçişinin otomatik oynatma özelliğinde daha az rahatsız edici bir deneyim olduğunu belirtti.
Siyah küçük resim, Temmuz 2021&#39;de tüm mobil web kullanıcıları için üretime dağıtıldı ve yukarıdaki RUM analizinde görüldüğü gibi FCP ve LCP&#39;de belirgin bir iyileşme gösterdi.
Temmuz 2021'de, yukarıdaki RUM analizinde görüldüğü gibi FCP ve LCP'de belirgin bir iyileşme gösteren siyah küçük resim tüm mobil web kullanıcıları için üretime dağıtıldı.

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.

YouTube oynatıcı ve kontrolleri görselleştirilmiş
YouTube video oynatıcı, kullanıcıların oynatma hızını kontrol etmesine, ilerlemeyi takip etmesine, bölümleri atlamasına ve daha birçok işlem yapmasına olanak tanır. Kullanıcı belirli bir kontrole dokunduğunda, durumdaki değişiklik diğer kontrollere iletilmelidir. Örneğin, kullanıcının ilerleme çubuğuna dokunması, oynatma çubuğu, altyazılar gibi kontrollerle paylaşılmalıdır.

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.

Performans zaman çizelgesinde gösterilen 21,17 ms etkinliği.
4 kat CPU yavaşlatma performansı çalıştırması olan Chrome Geliştirici Araçları.

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.

Performans zaman çizelgesinde gösterilen etkinliklerin süresi azaltıldı.

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.