Ele.me היא החברה הגדולה ביותר בסין לביצוע הזמנות ומשלוחים ממסעדות. השירות משרת 260 מיליון משתמשים רשומים מיותר מ-200 ערים ברחבי סין, ויש לו יותר מ-1.3 מיליון רשימות של מסעדות. 99% מהמשתמשים ב-Ele.me מזמינים אוכל מהנייד, והחלו לשפר את חוויית השימוש באינטרנט לנייד כדי לשפר את המהירות והאמינות שלה בחיבורים רעועים. זאת תוך הסתמכות על המודל הטכני הבסיסי של אפליקציה מרובת-דפים כדי לענות על הצרכים התפעוליים שלה.
- זמן הטעינה ירד ב-11.6% בכל הדפים שנשמרו מראש
- זמן הטעינה ירד ב-6.35% בממוצע בכל הדפים.
- זמן הפעילות האינטראקטיבית ירד ל-4.93 שניות ברשת 3G בטעינה הראשונה
אחרי שהשקנו את ele.me PWA, זמני הטעינה צנחו משמעותית וחוויית השימוש באינטרנט לנייד הפכה לאחד מהאתרים המהירים ביותר להזמנת אוכל בסין.
ספנסר יאנג, מנהל מוצר של Ele.me PWA
בחירה בין אפליקציה עם כמה דפים לאפליקציה בדף יחיד
באפליקציה מרובת דפים (MPA), כל נתיב שהמשתמש מנווט אליו מפעיל בקשה מלאה לדף, יחד עם הסקריפטים והסגנונות הנדרשים המשויכים לשרת. זאת בניגוד למודל של אפליקציה בדף יחיד (SPA), שבו כל ניווט במסלול מפעיל אחזור רק של התוכן והנתונים הרלוונטיים למסלול הזה. לאחר מכן ממשק המשתמש נוצר באמצעות קוד JavaScript שפועל באפליקציית הלקוח.
הצמיחה הנרחבת של Ele.me בשנים האחרונות הובילה לצמיחה של יחידות עסקיות נפרדות בתוך החברה, שכל אחת מהן מנהלת את המיקרו-שירות (micro-service) שלה תחת הדומיין הראשי https://ele.me. הצוות של Ele.me הסיק שפיצול השירותים האלה מומלץ באמצעות מודל של אפליקציות עם מספר דפים (MPA), שבו כל צוות פועל ושומר על שירות משלו.
החלת PRPL על MPA
דפוס ה-PRPL (משאבים קריטיים של טעינה מראש, המסלול הראשוני לעיבוד, המסלולים שנותרו במטמון מראש וטעינה מדורגת במסלולים שנותרו) מספק למפתחי אתרים קבוצה של מסילות כדי להנחות את המבנה של PWA, בדגש מסוים על זמן מהיר לפעילות הדדית ומיקסום השמירה במטמון כדי לצמצם את הנסיעות הלוך ושוב ברשת. למרות ש-PRPL נבדק היטב לגבי SPA, היה פחות ברור איך מחילים אותם בפועל על MPA. Ele.me החליטה לאמץ את הגישה של ה-PRPL בזמן שהם חשבו על יצירה מחדש של ה-MPA בתור PWA. לשם כך, הם מוודאים שכאשר משתמשים מנווטים לדף, הם טוענים מראש משאבים קריטיים של הדף הזה על ידי הכללת <link rel="preload"> לפי הצורך, או שהם מציגים את הסקריפטים האלה ברמה נמוכה מספיק כדי שהטוען מראש של הדפדפן יוכל לבצע את העבודה
בלי צורך ברמזים נוספים. הם גם משפרים בהדרגה את ה-PWA על ידי התקנה של קובץ שירות (service worker) בכל פעם שהוא נתמך על ידי הדפדפן, ולהשתמש בו כדי לאחזר ולשמור מראש את מסלולי הניווט ברמה העליונה, כדי שהמשתמשים ייהנו מחוויית טעינה ורינדור מהירות יותר כשהם לוחצים על
ה-PWA. לכל דף ב-MPA יש מסלול משלו, כך שקיצור העיבוד של המסלול הראשוני מקביל להטמעת השיטות המומלצות לביצוע אופטימיזציה של נתיב העיבוד הקריטי בכל נתיב. בעקבות השינויים האלה, זמן הטעינה הכולל ירד בממוצע ב-6.35% בכל הדפים.
הצגת מסכי השלד של המעבר בהקדם האפשרי
חברת Ele.me רצתה ליישם את הרעיון של מסכי שלד בחוויית המשתמש. כך ניתן להבטיח שבכל פעם שהמשתמש מקיש על לחצן או קישור כלשהו, הדף מגיב בהקדם האפשרי על ידי העברת המשתמש לדף החדש, ולאחר מכן טעינת התוכן בדף כשהתוכן הופך לזמין. זהו גם המפתח לשיפור הביצועים של ה-PWA. עם זאת, מאחר שכל דף ב-MPA הוא מסלול ראשוני משלו, בכל ניווט צריך לבצע מחדש את כל פעולות הטעינה, הניתוח וההערכה בכל פעם מחדש.
כדי לעקוף את הבעיה, Ele.me בנתה את מסך השלד כרכיב בפועל בממשק המשתמש, ולאחר מכן השתמשה בסטאק הרינדור בצד השרת של Vue.js כדי לבנות ולעבד מראש את רכיבי Vue למחרוזות, לפני שהחדרת אותן לתבניות HTML. כך הם יכולים לעבד ישירות את מסך השלד, ולעבור בין הדפים בצורה יזומה יותר.
|
|
שמירה במטמון של משאבים משותפים באמצעות קובץ השירות (service worker)
מסלולים שונים נטענים כשהמשתמש גולש ב-PWA, וזה יהיה בזבוז לטעון את המסלולים האלה מהרשת שוב ושוב. כדי להתמודד עם המצב הזה, Ele.me ניתח את הנתיבים הקריטיים שחשובים למשתמשים, יצר פלאגין של חבילות אינטרנט כדי לאסוף את התלות של הנתיבים הקריטיים האלה, ולאחר מכן שמר מראש את הנתיבים האלה כשהם מתקינים קובץ שירות (service worker) בדפדפן הלקוח של המשתמש. הנתיבים הקריטיים האלה כוללים את ה-JavaScript, CSS ותמונות שיוצרים את המעטפת הטיפוסית של ממשק המשתמש של ה-PWA.
נתיבים שנחשבים חשובים אבל לא קריטיים נשמרים במטמון של ה-Service Worker באופן מצטבר בזמן הריצה, בזמן שהמשתמשים ממשיכים לנווט ב-PWA. כך Ele.me יכול להציג למשתמשים את ה-PWA ישירות מהמטמון בכל תנאי הרשת. התוצאה: זמן הטעינה ירד ב-11.6% בכל הדפים שנשמרו מראש.