טעינה דינמית: שיפור ביצועי האינטרנט במכשירים איטיים

כדי לוודא שכל משתמש מקבל את החוויה הטובה ביותר, אפשר לבצע אופטימיזציה של האתרים לפי אילוצים ספציפיים של חומרה ורשת.

Milica Mihajlija

יכולות המכשיר וחיבורי הרשת משתנים מאוד. באתרים שמשתמשים במכשירים מתקדמים, ייתכן שלא ניתן יהיה להשתמש באתרים פשוטים. באתרים שנטענים בצורה חלקה ברשתות מהירות, אתרים איטיים עלולים להיפסק. כל משתמש עלול לחוות אתר איטי, לכן פיתוח פתרונות "one size fits all" לא תמיד יעבוד.

במפגש של Chrome Dev Summit, Addy Osmani מ-Google ונייט שלוס מ-Facebook בוחנים פתרון לבעיה הזו – דפוס להצגת דפים שמתאימים יותר למגוון אילוצים של משתמשים. הם קוראים לה טעינה דינמית.

מהי טעינה דינמית?

טעינה דינמית כרוכה בחוויות משתמש שונות למשתמשים שונים, על סמך מגבלות הרשת והחומרה שלהם, ובמיוחד:

• חוויית ליבה מהירה לכל המשתמשים (כולל מכשירים פשוטים).

• הוספה הדרגתית של תכונות מתקדמות בלבד, אם הרשת והחומרה של המשתמש יכולים לעמוד בהן.

באמצעות אופטימיזציה עבור אילוצי חומרה ורשת ספציפיים, כל משתמש יכול ליהנות מהחוויה הטובה ביותר עבור המכשיר שלו. התאמה של חוויית השימוש לאילוצים של משתמשים יכולה לכלול:

• הצגת תמונות וסרטונים באיכות נמוכה ברשתות איטיות.

• ויסות קצב הפריימים של אנימציות במכשירים פשוטים.

• הימנעות מפעולות ממוחשבות יקרות במכשירים פשוטים.

• חסימת סקריפטים של צד שלישי במכשירים איטיים יותר.

• טעינת JavaScript לא קריטי לצורך אינטראקטיביות רק ביחידות עיבוד מרכזיות מהירות.

תמיכה בדפדפן ואיך מטמיעים טעינה דינמית

האותות שבהם אפשר להשתמש לטעינה דינמית מפורטים בהמשך. לכל אות יש גם תמיכה בדפדפן:

Navigator.deviceMemory

המאפיין navigator.deviceMemory משמש להפחתת צריכת הזיכרון במכשירים פשוטים.

תמיכה בדפדפן

• 63
• 79
• x
• x

מקור

Navigator.hardwareConcurrency

המאפיין navigator.hardwareConcurrency מייצג את מספר הליבה של המעבד (CPU). הוא משמש להגבלת ביצוע יקר של JavaScript ולהפחתת לוגיקה של מעבדים רבים (CPU) כשהמכשיר לא יכול להתמודד עם זה כמו שצריך.

תמיכה בדפדפן

• 37
• 15
• 48
• x

מקור

NetworkInformation.effectiveType

המאפיין navigator.connection.effectiveType משמש לכוונון עדין של העברת הנתונים כדי לצרוך פחות רוחב פס.

תמיכה בדפדפן

• 61
• 79
• x
• x

מקור

NetworkInformation.saveData

הנכס navigator.connection.saveData משמש לניצול ההעדפות של המשתמש במצב חוסך הנתונים (Data Saver).

תמיכה בדפדפן

• 49
• לא יותר מ-79
• x
• x

מקור

יש שני מקומות שבהם אפשר להחליט מה להציג למשתמשים: הלקוח והשרת. בצד הלקוח, יש לכם את ממשקי ה-API של JavaScript שצוינו למעלה. בשרת תוכלו להשתמש ברמזים ללקוחות על מנת לקבל תובנות לגבי יכולות המכשיר של המשתמש והרשת שאליה הוא מחובר.

טעינה דינמית ב-React

הווים וכלי התחזוקה של הטעינה הדינמית היא חבילה שכוללת את הסביבה העסקית של React, ובעזרתה קל יותר להתאים את האתרים למכשירים פחות מתקדמים. היא כוללת:

• ה-hook של useNetworkStatus() להתאמה על סמך סטטוס הרשת (slow-2g, 2g, 3g או 4g).

• ה-hook של useSaveData() להתאמה על סמך ההעדפות של המשתמש בחוסך הנתונים (Data Saver).

• ה-hook של useHardwareConcurrency() להתאמה על סמך מספר ליבות המעבד הלוגיות של המעבד (CPU) במכשיר של המשתמש.

• ה-hook של useMemoryStatus() להתאמה על סמך זיכרון המכשיר של המשתמש (RAM).

לכל הוק יש ארגומנט אופציונלי להגדרת הערך הראשוני. האפשרות הזו שימושית בשני תרחישים: כשהדפדפן של המשתמש לא תומך ב-API הרלוונטי, ולעיבוד בצד השרת שבו אפשר להשתמש בנתוני הינט על הלקוח כדי להגדיר את הערך הראשוני בשרת. לדוגמה, ה-hook של useNetworkStatus() יכול להשתמש בערך הראשוני שמועבר מהרמז ללקוח לצורך רינדור בצד השרת, וכשמפעילים אותו בלקוח, הוא יכול לעדכן את עצמו אם הסוג האפקטיבי של הרשת משתנה.

הווים וכלי הניהול של הטעינה הדינמית מוטמעים באמצעות ממשקי API של פלטפורמת האינטרנט (פרטי הרשת, זיכרון המכשיר ובו-זמניות בחומרה). אפשר להשתמש באותם ממשקי API כדי להחיל קונספטים של טעינה דינמית ב-frameworks ובספריות אחרות, כמו Angular, Vue ועוד.

טעינה דינמית בפעולה

חלק זה בוחן הדגמות של השימוש בטעינה דינמית ודוגמאות מהעולם האמיתי מאתרים כמו Facebook, eBay, Tinder ואחרים.

בהדגמה של סרט התגובה מוסבר איך להתאים את הצגת המדיה על סמך סטטוס הרשת. זוהי אפליקציה לעיון בסרטים, שמציגה פוסטרים, סיכומים ורשימות שחקנים. היא מציגה פוסטרים איכותיים בחיבורים מהירים ופוסטרים באיכות נמוכה בחיבורים איטיים, בהתאם לסוג החיבור האפקטיבי של המשתמש.

ב-Twitter יש מצב Data Saver שמטרתו להפחית את כמות הנתונים שמשתמשים בהם. במצב הזה, תמונות של תצוגה מקדימה נטענות ברזולוציה נמוכה ותמונות גדולות נטענות רק כשמקישים על התצוגה המקדימה. כשאפשרות זו מופעלת, משתמשים ב-iOS וב-Android חסכו 50% מצריכת הנתונים מתמונות, והמשתמשים באינטרנט חסכו 80% מצריכת הנתונים. הנה הדגמה של React שמשתמשת ב-hook של שמירת הנתונים כדי לשכפל את ציר הזמן של Twitter. נסו לפתוח את החלונית Network של כלי הפיתוח, ולבדוק את ההבדל בכמות הנתונים שמועברים בזמן הגלילה בזמן שהאפשרות 'שמירת נתונים' מושבתת לעומת המצבים שבהם היא מופעלת.

הקלטת מסך שבה מתבצעת השוואה בין גלילה בציר הזמן של Twitter לבין הפעלה והשבתה של חוסך הנתונים (Data Saver). כשחוסך הנתונים (Data Saver) מופעל, רק תצוגות מקדימות של תמונות נטענות והסרטונים לא מופעלים אוטומטית.

eBay מפעילה ולהשבית תכונות כמו שינוי מרחק התצוגה כשתנאי הרשת או החומרה של המשתמש לא תומכים בהן בצורה טובה. אפשר לעשות זאת באמצעות פיצול קוד וטעינת קוד מותאמים – דרך לטעון באופן מותנה רכיבים אינטראקטיביים יותר או להריץ פעולות מורכבות יותר במכשירים מתקדמים, בלי לשלוח את הסקריפטים האלה למשתמשים במכשירים איטיים יותר. צפו בסרטון ב-16 דקות, שבו אדי מראה את הדפוס הזה לאחר היישום של React.lazy() ו-Suspense בדף המוצר להדגמה ב-eBay.

כדי שהחוויה תהיה מהירה לכולם, Tinder משתמשת בכמה דפוסי טעינה מותאמים באינטרנט ובאפליקציית Lite. אם המשתמש מחובר לרשת איטית או הפעיל את חוסך הנתונים (Data Saver), הוא משבית את ההפעלה האוטומטית של סרטונים, מגביל את שליפה מראש של הניתוב ומגביל את הטעינה של התמונה הבאה בקרוסלה לטעינה של כל תמונה בנפרד בזמן שהמשתמשים מחליקים. לאחר יישום האופטימיזציה הזו, הם הבחינו בשיפור משמעותי במספר ההחלקה הממוצע במדינות כמו אינדונזיה.

טעינה דינמית ב-Facebook

אחת הבעיות שמופיעות בטעינה דינמית היא קיבוץ המכשירים למחלקות מתקדמות ולסיווגים פשוטים, על סמך האותות הזמינים. במכשירים ניידים, המחרוזת סוכן משתמש (UA) מספקת את שם המכשיר שמאפשר ל-Facebook להשתמש בנתונים שזמינים באופן ציבורי במאפייני המכשיר כדי לקבץ מכשירים ניידים לכיתות. עם זאת, במחשבים שולחניים, המידע הרלוונטי היחיד שמספק UA הוא מערכת ההפעלה של המכשיר.

כדי לקבץ מכשירי מחשב, Facebook רושמת ביומן את הנתונים לגבי מערכת ההפעלה, ליבות המעבד (CPU) (מ-navigator.hardwareConcurrency) וזיכרון ה-RAM (navigator.deviceMemory) בניטור הביצועים. אחרי שבחנו את הקשרים בין סוגים שונים של חומרה וביצועים, הם סיווגו את המכשירים לחמש קטגוריות. בעזרת סיווגי חומרה שמשולבים במעקב ביצועים, הם מקבלים תמונה מלאה יותר על האופן שבו אנשים משתמשים במוצרי Facebook בהתאם למכשיר שלהם, ויכולים לזהות רגרסיות בקלות רבה יותר.

צפו בסרטון ב-24 דקות, שבו נייט מסביר איך Facebook מתייחסת לקיבוץ מכשירים ומשתמשת בטעינה דינמית לאנימציות ולטעינת JavaScript.

מידע נוסף על טעינה דינמית

המשמעות של טעינה דינמית היא עיצוב האתרים שלכם מתוך מחשבה על קבלת האחר. חשוב ליצור חוויית ליבה שעובדת מצוין לכולם, ולאחר מכן להחליף או להוסיף שכבות של תכונות, שהופכות אותן אפילו יותר למדי אם יש למשתמש מספיק זיכרון, מעבד (CPU) או רשת מהירה. למידע נוסף על טעינה דינמית, ראו הדגמות זמינות וצפו בשיחת הפסגה של מפתחי Chrome: