Chrome ekibi genellikle “bir daha iyi web”, ancak bu ne anlama geliyor? Web deneyimleri hızlı, erişilebilir olmalı ve cihaz özelliklerini kullanıcıların en çok ihtiyaç duyduğu anda kullanmalıdır. test sürümü Google kültürünün bir parçasıdır, bu nedenle Chrome ekibi, “Daha iyi bir web oluşturmak” adlı yeni bir dizide bu süreçte öğrenilen dersleri paylaşmak için YouTube ile iş birliği yaptı. Serinin ilk bölümü, YouTube’un nasıl daha hızlı bir web deneyimi oluşturduğunu inceleyecek.
Daha hızlı bir web oluşturma #
YouTube’da, verim videoların ve diğer içeriğin (öneriler ve yorumlar gibi) web sayfalarına ne kadar hızlı yüklendiğiyle ilgilidir. Performans, YouTube’un arama, oyuncu kontrolü, beğeniler ve paylaşımlar gibi kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğiyle de ölçülür.
Brezilya, Hindistan ve Endonezya gibi büyüyen gelişmekte olan pazarlar, YouTube mobil web için önemlidir. Bu bölgelerdeki birçok kullanıcı daha yavaş cihazlara ve sınırlı ağ bant genişliğine sahip olduğundan, hızlı ve sorunsuz bir deneyim sağlamak kritik bir hedeftir.
Tüm kullanıcılara kapsayıcı bir deneyim sağlamak için YouTube, yavaş yükleme ve kod modernizasyonu yoluyla Önemli Web Verileri gibi performans metriklerini iyileştirmeye koyuldu.
Önemli Web Verilerini İyileştirme #
İyileştirme alanlarını belirlemek için YouTube ekibi Chrome Kullanıcı Deneyimi Raporu (CrUX) gerçek kullanıcıların sahada video izleme ve arama sonuç sayfalarını mobil cihazlarda nasıl deneyimlediklerini görmek için. En Büyük Zengin İçerikli Boyama (LCP) metriği bazı durumlarda 4-6 saniyede çalıştığından, Önemli Web Verileri ölçümlerinin iyileştirme için çok fazla alana sahip olduğunu fark ettiler. Bu, 2,5 saniyelik hedeflerinden önemli ölçüde daha yüksekti.
İyileştirme alanlarını belirlemek için, deniz feneri YouTube izleme sayfalarını denetlemek ve 3,5 saniyelik First Contentful Paint (FCP) ve 8,5 saniyelik LCP ile düşük bir Lighthouse (laboratuvar) puanı ortaya çıkarmak.
YouTube ekibi, FCP ve LCP’yi optimize etmek için çeşitli deneyler yaptı ve sonuçta iki büyük keşif gerçekleştirdi.
-
İlk keşif, Video Oynatıcı için HTML’yi Video Oynatıcıyı etkileşimli yapan komut dosyasının üzerine taşıyarak performansı iyileştirebilecekleriydi. Laboratuar testleri, bunun hem FCP’yi hem de LCP’yi 4,4 saniyeden 1,1 saniyeye çıkarabileceğini gösterdi.
-
İkinci keşif, LCP’nin yalnızca
<video>öğe poster görüntüleri ve video akışının kendisinden kareler değil. YouTube geleneksel olarak video oynatılmaya başlayana kadarki en hızlı süre için optimize edilmiştir, bu nedenle ekip LCP’yi iyileştirmek için poster görüntüsünü ne kadar hızlı teslim edebileceklerini de optimize etmeye başladı. Poster görüntülerinin birkaç varyasyonunu denediler ve kullanıcı testinde en iyi puanı alan fotoğrafı seçtiler. Bu çalışmanın sonucunda, hem FCP hem de LCP, saha LCP’sinin 4,6 saniyeden 2,0 saniyeye çıkmasıyla belirgin bir gelişme gösterdi.
Bu optimizasyonlar LCP’yi iyileştirse de ekip, LCP metriğinin mevcut tanımının, sayfanın “ana içeriği” yüklendiğinde kullanıcının bakış açısından tam olarak yakalamadığını hissetti; bu, LCP’nin amacıdır.
Bu endişeleri gidermek için YouTube ekibinin üyeleri, kullanım durumlarını ele almak için LCP metriğinin iyileştirilebileceği yolları keşfetmek üzere Chrome ekibinin üyeleriyle ortaklık kurdu. Birkaç seçeneğin fizibilitesini ve etkisini değerlendirdikten sonra, ekipler bir teklif bir video öğesinin ilk karesinin boyama süresini bir LCP adayı olarak dikkate almak.
Bu değişiklik Chrome’a girdikten sonra, YouTube ekibi LCP için optimizasyon çalışmalarına devam etmekten heyecan duyuyor. Metriğin güncellenmiş versiyonu, bu optimizasyonların gerçek kullanıcı deneyimleri üzerinde daha doğrudan bir etkiye sahip olacağı anlamına gelir.
Yavaş yükleme ile modülerleştirme #
YouTube sayfaları, hevesle yüklenen birçok modül içeriyordu. Ekip, 50’den fazla bileşenin nasıl oluşturulduğunu optimize etmek için müşteriye hangi modüllerin yükleneceğini söyleyen JS modül haritasına bir bileşen oluşturdu. Bileşenleri tembel olarak işaretleyerek, JS modülleri daha sonra yüklenecek ve böylece sayfanın ilk yüklenme süresi ve istemciye gönderilen kullanılmayan Javascript miktarı azaltılacaktır.
Ancak, yavaş yükleme uygulandıktan sonra ekip, yavaş yüklenen bileşenlerin ve bağımlılıklarının yetersiz zamanlarda yükleneceği bir şelale etkisi fark etti.
Ekip, bu sorunu çözmek için bir görünümde gereken minimum bileşen setini belirledi ve bunları tek bir ağ isteğinde toplu hale getirdi. Sonuçlar, iyileştirilmiş sayfa hızı, azaltılmış JavaScript ayrıştırma süresi ve sonuç olarak daha iyi ilk oluşturma süreleri oldu.
Bileşenler arasında durum yönetimi #
YouTube, oynatıcı kontrolleri nedeniyle özellikle eski cihazlarda performans sorunları yaşıyordu. Kod analizi, kullanıcıların oynatma hızı ve ilerleme gibi özellikleri kontrol etmesine izin veren oynatıcının zamanla aşırı bileşenli hale geldiğini gösterdi.
Her ilerleme çubuğu dokunma-taşıma olayı, iki ekstra stil yeniden hesaplamasını 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ı çözmek için oynatıcının kullanıcı arayüzünü tüm güncellemeleri senkronize edecek şekilde güncelledi; Bu, zincirleme güncellemeleri ortadan kaldırarak herhangi bir durum değişikliği için yalnızca bir UI güncelleme (işleme) döngüsü sağladı. Yeni oyuncu ilerleme çubuğu dokunma-taşıma etkinliği, JavaScript yürütmesi sırasında yeniden stil hesaplaması yapmıyor ve artık eski oynatıcının yalnızca %25’lik zamanını gerektiriyor.
Bu kod modernizasyonu aynı zamanda eski cihazlarda iyileştirilmiş izleme yükleme süreleri, daha az yarım bırakılan oynatma ve azaltılmış ölümcül olmayan hata sayısı gibi ek performans iyileştirmeleriyle sonuçlandı.
Çözüm #
YouTube’un performansa yaptığı yatırımın bir sonucu olarak, izleme sayfaları çok daha hızlı yükleniyor ve YouTube’un mobil web sitesi URL’lerinin %76’sı artık sahada Önemli Web Verileri ölçüm 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ü. Sitenin, özellikle YouTube video oynatıcısındaki etkileşim ve oluşturma performansı, JavaScript yürütmede eskisinden %75’e kadar daha az zaman harcandığını görüyor.
Geçen yıl YouTube web performansında yapılan iyileştirmeler, izlenme süresi ve günlük aktif kullanıcılar dahil olmak üzere iş ölçümlerini de iyileştirdi. Bu çabaların başarısına dayanarak, gelecekte optimize etmek için daha da fazla yol keşfetmeye devam etmeyi planlıyoruz.
Bu dizinin ikinci bölümü olan “Erişilebilir bir web oluşturma” bölümünde, YouTube’un web sitesini ekran okuyucu kullanıcıları için nasıl daha erişilebilir hale getirdiğini okuyacaksınız.
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 katkılarından dolayı özel teşekkürlerimle. bu iş.