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.
![Dizüstü bilgisayarda Disney+ HotStar uygulamasının yükleme performansının profilini oluşturan Chrome Geliştirici Araçları'ndaki performans profili aracının ekran görüntüsü. 1,39 saniyede PAGE_RENDER_TIME adlı bir özel metrik gösterilir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-1.png?authuser=5&hl=tr)
![Gerçek bir akıllı TV cihazında Disney+ HotStar uygulamasının yükleme performansının profilini oluşturan Chrome Geliştirici Araçları'ndaki performans profili aracının ekran görüntüsü. PAGE_RENDER_TIME adlı bir özel metrik 6,47 saniyede gelir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-2.png?authuser=5&hl=tr)
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.
![OdaklanmaKey özelliklerine göre, her birinin etkileşim gecikmesiyle birlikte öğe listesinin ekran görüntüsü.](https://web.dev/static/case-studies/hotstar-inp/image/fig-3.png?authuser=5&hl=tr)
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.
![Odak tuşunun tepsi bandında gezinmesinden sorumlu öğenin ekran görüntüsü.](https://web.dev/static/case-studies/hotstar-inp/image/fig-4.png?authuser=5&hl=tr)
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:
![Mekansal gezinme kitaplığı tarafından oluşturulan örnek ağaç. Kökün altında Gezinme Çubuğu ve Tepsi Kapsayıcısı düğümleri bulunur. Özellikle, Tepsi Kapsayıcısı düğümünde üç kart düğümü bulunur. Bunların her biri, büyük bir DOM boyutuna katkıda bulunan çok sayıda alt düğüme sahiptir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-5.png?authuser=5&hl=tr)
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.
![Mekansal gezinme kitaplığı tarafından oluşturulan, önceki sürüme göre önemli ölçüde optimize edilmiş ve çok daha az düğüm içeren optimize edilmiş ağaç örneği.](https://web.dev/static/case-studies/hotstar-inp/image/fig-6.png?authuser=5&hl=tr)
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.
![Chrome Geliştirici Araçları'nda, üçüncü taraf bandının başlattığı görevlerle ilgili performans panelinin ekran görüntüsü. Etkileşimi geciktiren çok sayıda uzun görev var.](https://web.dev/static/case-studies/hotstar-inp/image/fig-7.png?authuser=5&hl=tr)
![Şirket içi atlı karıncanın başlattığı görevlerle ilgili olarak Chrome Geliştirici Araçları'ndaki performans panelinin ekran görüntüsü. Üçüncü taraf bandına kıyasla çok daha az uzun görev var, bu da etkileşimlerin daha hızlı gerçekleşmesini sağlıyor.](https://web.dev/static/case-studies/hotstar-inp/image/fig-8.png?authuser=5&hl=tr)
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ı.
![Hem tizentv hem de webos için sayfa oluşturma süresi özel metriğine ait bir zaman serisi, 13 Mart - 19 Mart zaman aralığı itibarıyla sırasıyla hem% 31, hem de% 25,2 oranında azaldı.](https://web.dev/static/case-studies/hotstar-inp/image/fig-9.png?authuser=5&hl=tr)
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ü.
![Etkinlik işleyicileri çalıştırma ve güncellemeleri oluşturma ile ilgili görevlerin stilize edilmiş görselleştirmesi. Oluşturma güncellemeleri tek bir uzun görevden sonra ertelenir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-10.png?authuser=5&hl=tr)
![Önceki şekilde aynı etkinliğin başka bir görselleştirmesi var ancak görevler, sonuç verme nedeniyle bölünerek oluşturma işleminin daha erken gerçekleşmesini sağlıyor.](https://web.dev/static/case-studies/hotstar-inp/image/fig-11.png?authuser=5&hl=tr)
İ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.
![13 Ağustos ile 11 Eylül arasında başlayan INP değerleri zaman serisi. Bu dönem boyunca INP'de% 32 azalma gösterilmiştir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-12.png?authuser=5&hl=tr)
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ü.
![Bir zaman serisi INP değeri 23 Ağustos ile 21 Eylül arasında başlar. Bu zaman aralığında INP'de% 61 azalma görülmüştür.](https://web.dev/static/case-studies/hotstar-inp/image/fig-13.png?authuser=5&hl=tr)
İş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.
![Hem tizentv hem de webos için Disney+ HotStar uygulamasındaki haftalık kart görüntülemelerinde% 100 artışı gösteren bir zaman serisinin ekran görüntüsü. 4 Nisan 2004 tarihinden sonra bu artış çok belirgindir.](https://web.dev/static/case-studies/hotstar-inp/image/fig-14.png?authuser=5&hl=tr)
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.