פסיכולוגיית מהירות: איך אנחנו תופסים מהירות של טעינת אתר

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

מהו ביצוע "נתפס" – Perceived Performance?

ביצועים "נתפסים" (באנגלית: Perceived Performance) מתייחסים לכמה מהר או רספונסיבי אתר או אפליקציה מרגישים בהשוואה לכמה הם באמת מהירים או רספונסיביים, כפי שמדווחים על ידי מדדים.

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

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

• האם התגובה לקלט מתעכבת?
• האם יש הבהוב (Flash) או תנועות דף פתאומיות (CLS)?
• האם התמונות נטענות באיכות גבוהה?
• האם סרטונים פועלים ללא הפסקות מיותרות?
• האם האנימציות חלקות?
• האם יש סימנים לעיבוד אינטנסיבי (התרוקנות סוללת המכשיר, דפדפן או אפליקציה לא מגיבים, אייקונים של טעינה מסתובבים)?

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

איך אנשים תופסים זמן ומהירות?

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

שמעתם פעם על "הזמן טס כשאתה נהנה" או בהייה בסיר מים שמחכה לרתיחה לעולם לא ירתח? או טלפון לעולם לא יצלצל אם נסתכל עליו?

אז כבר חווית איך אנחנו מרגישים שהזמן מתרחב ומתכווץ.

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

עיקרון נפוץ בתחום הפסיכולוגיה הוא חוק וובר-פכנר, המגדיר את ההבדל המורגש (Just Noticeable Difference (JND)) בתגובה לגירוי. 

"מחקרים מצביעים על כך שאנו יכולים להבחין רק בשינוי של יותר מ-20%."

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

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

הציפייה שלנו קשורה באופן הדוק למצבי קלט שונים (עכבר, מקלדת, דיבור וכו') ומשוב ממשק (צליל, חזותי או מגע). יהיו לנו ציפיות שונות בהתאם לאופן שבו גולשים משתמשים באינטרנט ואיזה משוב נקבל. האופן שבו אנו תופסים מהירות מתחבר גם לרעיון הזרימה. בשנות ה-60, פרופסור לפסיכולוגיה Mihaly Csikszentmihalyi קבע את ההגדרה של זרימה:

"[זרימה] נקלטת במלואה בפעילות – זהו מצב טבעי של עיסוק פרודוקטיבי במשימה מבלי להיות מודע לטכנולוגיה הבסיסית."

כאשר ביצועי אתר או אפליקציה משפרים את תחושת ה-"זרימה", יש לנו סיכוי גבוה יותר לקבל סנטימנט חיובי לגבי הביצועים שלהם. כשמדברים על תחושת ריכוז במשימה, איך מכמתים את מסגרות הזמן לשמירה על הזרימה? רבים מצטטים את ג'ייקוב נילסן, שמציין 3 מגבלות (0.1 שנייה, שנייה אחת ו-10 שניות) לתשומת הלב האנושית. למרות שהפישוט הזה עשוי להיות שימושי לחלקנו, יש הבדל בין "מיידי" ל"מיידי" ובין טווחים "קשובים" ו"לא קשובים" (שאנחנו אולי נכוון לפסיבי ואקטיבי).

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

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

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

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

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

בהחלטות עיצוב ישנן 4 דרכים לשיפור ביצועים נתפסים:

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

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

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

• אופטימיזציה של הנפשות: בעת הוספת אנימציות למצבי טעינה ארוכים יותר, ביצוע אופטימיזציה שלהן כך שהאנימציה עצמה לא תשפיע על הביצועים. אפשר לקרוא עוד על ביצועי אנימציה במדריך של Calibreapp. כמו כן, כדאי לכוון לאנימציות "פועמות" או בלולאה שנותנות רושם של האצה. 
• היזהרו ממסכי שלדים: הם הפכו נפוצים במקצת עם עלייתם של אתרים מונעי Javascript. אם הם האפשרות הקיימת היחידה, ודאו שהם תואמים לממשק המשתמש האמיתי. אחרת, הם ייצרו שינויים חזותיים צורמים. ודאו שהם מציגים התקדמות מצטברת לעומת הבהוב פתאומי של דף מוכן (מה שיגרום למדידת CLS לא אופטימלית).
• התאמת לוקליזציה של אייקונים (ספינרים) לטעינה: מומלץ להשתמש בספינרים כאשר רק אלמנט קטן של עמוד ישתנה. הימנעו משימוש בספינר כאשר עמודים או מסכים שלמים נטענים, מכיוון שהוא גורם לאנשים להתמקד אפילו יותר בזמן ההמתנה.
• כתיבת מיקרו קופי מותאם: שום טיפול בממשק לא יהווה תחליף להודעות קצרות ומובנות בבירור. ללוות את המעמיסים במיקרו-קופי משמעותי, או לבחור בעדכוני סטטוס על בסיס טקסט בלבד במקום.

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

2. לקורא תמיד יהיה מה לעשות

גולשים לעולם אינם מודעים יותר לכמה זמן לוקח לדף להיטען מאשר כשאין להם מה לעשות.

למרבה המזל, יש כמה אסטרטגיות שבהן ניתן להשתמש כדי לוודא שתשומת הלב של אנשים תישאר אצלנו ולא תנדוד החוצה:

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

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

3. הימנעו מתנועות דף פתאומיות

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

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

• הימנעו מ-JavaScript המוזרם מאוחר מידי בטעינה: אלמנטים חדשים שמופיעים או קיימים משתנים בדף שכבר מרגיש מסודר, מביאים לאפקט צורם עבור הגולשים.
  עיינו בסדרי העדיפויות של הבקשות ובסרטוני העיבוד של הדף שלכם כדי למצוא היכן אפשר לשפר את התזוזתיות של הדף.
• הוסיפו ממדים למדיה שלכם: אחת הסיבות הנפוצות ביותר לשינויים פתאומיים היא היעדר ממדים שנוספו לתמונות, סרטונים, מודעות, iframes והטמעות. ודאו שלאלמנטים אלה יש גודל מוגדר והם מוגשים באיכות המתאימה למכשירי הקהל (נעשה אוטומטית בתוספי מטמון המובילים בוורדפרס).
• בצעו אופטימיזציית פונטים: גם Flash של טקסט לא מעוצב (FOUT) וגם Flash of Invisible Text (FOIT) אחראים לשינויים הקשורים לטעינת טקסט. ניתן להשתמש ב-CSS ו-HTML וב-Font Loading API כדי להבטיח שהתוכן זמין באופן מיידי. מצרף הסבר ופתרון ל-FOUT & FOIT בעזרת הכלי Font Style Matcher.

למרבה המזל, תנועה בלתי צפויה היא משהו שאנו יכולים לבדוק ולטפל בו, הודות למדד ה-Cumulative Layout Shift. ניתן לבדוק CLS ב-Core Web Vitals Checker בחינם. הימנעות מתנועות דף פתאומיות עוזרת לנו לתקשר את האמינות והמוכנות של האתר – שהינם קריטיים לביצועים הנתפסים.

4. הימנעו מעיבוד אינטנסיבי

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

• השתמשו בפחות JavaScript: ג'אווה-סקריפט הוא נכס שדורש הכי הרבה משאבים; ככל שנשתמש בו פחות, כך אנו ממזערים יותר בעיות מהירות ובעיות UX. בעוד שיש לנו אסטרטגיות וכלים לאופטימיזציה של נתונים, התוצאות הטובות ביותר יושגו על ידי הפחתת כמות קוד הדרוש להפעלה. אם זה לא אפשרי, מומלץ לטפל במשימות ארוכות של JavaScript כתוספת לאופטימיזציה של הנתונים.
• מדידת השפעת בקשות צד שלישי: זה לא נדיר לראות 30-50 בקשות צד שלישי בכל דף, שתהיה להם השפעה משמעותית על הביצועים.
• השתמשו בחזיתות (Facades) הממשק: Facades הן גישה ליישום ייצוגים סטטיים של הטמעות של צד שלישי כדי לדחות את הטעינה שלהם עד שיידרשו בפועל.
  כאשר נעשה בצורה נכונה, זה גורם לגולשים להרגיש כאילו הדף כולו מוכן מבלי להשפיע על חווית המשתמש שלהם עם זמני טעינה איטיים יותר שנגרמו על ידי בקשות צד שלישי שהמשתמשים עשויים שלא להזדקק להם. לדוגמה, בדקו את השימוש של הווידג'ט תמיכה בצ'אט שלכם – כמה אינטראקציה יש איתו והאם צריך אותו בטעינה הראשונית של כל דף באתר שלכם.

צמצום ואופטימיזציה של משאבי הקוד מונעים סימנים של עיבוד אינטנסיבי ומצמצם את האפשרות לעיכובים בטעינה. אנו יכולים להשתמש ב-Interaction to Next Paint ובזמן חסימה כולל (Total Blocking Time) כדי לכמת ולעקוב אחר מאמצים אלה.

סיכום

ביצועים ועיצוב מעולים הולכים יד ביד.

כשאנשים מזכירים את שיפור מהירות אתרי אינטרנט, הם בדרך כלל מתמקדים בהיבטים הראשונים בפיתוח כמו מסגרות JavaScript ומדדי ביצועים של Core Web Vitals & CrUX. כל אלה חשובים ליצירת חוויה טובה יותר עבור הגולשים שלכם – אבל לעיצוב חכם, המושרש בפסיכולוגיה התנהגותית, יש לו תפקיד ביצירת UX וביצועים טובים יותר, נתפסים או אחרים.