Akıllı TV ve set üstü kutu cihazlarındaki Sonraki Boyamayla Etkileşimi (INP) iyileştirmek, sınırlı API desteğinin kısıtlamaları ve mütevazı sistem spesifikasyonları nedeniyle masaüstü tarayıcılardan çok daha fazla zorluk teşkil eder. Bu örnek olay incelemesinde, Disney+ Hotstar'ın bu engelleri nasıl başarıyla ele aldığını ve sonuç olarak işle ilgili önemli faydalar sağladığını öğreneceksiniz.
Oturma odası cihazlarının giderek daha fazla benimsenmesiyle birlikte Disney+ Hotstar, akıllı TV ve set üstü kutulara yönelik uygulamalarında sorunsuz bir göz atma deneyimi sunmanın kritik bir iş gereksinimi olduğunu fark etti. Ancak bu tür cihazlarda INP sorununu düzeltmeyi zorlaştıran şey, herhangi bir TV modelinin çok eski tarayıcı sürümlerini kullanmasıdır. Örneğin, 2020 yılında çıkan bir LG TV, 2018'de yayınlanan Chrome 68'i kullanır. Bu cihazlardan bazıları düşük teknolojili cihazlar olarak da sınıflandırılabilir. Diğer bir deyişle, etkileşimlere en önemli tablet ve dizüstü cihazlar kadar hızlı yanıt veremezler.
Aşağıdaki şekilde, bir sayfanın yüklenmesi için geçen süre karşılaştırılmaktadır. Chrome Geliştirici Araçları'nda CPU'su altı kat azaltılmış bir dizüstü bilgisayar ile akıllı TV arasında geçen süre karşılaştırılmaktadır. Görüldüğü gibi, dizüstü bilgisayar hâlâ yakın zamanda üretilmiş bir akıllı TV'den çok daha hızlıdır.
Bu testler laboratuvar verileri sağlarken, Disney+ Hotstar, web kritikleri kitaplığını kullanarak uygulamasının gerçek kullanıcılarından Next Paint ile Etkileşim (INP) için alan verileri toplamaya başladı ve uygulama kullanıcılarının% 75'inin alanda 675 milisaniye'lik bir INP deneyimi yaşadığını gözlemledi. Bu, INP eşiklerine göre "kötü" kullanıcı deneyimi olarak kabul edilir.
Bu örnek olay incelemesinde, Disney+ Hotstar'ın akış uygulamalarında, özellikle de düşük özellikli cihazlarda yanıt verme yeteneğini nasıl iyileştirdiği ele alınmaktadır. INP değerlerini 272 milisaniye'ye düşürerek % 61'lik bir iyileşme elde ettiler. Bu da hâlâ önerilen 200 milisaniyelik "iyi" eşiğin üzerinde, ancak bu konuda önemli bir iyileşme sağladı.
Bulgular
Disney+ Hotstar, uygulamayı web-vitals kitaplığının ilişkilendirme yapısındaki onINP yöntemini kullanarak donattı. İlk aşamada, özellikle hedef unsurun tam olarak belirlenmesinde çeşitli zorluklarla karşılaşıldı. Sorun, Disney+ Hotstar uygulamasındaki bazı özelleştirmelerle kullanılan üçüncü taraf bir uzamsal gezinme kitaplığı nedeniyle tüm referansların gövdeye işaret etmesi nedeniyle ortaya çıkmıştır. Bu kitaplık, yalnızca doküman gövdesindeki etkinlikleri dinler ve ardından, asıl odaklanılan öğeyi belirler ve uzaktan tuşlara basmalara dayanarak bir sonraki odağı tahmin eder.
Disney+ Hotstar, yüksek INP değerlerinden sorumlu etkileşimlerin düzgün şekilde belirlenebilmesi için öncelikle ilişkilendirme sorununu çözerek işe başladı. Bunun için Disney+ Hotstar, şu anda odaklanılan öğe için uzamsal gezinme kitaplığında zaten bulunan focusKey özelliğini ve sayfadaki tüm odaklanılabilir öğelerin haritasını kaydetti. Bu, web hayati verileri ilişkilendirme yapısında bulunan etkileşim hedefine benzer.
focusKey, onu tetikleyen öğenin yolu ile birlikte yakalanıyor.
Şimdi uygun ölçüm ve ilişkilendirme sayesinde, alan verilerinden elde edilen bulgular, aşağıdaki etkileşimlerin INP için en sorunlu etkileşimler olduğunu bildirmiştir:
- Yatay bant tepsisi gezinmesi.
- Dikey bant tepsisi gezinme.
- İlk sayfa yükleme sırasındaki etkileşimler.
Chrome Geliştirici Araçları'ndaki performans paneliyle bu etkileşimlerin profilini çıkardıktan sonra, uzamsal gezinme kitaplığının odaklanılabilir tüm öğelerin konumunu okuduğu anlaşıldı ve yeni bir ağaç oluşturuldu. Bu, her etkileşimde düzenin zorlanmasını tetikleyen pahalı bir işlemdir (ör. bir öğeden diğerine geçiş).
Ana sayfa için, üç boyutlu gezinme kitaplığı tarafından aşağıdaki gibi bir ağaç oluşturulmuştur:
Yani uygulamada 10 tepsi gösterilmişse ve her tepside 7 kart varsa gezinme öğeleri dahil olmak üzere tepsi kapsayıcısı için odaklanılabilir 70 öğe olacaktır. Bu, çok sayıda etkileşimli öğe olduğunu gösterir. Ayrıca, kapsayıcıyı çevirmek için yatay gezinme sırasında her kartın boyutlarını okuyan ve daha da fazla etkileşim gecikmesi ekleyen üçüncü taraf bant kitaplığı da kullanıldı.
Sorunları çözme
Uygulamanın genel olarak yanıt verme sorunlarını çözmek için birkaç farklı sorunun ayrı ayrı ele alınması gerekiyordu.
Yatay tepside gezinmeyle ilgili iyileştirmeler
Disney+ Hotstar, birleştirilmiş animasyonlar kullanarak ve boyutları kart başına bir kez yerine tepsi başına bir kez okuyarak düzen bozulmasını tetiklemeyen, kendi şirket içi bant kitaplığını oluşturdu.
Mekansal gezinme, yalnızca atlı karıncanın köküne odaklanır ve daha fazla yatay gezinme için özel bandımız devreye girer. Bu yaklaşım sayesinde Disney+ Hotstar, mekansal gezinmeye ve her gezinmede boyutları okuyan eski bant kitaplığına olan bağımlılığı ortadan kaldırdı.
Mekansal gezinme ağacı, söz konusu optimizasyonlardan sonra bu şekildeydi.
Aşağıdaki resimler, bant uygulamamızdan önce ve sonra Chrome Geliştirici Araçları'nın performans panelinde ölçülen bir performans karşılaştırmasıdır.
Bu çalışma sonucunda, Disney+ Hotstar sahadaki uygulamasının INP'sinde önemli bir düşüş gözlemledi. Ayrıca üçüncü taraf kitaplığını kaldırarak yaklaşık 35 KB (sıkıştırılmış) tasarruf etmeyi başardılar. Disney+ Hotstar, ek bir avantaj olarak, azalan uzamsal gezinme düğümleri nedeniyle düzenler daha az tetiklendiğinden, bu iyileştirmeler sayesinde Disney+ Hotstar'ın ana sayfa için toplam oluşturma süresini ölçmek üzere kullandığı özel metriğinin süresini de kısaltmaya başladı.
Dikey tepsi gezinmesiyle ilgili iyileştirmeler
Disney+ Hotstar ayrıca, tepsilerin tamamını öne yüklemek yerine geç yükleyerek dikey tepsi gezinme performansını iyileştirdi. Dolayısıyla uygulama, sayfa yüklendiğinde 10 tepsi örneği (her biri dahili olarak bir atlı karınca bileşeni ve bir dizi resim) yüklemek yerine, yalnızca görüntü alanında görünen iki tepsi ile birlikte üst ve alta bir ek tepsi yükler. Oluşturma işlemi, ana iş parçacığının kullanıcı etkileşimlerini ele almak için daha fazla fırsata sahip olması için setTimeout() getiri stratejisi kullanılarak birden fazla göreve bölündü.
İlk sayfa yükleme sırasındaki etkileşimler
INP, uygulama başlatma sırasında çok sayıda komut dosyası işleyen uygulamalarda yüksek olacaktır. Çünkü tarayıcının bu komut dosyalarını indirmesi, ayrıştırması ve değerlendirmesi gerekir. Tüm bunlar yaşanırken ana iş parçacığı uzun bir süre dolu kalır ve kullanıcı etkileşimlerine hızlı bir şekilde yanıt veremez.
Disney+ Hotstar, gelecekteki sayfaların daha hızlı yüklenmesini sağlamak için uygulamanın başlatılması sırasında (başlangıç ekranı süresi) aslında gerekenden daha fazla komut dosyası işlediğini fark etti. Bu durum, INP'yi olumsuz etkileme potansiyeline sahip ilave komut dosyası değerlendirme görevlerine de neden oluyordu.
Bu sorunu düzeltmek için Disney+ Hotstar, uygulama başlatılırken zaman kazanmak amacıyla öğelerin çoğunu dinamik olarak yüklemeyi düşündü. Ancak bu değişiklik yapıldığında JavaScript'in bundan sonra önceden yüklenmeyeceği için, bu yöntem gelecekteki sayfalara gitmeye yönelik yükleme sürelerinde artışa neden olacaktı. Disney+ Hotstar bu sorunun üstesinden gelmek için şirket içi bir öğe ön yükleyici kitaplığı geliştirdi. Bu kitaplık, kullanıcı yolculuğunda sırada hangi sayfanın gelebileceğini belirler ve bu sayfa için öğeleri önceden yükler. Örneğin:
- Bir kullanıcı giriş sayfasında olduğunda, öğe ön yükleyici kitaplığı profil seçimi sayfasındaki öğeleri önceden yükler.
- Profil seçimi sayfasında ana sayfa öğeleri yüklenir.
- Ana sayfada ayrıntılar sayfasının öğeleri yüklenir.
- Son olarak, izleme sayfasının öğeleri ayrıntılar sayfasına yüklenir.
Öğe yüklemesinin optimize edilmesi, Disney+ Hotstar'ın iki konuda iki konuda yardımcı oldu: uygulamanın INP değerini azaltması (çünkü ana iş parçacığı kullanıcı etkileşimlerini yürütmek için artık nispeten serbestti) ve ayrıca, düşük katmanlı cihazlarda bellek kullanımını azaltıyor.
Bu değişiklikler, aşağıdaki ekran görüntüsünde görülebildiği gibi, alandaki INP sayısında% 32'lik düşüşe neden oldu.
Diğer gelişmeler
Disney+ Hotstar ayrıca birkaç kullanıcı etkinliğinde sık sık ana iş parçacığına geri dönerek bölünebilecek uzun görevler olduğunu saptadı ve bir adım daha ileri giderek kullanıcıların görevleri yürütülürken iptal etmelerine olanak tanıyan bir görev oluşturma aracı oluşturdu.
Örneğin, kullanıcı tepsideki birden çok kartta gezinirken aşağıdakiler gerçekleşir:
- Bir sonraki karta odaklanılır.
- Gerekirse kart çevrilir.
- Gündem güncellendi.
- Varsa fragman getirilir ve oynatma başlatılır.
- İşlem için Analytics etkinlikleri tetiklenir.
Bu işlem sırasında kullanıcı bir sonraki karta odaklanırsa adımların geri kalanının uygulanmasına gerek kalmaz. Örneğin, kullanıcı bir sonraki karta geçerse belirli bir başlık için fragman getirme ve oynatıcı başlatma artık gerekli olmaz. Bu nedenle, ana iş parçacığını boşaltmak için bu görevler iptal edilebilir.
Disney+ Hotstar'ın görev oluşturma aracı yardımcı programı, görev olan bir işlevi kabul ediyor. Daha sonra başka bir görev ortaya çıktığında, bir önceki görev iptal ediliyor. Bu sayede, görevin gereksiz yere yürütülmesi ve gerekli işlemi hızla yapmamız gerekiyor.
Sonuçlar
Genel olarak, Disney+ Hotstar'ın uygulama INP'si 675 milisaniyeden 272 milisaniyeye düştü. Bu da neredeyse %60'lık bir iyileşme anlamına geliyor! Ayrıca, özellikle tepsi etkileşim gecikmeleri yaklaşık 400 milisaniyeden yaklaşık 100 milisaniyeye düştü.
İşe etkisi: Haftalık kart görüntüleme sayısı, kullanıcı başına 111'den 226'ya yükseldi. Bu% 100'lük bir artış, daha hızlı ve duyarlı bir arayüzün kullanıcıların daha uzun süre etkileşim sağlama olasılığının daha yüksek olduğunu gösteriyor.
Bu daha başlangıç. Disney+ Hotstar, rehber olarak INP metriğini kullanarak oluşturma ve etkileşim performansını iyileştirme konusunda büyük bir başarı yakaladı. Disney+ Hotstar'ın ekibi, yakın gelecekte müşterileri için Disney+ Hotstar'ı çok sorunsuz bir deneyim haline getirmek için sabırsızlanıyor.
Disney+ Hotstar'dan Ayush, Ajay, Kiran, Milan ve Richa'ya, durumu alt etme çabaları için teşekkür ederiz.
Bu yenilik çalışmalarına destek veren Ankeet Maini, Disney+ Hotstar Mühendislik Bölümü Başkanı ve Disney+ Hotstar Müşteri Deneyimi Müdürü Rahul Krishnan P'ye ve bu örnek olayı inceleyip yayınlama konusunda yardımcı olduğu için Google'dan Jeremy Wagner, Gilberto, Barry Pollard ve Brendan Kenny'ye özel teşekkürler.