הסבר על רוחב פס נמוך וזמן אחזור גבוה

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

בדיקה עם רוחב פס נמוך וזמן אחזור גבוה

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

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

אמולציה של ויסות רשת

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

כלים לדפדפן

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

ויסות נתונים של כלי הפיתוח ל-Chrome

כלי מערכת

החלונית Network Link Conditioner מאפשרת לבחור העדפות שונות. היא זמינה ב-Mac אם מתקינים את Hardware IO Tools של Xcode:

לוח הבקרה של Mac Network Link Conditioner

הגדרות של Mac Network Link Conditioner

הגדרות מותאמות אישית של Mac Network Link Conditioner

אמולציה של המכשיר

הכלי Android Emulator מאפשר לדמות תנאי רשת שונים בזמן שאפליקציות שונות (כולל דפדפני אינטרנט ואפליקציות אינטרנט היברידיות) פועלות ב-Android:

אמולטור Android

הגדרות האמולטור Android

ב-iPhone, אפשר להשתמש ב-Network Link Conditioner כדי לדמות תנאי רשת לקויים (ראו למעלה).

בדיקה מרשתות וממיקומים שונים

ביצועי הקישוריות תלויים במיקום השרת כמו גם בסוג הרשת.

WebPagetest הוא שירות אונליין שמאפשר להריץ סידרה של בדיקות ביצועים לאתר במגוון רשתות ומיקומי מארחים. לדוגמה, תוכלו לנסות את האתר משרת בהודו ברשת 2G, או באמצעות כבל מעיר בארה"ב.

הגדרות WebPagetest

בוחרים מיקום, ובהגדרות המתקדמות בוחרים את סוג החיבור. אפשר אפילו להפוך את הבדיקות לאוטומטיות באמצעות סקריפטים (למשל, כדי להתחבר לאתר) או באמצעות ה-APIs מסוג RESTful. כך תוכלו לכלול בדיקת קישוריות בתהליכי ה-build או ברישום הביצועים.

Fiddler תומך בשימוש בשרת proxy גלובלי באמצעות GeoEdge, ואפשר להשתמש בכללים בהתאמה אישית כדי לדמות מהירויות מודם:

שרת proxy של Fiddler

בדיקה ברשת לקויה

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

כלי ה-Augmented Traffic Control (ATC) של Facebook הוא קבוצת אפליקציות עם רישיון BSD שאפשר להשתמש בהן כדי לעצב תעבורת נתונים ולבצע אמולציה של תנאי רשת לקויים:

בקרת תנועה מוגברת ב-Facebook

Facebook אפילו השיקה את 2G Sundays כדי להבין איך אנשים שמשתמשים ברשת 2G משתמשים במוצר שלה. בימי שלישי, העובדים מקבלים חלון קופץ עם אפשרות לדמות חיבור 2G.

אפשר להשתמש בשרת ה-Proxy מסוג HTTP/HTTPS של Charles כדי לשנות את רוחב הפס וזמן האחזור. Charles היא תוכנה מסחרית, אבל אפשר לקבל תקופת ניסיון בחינם.

הגדרות רוחב פס וזמן אחזור של Charles

מידע נוסף על Charles זמין בכתובת codewithchris.com.

איך מתמודדים עם קישוריות לא אמינה ועם "lie-fi"

מה זה lie-fi?

המונח lie-fi מתוארך לפחות לשנת 2008 (כשהטלפונים נראו כך כך), ומתייחס לקישוריות שהיא לא מה שנדמה. הדפדפן מתנהג כאילו יש קישוריות, אבל לא משנה מה הסיבה לכך.

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

הבעיה של Lie-fi צפויה לגדול לאור העובדה שיותר אנשים עוברים לנייד ומתרחקים מהפס הרחב הקבוע. הנתונים האחרונים של מפקד האוכלוסין בארה"ב מראים התרחקות מפס רחב קבוע. התרשים הבא מציג את השימוש באינטרנט הנייד בבית בשנת 2015 בהשוואה לשנת 2013:

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

השתמש בזמן קצוב לתפוגה כדי לטפל בקישוריות לסירוגין

בעבר נעשה שימוש בשיטות לא רגילות באמצעות XHR כדי לבדוק קישוריות לסירוגין, אבל Service Worker מאפשר שיטות אמינות יותר להגדרת זמנים קצובים לתפוגת הרשת. אפשר לעשות זאת באמצעות Workbox עם רק כמה שורות קוד:

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

אפשר לקבל מידע נוסף על Workbox בהרצאה של ג'ף פוזניק בנושא Chrome Dev Summit, Workbox: Flexible PWA Libraries.

אנחנו מפתחים גם את הפונקציונליות של זמן קצוב ל-אחזור API, ו-Streams API אמור לעזור לכם לבצע אופטימיזציה של העברת התוכן ולהימנע מבקשות מונוליתיות. במאמר Supercharging page load מאת ג'ייק ארצ'יבלד אפשר לקבל פרטים נוספים על ההתמודדות עם lie-fi.

משוב