שיפור האינטראקציה עם התכונה 'הצבע הבא' (INP) בטלוויזיה חכמה ובממירים מהווה אתגר משמעותי יותר מאשר בדפדפנים במחשב, בגלל האילוצים של תמיכת API מוגבלת ומפרטי מערכת צנועים. במקרה לדוגמה הזה, תראו כיצד Disney+ Hotstar התמודדה בהצלחה עם מכשולים אלו וכתוצאה מכך השיגה יתרונות עסקיים משמעותיים.
בעקבות השימוש הגובר במכשירים לשימוש בסלון, Disney+ Hotstar זיהתה שחוויית גלישה חלקה באפליקציה שלה עבור טלוויזיות חכמות וממירים היא דרישה עסקית חיונית. עם זאת, מה מקשה על תיקון INP במכשירים כאלה הוא שכל דגם טלוויזיה מסוים עשוי להשתמש בגרסאות דפדפן ישנות מאוד — לדוגמה, בטלוויזיות LG TV 2020 נעשה שימוש ב-Chrome 68 שהושק בשנת 2018. חלק מהמכשירים האלה מסווגים גם כמכשירים פשוטים. כלומר, הם לא יכולים להגיב לאינטראקציות באותה מהירות כמו טאבלטים ומחשבים ניידים.
בתרשים הבא מוצגת השוואה בין משך הזמן שנדרש לטעינת דף, כאשר המחשב נייד והמעבד (CPU) שלו איטיים פי 6 לאחר הפעלתם בכלי הפיתוח של Chrome לעומת טלוויזיה חכמה. כפי שאפשר לראות, המחשב הנייד עדיין מהיר הרבה יותר מאשר טלוויזיה חכמה שיוצרת לאחרונה.
למרות שהבדיקות האלה הניבו נתוני מעבדה, Disney+ Hotstar התחילה לאסוף נתוני שטח עבור Interaction to Next Paint (INP) של משתמשי האפליקציה בפועל באמצעות ספריית אתרי האינטרנט. אצל 75% ממשתמשי האפליקציה נהנו מ-INP של 675 אלפיות שנייה בשדה, שנחשב לחוויית משתמש 'חלשה' לפי ספי ה-INP.
מקרה לדוגמה שמראה איך Disney+ Hotstar שיפרה את הרספונסיביות באפליקציות הסטרימינג שלה, במיוחד במכשירים המתקדמים. הם השיגו שיפור של 61% לאחר שערכי ה-INP ירדו ל-272 אלפיות השנייה – עדיין מעל לסף ה'טוב' המומלץ של 200 אלפיות השנייה, אבל שיפור משמעותי בכך.
הממצאים
Disney+ Hotstar ביצעה הטמעה באפליקציה באמצעות ה-method onINP מגרסת השיוך (Attribution) של ספריית אתרי האינטרנט. במהלך השלב הראשוני נתקלנו באתגרים שונים, במיוחד בזיהוי רכיב היעד המדויק. הבעיה התעוררה כי כל ההתייחסויות לגוף ההודעה נבעו מספריית ניווט מרחבי של צד שלישי, שנעשה בה שימוש עם התאמות מסוימות באפליקציית Disney+ Hotstar. הספרייה הזו מאזינה אך ורק לאירועים בגוף המסמך, ולאחר מכן קובעת איזה רכיב ממוקד בפועל וחוזה את המיקוד הבא על סמך לחיצות מרחוק על מקשים.
ב-Disney+ Hotstar בשלב הראשון פתרו את בעיית השיוך כדי שאפשר יהיה לזהות כראוי אינטראקציות שאחראיות לערכי INP גבוהים. לשם כך, Disney+ Hotstar תיעד את המאפיין focusKey שכבר קיים בספריית הניווט המרחבי של הרכיב הנוכחי שנמצא כעת, וכן מפה של כל הרכיבים בדף שניתן להתמקד בהם. הערכים האלה דומים ליעד האינטראקציה הזמין בגרסת ה-build של שיוך אירועי אינטרנט.
focusKey, עם הנתיב אל הרכיב שמפעיל אותו.
עכשיו, לאחר יישום מדידה ושיוך מתאימים, הממצאים שמתקבלים מנתוני השדות דיווחו על האינטראקציות הבאות כבעייתיות ביותר עבור INP:
- ניווט אופקי במגש קרוסלה.
- ניווט במגש קרוסלה אנכי.
- אינטראקציות במהלך הטעינה הראשונית של הדף.
אחרי שחילקנו את האינטראקציות עם חלונית הביצועים בכלי הפיתוח של Chrome, גילינו שספריית הניווט המרחבית קוראת את המיקום של כל הרכיבים שניתן להתמקד בהם ובנתה עץ חדש. זו פעולה יקרה שמפעילה ריצת פריסה בכל אינטראקציה, למשל מעבר מרכיב אחד לאחר.
בדף הבית, יצרנו עץ על ידי ספריית הניווט המרחבי באופן הבא:
כלומר, אם האפליקציה הציגה 10 מגשים, ובכל מגש היו 7 כרטיסים, היו 70 אלמנטים שניתן להתמקד בהם במאגר המגש, כולל פריטי ניווט. זהו מספר רב של רכיבים אינטראקטיביים. נעשה שימוש גם בספריית קרוסלה של צד שלישי, שקוראת את המאפיינים של כל כרטיס במהלך ניווט אופקי לתרגום מאגר התגים, ומוסיפה עוד יותר זמן אחזור בעקבות אינטראקציות.
פתרון הבעיות
היו כמה בעיות שונות שהיה צריך לטפל בכולן בנפרד כדי לפתור את בעיות התגובה של האפליקציה באופן כללי.
שיפורים בניווט במגש האופקי
ב-Disney+ Hotstar פיתחו ספריית קרוסלה פנימית משלהם, שלא מפעילה איחוד פריסות על ידי שימוש באנימציות מורכבות וקריאת המימדים פעם אחת לכל מגש, במקום פעם אחת לכל כרטיס.
הניווט המרחבי מתמקד רק בשורש של הקרוסלה, ובהמשך הניווט האופקי, הקרוסלה בהתאמה אישית נכנסת לתמונה. באמצעות הגישה הזו, Disney+ Hotstar ביטלה את התלות בניווט מרחבי ובספריית הקרוסלה הישנה שקראה את המאפיינים בכל ניווט.
כך נראה עץ הניווט המרחבי לאחר האופטימיזציות האלה.
התמונות הבאות הן השוואת ביצועים שנמדדת בחלונית הביצועים של כלי הפיתוח ל-Chrome לפני ואחרי ההטמעה של הקרוסלה.
כתוצאה מהעבודה הזו, ב-Disney+ Hotstar נרשמה ירידה משמעותית במדד ה-INP של האפליקציה בשדה. הם גם הצליחו לחסוך כ-35KB (דחוס) על ידי הסרת הספרייה של הצד השלישי. כבונוס, השיפורים האלה גם אפשרו ל-Disney+ Hotstar לקצר את משך הזמן של המדד המותאם אישית שבו הם משתמשים כדי למדוד את זמן הרינדור הכולל של דף הבית, מכיוון שפריסות מופעלות פחות פעמים בגלל צמצום של צמתים של ניווט מרחבי.
שיפורים בניווט במגש אנכי
Disney+ Hotstar גם שיפרה את ביצועי הניווט במגשים האנכיים על ידי טעינה מדורגת של המגשים במקום טעינה של כולם מראש. לכן, בטעינת הדף, במקום לטעון 10 מופעים של המגש, שבתוך כל אחד מהם יש רכיב קרוסלה ומספר תמונות – האפליקציה טוענת רק את שני המגשים שגלויים באזור התצוגה, וגם מגש נוסף מעל ומתחת. בנוסף, העיבוד פוצל לכמה משימות באמצעות שיטת התפוקה setTimeout(), כך של-thread הראשי יש יותר הזדמנויות לטפל באינטראקציות של משתמשים.
אינטראקציות במהלך הטעינה הראשונית של הדף
ערך INP יהיה גבוה לאפליקציות שמעבדות מספר עצום של סקריפטים במהלך השקת האפליקציה. הסיבה לכך היא שהדפדפן צריך להוריד, לנתח ולהעריך את הסקריפטים האלה. בזמן שכל זה קורה, ה-thread הראשי יישאר תפוס למשך זמן רב יחסית, ולא תהיה לו אפשרות להגיב במהירות לאינטראקציות של המשתמשים.
ב-Disney+ Hotstar הבינו שהם מעבדים יותר סקריפטים ממה שהם היו נחוצים בפועל במהלך הפעלת האפליקציה (זמן מסך הפתיחה) כדי להאיץ את טעינת הדפים בעתיד. כתוצאה מכך נצברו עוד משימות להערכת הסקריפטים, ולפעמים עלולה להיות לכך השפעה שלילית על INP.
כדי לפתור את הבעיה, ב-Disney+ Hotstar החליטו לטעון באופן דינמי את רוב הנכסים, כדי לחסוך זמן במהלך ההפעלה של האפליקציה. עם זאת, פעולה זו תגרום לזמני טעינה ארוכים יותר של ניווטים לדפים עתידיים, מאחר ש-JavaScript זה לא ייטען עוד מראש עם שינוי זה. כדי לפתור את הבעיה, Disney+ Hotstar פיתחה ספרייה פנימית לטעינה מראש של נכסים שקובעת איזה דף עשוי להופיע בתהליך שעובר המשתמש, ותטען מראש את הנכסים בדף הזה. למשל:
- כשמשתמש נמצא בדף ההתחברות, הספרייה של הכלי לטעינת נכסים תטען מראש נכסים דיגיטליים של דף בחירת הפרופיל.
- בדף בחירת הפרופיל, הנכסים של דף הבית נטענים.
- בדף הבית, הנכסים של דף הפרטים נטענים.
- לבסוף, הנכסים של דף הצפייה נטענים בדף הפרטים.
אופטימיזציה של טעינת הנכסים עזרה ל-Disney+ Hotstar בשני דברים: להפחית את ה-INP של האפליקציה (מכיוון שה-thread הראשי היה עכשיו פנוי יחסית לביצוע אינטראקציות של משתמשים), וגם להפחית את השימוש בזיכרון במכשירים ברמה נמוכה.
השינויים האלה הובילו לירידה של 32% במספר ה-INP המדווח מהשדה, כפי שניתן לראות בצילום המסך הבא.
שיפורים אחרים
ב-Disney+ Hotstar גם הבינו שיש משימות ארוכות על מספר אירועי משתמשים שאפשר לפצל על ידי פנייה ל-thread הראשי לעיתים קרובות, והתקדמו צעד אחד קדימה ויצרו כלי למחולל משימות שיאפשר למשתמשים לבטל את המשימה באמצע הביצוע.
לדוגמה, כשמשתמש מנווט בין כמה כרטיסים במגש, זה מה שקורה:
- מתמקדים בכרטיס הבא.
- אם צריך לתרגם את הכרטיס, הוא צריך לעבור תרגום.
- Spotlight עודכן.
- הטריילר, אם קיים, מאוחזר וההפעלה מתחילה.
- אירועי Analytics מופעלים עבור הפעולה.
אם בתהליך הזה המשתמשים מתמקדים בכרטיס הבא, אין צורך לבצע את שאר השלבים. לדוגמה, לא יהיה צורך באחזור טריילר ובאתחול הנגן של כותר מסוים אם המשתמש עבר לכרטיס הבא. לכן אפשר לבטל את המשימות האלה כדי לפנות את ה-thread הראשי.
כלי מחולל המשימות של Disney+ Hotstar מקבל פונקציה שהיא משימה, וכשמשימה אחרת מגיעה באמצע, המשימה הקודמת מתבטלת ונחסכת לנו ביצוע בלתי רצוי של המשימה ומפעילה במהירות את המשימה הנדרשת.
תוצאות
באופן כללי, אפליקציית INP של Disney+ Hotstar צנחה מ-675 אלפיות השנייה ל-272 אלפיות השנייה, מה שמייצג שיפור של כמעט 60%! בנוסף, זמן האחזור של אינטראקציות במגש ירד באופן ספציפי מ-400 אלפיות השנייה לכ-100 אלפיות השנייה.
ההשפעה על העסק: מספר הצפיות השבועיות בכרטיסים גדל מ-111 ל-226 למשתמש! מדובר בעלייה של 100%, שמראה שממשק מהיר ורספונסיבי יותר ישפר את מעורבות המשתמשים למשך פרקי זמן ארוכים יותר.
זו רק ההתחלה, ו-Disney+ Hotstar היא השיטה שבה מתבססים על מדד INP כדי לשפר את ביצועי הרינדור והאינטראקציה. הצוות ישמח להפוך את Disney+ Hotstar לחוויה חלקה עבור הלקוחות שלה בעתיד הקרוב.
תודה לאיוש, אג'יי, קיראן, מילאנו ורישה מ-Disney+ Hotstar על מאמציהם להמיר את הגאות.
תודה מיוחדת לאנקיט מיין (Ankeet Mini), מנהל ההנדסה של Disney+ Hotstar, ו-Rahul Krishan P (מנהל חוויית הלקוח של Disney+ Hotstar) לצורך תמיכה בפעילות החדשנות הזו, וג'רמי וגנר (Gilberto), בארי פולרד (Barry Pollard) וברנדן קני (Brendan Kanny) מ-Google על הביקורת והעזרה בפרסום המקרה לדוגמה.