שיפור מהירות התגובה לאינטראקציה באתר (INP) בטלוויזיות חכמות ובמכשירי ממיר דיגיטלי (STB) הוא אתגר גדול יותר מאשר בדפדפנים למחשב, בגלל המגבלות של תמיכה מוגבלת ב-API ומפרטי מערכת צנועים. במקרה לדוגמה הזה נסביר איך Disney+ Hotstar הצליחה להתגבר על המכשולים האלה, וכתוצאה מכך נהנתה מהטבות עסקיות משמעותיות.
בעקבות העלייה בשימוש במכשירים בסלון, ב-Disney+ Hotstar הבינו שחשוב מאוד לספק חוויית גלישה חלקה באפליקציה שלהם לטלוויזיות חכמות ולקופסאות סטרימינג. עם זאת, קשה יותר לתקן את INP במכשירים כאלה כי בכל דגם טלוויזיה נתון עשויות לפעול גרסאות דפדפן ישנות מאוד. לדוגמה, ב-LG TV מ-2020 פועלת גרסה 68 של Chrome שיצאה בשנת 2018. חלק מהמכשירים האלה יכולים להיכלל גם בקטגוריה של מכשירים ברמה נמוכה, כלומר הם לא יכולים להגיב לאינטראקציות במהירות כמו טאבלטים ומחשבים ניידים מובילים.
בתרשים הבא מוצגת השוואה בין משך הזמן הנדרש לטעינה של דף במחשב נייד שבו מעבד ה-CPU הושבת פי שישה באמצעות כלי הפיתוח ל-Chrome, לבין טלוויזיה חכמה. כפי שניתן לראות, המחשב הנייד עדיין מהיר בהרבה מטלוויזיה חכמה שיוצרו לאחרונה.
הבדיקות האלה מניבות נתונים מעבדה, אבל ב-Disney+ Hotstar התחילו לאסוף נתוני שטח של אינטראקציה לציור הבא (INP) ממשתמשים אמיתיים באפליקציה באמצעות ספריית Web Vitals, וראו ש-75% ממשתמשי האפליקציה חוו INP של 675 אלפיות השנייה בשטח, שנחשב לחוויית משתמש 'חלשה' לפי ערכי הסף של INP.
בניתוח המקרה הזה נסביר איך Disney+ Hotstar שיפרה את המהירות בתגובה באפליקציות הסטרימינג שלה, במיוחד במכשירים ברמה נמוכה. הם השיגו שיפור של 61% על ידי הפחתת ערכי ה-INP ל-272 אלפיות השנייה – עדיין מעל הסף המומלץ של 200 אלפיות השנייה, אבל שיפור משמעותי בדרך לשם.
הממצאים
צוות Disney+ Hotstar הוסיף לאפליקציה את הכלי באמצעות השיטה onINP מגרסת build השיוך של ספריית web-vitals. בשלב הראשוני נתקלו באתגרים שונים, במיוחד בזיהוי רכיב היעד המדויק. הבעיה נגרמה כי כל ההפניות הצביעו על הגוף בגלל ספריית ניווט מרחבי של צד שלישי, שבה נעשה שימוש עם התאמות אישיות מסוימות באפליקציית Disney+ Hotstar. הספרייה הזו מקשיבה רק לאירועים בגוף המסמך, ולאחר מכן קובעת את הרכיב בפועל שמקבל את המיקוד ומנבאת את המיקוד הבא על סמך הקשות על מקשים מרחוק.
הצוות של Disney+ Hotstar התחיל בפתרון הבעיה בשיוך כדי שאפשר יהיה לזהות כראוי את האינטראקציות שמשפיעות על ערכי INP גבוהים. לשם כך, ב-Disney+ Hotstar רשמו ביומן את המאפיין focusKey שכבר קיים בספריית הניווט המרחבי של הרכיב שבו מופעל המיקוד כרגע, וגם מפה של כל הרכיבים בדף שאפשר להתמקד בהם. המפה הזו דומה ליעד האינטראקציה שזמין ב-build השיוך של מדדי ה-Web Vitals.
focusKey, יחד עם הנתיב לאלמנט שמפעיל אותו.
עכשיו, כשהמדידה והשיוך מתבצעים בצורה מתאימה, הממצאים מנתוני השדה הצביעו על האינטראקציות הבאות כבעייתיות ביותר ל-INP:
- ניווט בערימה אופקית של קרוסלה.
- ניווט בחלונית הקרוסלה האנכית.
- אינטראקציות במהלך טעינת הדף הראשונית.
לאחר יצירת פרופיל של האינטראקציות האלה באמצעות חלונית הביצועים בכלי הפיתוח של Chrome, הבנו שספריית הניווט המרחבי קוראת את המיקום של כל הרכיבים שאפשר להתמקד בהם ובונה עץ חדש. זו פעולה יקרה שמפעילה רעידת פריסה בכל אינטראקציה, למשל מעבר מרכיב אחד לרכיב אחר.
בדף הבית, ספריית הניווט המרחבי יצרה עץ באופן הבא:
כלומר, אם באפליקציה מוצגים 10 מגשיים, ובכל מגש יש 7 כרטיסים, יהיו 70 רכיבים שאפשר להתמקד בהם במאגר המגשים, כולל פריטי הניווט. זהו מספר גבוה של רכיבים אינטראקטיביים. בנוסף, השתמשו בספריית קרוסלה של צד שלישי, שקוראת את המאפיינים של כל כרטיס במהלך ניווט אופקי כדי לתרגם את המאגר, וכך הוסיפה עוד זמן אחזור לאינטראקציה.
פתרון הבעיות
היו כמה בעיות שונות שצריך לטפל בהן בנפרד כדי לפתור את בעיות התגובה של האפליקציה כולה.
שיפורים בניווט בערימה האופקית
ב-Disney+ Hotstar יצרו ספריית קרוסלה משלהם, שלא גורמת ל-layout thrashing באמצעות שימוש באנימציות מורכבות וקריאת המאפיינים פעם אחת לכל מגש, במקום פעם אחת לכל כרטיס.
הניווט המרחבי מתמקד רק ברמה הבסיסית של הקרוסלה, ולניווט אופקי נוסף נכנסת לתמונה הקרוסלה בהתאמה אישית. בעזרת הגישה הזו, ב-Disney+ Hotstar הסירו את התלות בניווט המרחבי ובספריית הקרוסלה הישנה, שקראת את המאפיינים בכל ניווט.
כך נראה עץ הניווט המרחבי אחרי ביצוע פעולות האופטימיזציה האלה.
התמונות הבאות הן השוואה של הביצועים שנמדדו בלוח הביצועים של Chrome DevTools לפני ואחרי הטמעת הקרוסלה.
כתוצאה מהעבודה הזו, ב-Disney+ Hotstar ראו ירידה משמעותית ב-INP של האפליקציה בשטח. בנוסף, הם הצליחו לחסוך כ-35KB (דחוס) על ידי הסרת הספרייה של הצד השלישי. כתוצאה מהשיפורים האלה, ב-Disney+ Hotstar הצליחו גם לקצר את משך הזמן של המדד המותאם אישית שבו הם משתמשים כדי למדוד את זמן הרינדור הכולל של דף הבית, כי הפריסות מופעלות בתדירות נמוכה יותר עקב צמצום של צמתים של ניווט מרחבי.
שיפורים בניווט בחלונית האנכית
ב-Disney+ Hotstar גם שיפרו את הביצועים של הניווט במדף האנכי על ידי טעינה איטית של המדפים במקום לטעון את כולם מראש. לכן, בזמן טעינת הדף, במקום לטעון 10 מופעים של המגש – שבכל אחד מהם יש רכיב קרוסלה וקבוצה של תמונות – האפליקציה טוענת רק את שני המגשים שגלויים בחלון התצוגה, ועוד מגש אחד מעל ומטה. בנוסף, הטרנספורמציה (העיבוד) התחלקה לכמה משימות באמצעות אסטרטגיית ההענקה (yielding) setTimeout(), כדי שלליבה יהיו יותר הזדמנויות לטפל באינטראקציות של המשתמשים.
אינטראקציות במהלך טעינת הדף הראשונית
הערך של INP יהיה גבוה באפליקציות שמעבדות מספר עצום של סקריפטים במהלך ההפעלה של האפליקציה. הסיבה לכך היא שהדפדפן צריך להוריד, לנתח ולהעריך את הסקריפטים האלה. בזמן שהפעולות האלה מתבצעות, ייתכן שהשרשור הראשי יהיה עסוק במשך זמן רב ולא יוכל להגיב במהירות לאינטראקציות של משתמשים.
ב-Disney+ Hotstar הבינו שהם מעבדים יותר סקריפטים ממה שנחוץ בפועל במהלך הפעלת האפליקציה (בזמן המסך הפותח) כדי לזרז את טעינת הדפים בעתיד. כתוצאה מכך, נוצרו משימות נוספות של הערכת סקריפט, שגם הן עלולות להשפיע לרעה על INP.
כדי לפתור את הבעיה, הצוות של Disney+ Hotstar שקל לטעון באופן דינמי את רוב הנכסים, כדי לחסוך זמן במהלך הפעלת האפליקציה. עם זאת, הפעולה הזו הייתה מאריכה את זמני הטעינה של ניווט לדפים עתידיים, כי הקוד של JavaScript לא ייטען מראש בעקבות השינוי הזה. כדי להתמודד עם הבעיה הזו, צוות Disney+ Hotstar פיתח ספרייה פנימית של טעינת נכסים מראש, שמאפשרת לקבוע איזה דף עשוי להופיע בשלב הבא בתהליך השימוש של המשתמש, ולטעון מראש נכסים לדף הזה. לדוגמה:
- כשמשתמש נמצא בדף ההתחברות, ספריית הנכסים הדיגיטליים שהוטענו מראש טעינה מראש את הנכסים לדף בחירת הפרופיל.
- בדף בחירת הפרופיל, הנכסים של דף הבית נטענים.
- בדף הבית נטענים הנכסים של דף הפרטים.
- לבסוף, הנכסים של דף הצפייה נטענים בדף הפרטים.
אופטימיזציה של טעינת הנכסים עזרה ל-Disney+ Hotstar בשני דברים: צמצום ה-INP של האפליקציה (כי כעת לשרשור הראשי יש זמן פנוי יחסית לביצוע אינטראקציות של משתמשים), וגם צמצום השימוש בזיכרון במכשירים ברמה נמוכה.
השינויים האלה הובילו לירידה של 32% במספר ה-INP שדווח מהשדה, כפי שאפשר לראות בצילום המסך הבא.
שיפורים אחרים
ב-Disney+ Hotstar גם גילו שיש משימות ארוכות בכמה אירועי משתמשים שאפשר לפצל על ידי החזרת השליטה לשרשור הראשי לעיתים קרובות. הם גם הרחיבו את הפעולה הזו ויצרו כלי ליצירת משימות שיאפשר למשתמשים לבטל את המשימה באמצע הביצוע שלה.
לדוגמה, כשהמשתמש מנווט בין כמה כרטיסים במגש, מתרחשים האירועים הבאים:
- המיקוד עובר לכרטיס הבא.
- הכרטיס מתורגם אם יש צורך בכך.
- התכונה 'התמקדות במישהו אחד' מתעדכנת.
- המערכת מאחזרת את הטריילר (אם יש כזה) ומפעילה את ההפעלה.
- אירועים של Analytics מופעלים עבור הפעולה.
אם במהלך התהליך המשתמש מתמקד בכרטיס הבא, לא יהיה צורך לבצע את שאר השלבים. לדוגמה, אם המשתמש עבר לכרטיס הבא, לא תהיה יותר צורך באחזור טריילר ובאיפוס הנגן של כותר מסוים. לכן, אפשר לבטל את המשימות האלה כדי לפנות את השרשור הראשי.
הכלי ליצירת משימות של Disney+ Hotstar מקבל פונקציה שהיא משימה, וכאשר נכנסת משימה אחרת באמצע, המשימה הקודמת מבוטלת. כך אנחנו חוסכים ביצוע משימות מיותרות ומבצעים במהירות את המשימה הנדרשת.
תוצאות
באופן כללי, זמן ה-INP של אפליקציית Disney+ Hotstar ירד מ-675 אלפיות השנייה ל-272 אלפיות השנייה, שיפור של כמעט 60%! בנוסף, זמני האחזור של האינטראקציה עם התיבה ספציפית ירדו מ-400 אלפיות השנייה ל-100 אלפיות השנייה.
ההשפעה על העסק: מספר הצפיות השבועיות בכרטיסים עלה מ-111 ל-226 לכל משתמש. זו עלייה של 100%, שממחישה שסביר יותר שממשק מהיר יותר ותגובה מהירה יותר יעוררו עניין בקרב משתמשים למשך תקופות זמן ארוכות יותר.
זה רק ההתחלה, ו-Disney+ Hotstar רק התחילה לשפר את הביצועים של העיבוד והאינטראקציה בעזרת מדד INP. הצוות שלהם שמח להפוך את Disney+ Hotstar לחוויה חלקה ללקוחות בעתיד הקרוב.
תודה ל-Ayush, Ajay, Kiran, Milan ו-Richa מ-Disney+ Hotstar על המאמצים שלהם לשנות את המצב.
תודה מיוחדת ל-Ankeet Maini, מנהל ההנדסה של Disney+ Hotstar, ול-Rahul Krishnan P, מנהל חוויית הלקוח של Disney+ Hotstar, על התמיכה בפרויקט החדשנות הזה, ול-Jeremy Wagner, Gilberto, Barry Pollard ו-Brendan Kenny מ-Google על הבדיקה ועל העזרה בפרסום של מחקר המקרה הזה.