משימה ארוכה היא קוד JavaScript שמשתלט על ה-thread הראשי למשך פרקי זמן ארוכים, וגורם ל'קפיא' בממשק המשתמש.
בזמן שדף נטען, 'משימות ארוכות' יכולות לקשור את ה-thread הראשי ולגרום לדף שלא להגיב לקלט של משתמשים, גם אם הוא נראה מוכן. קליקים והקשות בדרך כלל לא פועלות כי תכונות אינטראקטיביות, כמו פונקציות event listener ורכיבי handler של קליקים, עדיין לא צורפו לרכיבים בממשק המשתמש. לכן, משימות ארוכות יכולות להגדיל משמעותית את זמן האינטראקציה שלכם.
מעכשיו, כלי הפיתוח ל-Chrome יכול להציג משימות ארוכות, וכך להציג בקלות משימות שדורשות אופטימיזציה.
מה נחשב כמשימה ארוכה?
משימות ארוכות במעבד (CPU) נגרמות מעבודה מורכבות שנמשכת יותר מ-50 אלפיות השנייה. מודל RAIL מציע לעבד אירועי קלט של משתמשים ב50 אלפיות השנייה כדי להבטיח תגובה גלויה תוך 100 אלפיות השנייה ולשמר את הקשר בין הפעולה לתגובה.
נקודה חשובה: מודל RAIL ממליץ לספק תגובה ויזואלית לקלט של משתמש בטווח של 100 אלפיות השנייה, אבל ערכי הסף של המדד Interaction to Next Paint (INP) מאפשרים עד 200 אלפיות השנייה להגדיר ציפיות שאפשר לעמוד בהן, במיוחד במכשירים איטיים יותר.
האם יש בדף משימות ארוכות שעלולות לעכב את האינטראקטיביות?
עד עכשיו, הייתם צריכים לחפש באופן ידני "בלוקים צהובים ארוכים" של סקריפטים באורך של יותר מ-50 אלפיות השנייה ב-Chrome DevTools, או להשתמש ב-Long Tasks API כדי להבין אילו משימות מעכבות את האינטראקטיביות.
כדי להקל על תהליך העבודה של בקרת הביצועים, הכלי DevTools מציג עכשיו משימות ארוכות באופן חזותי. אם מדובר במשימות ארוכות (באפור), סימן שהן מוצגות עם דגלים אדומים.
כדי להשתמש בכלי התצוגה החזותי החדש:
- מתעדים נתוני מעקב בחלונית Performance (חלונית הביצועים) של טעינת דף אינטרנט.
- בתצוגת השרשור הראשי מופיע דגל אדום. אתם אמורים לראות שעכשיו המשימות מסומנות באפור ומסומנות כמשימה.
- מחזיקים את הסמן מעל פס אפור. תוצג תיבת דו-שיח שתציג את משך המשימה ונציין אם היא נחשבת למשימה ארוכה.
מה גורם למשימות הארוכות?
כדי לגלות מה הסיבה למשימה ארוכה, בוחרים בסרגל המשימה האפור. בחלונית שמתחת, בוחרים באפשרות Bottom-Up ו-Group by Activity. כך אפשר לראות אילו פעילויות תרמו הכי הרבה (בסך הכול) למשימה שלקח הרבה זמן להשלים. בדוגמה הבאה, הגורם לעיכוב נראה כמו קבוצה יקרת של שאילתות DOM.
מהן הדרכים הנפוצות לבצע אופטימיזציה של משימות ארוכות?
סקריפטים גדולים הם בדרך כלל הגורם העיקרי למשימות ארוכות. כדאי לשקול לפצל אותם. חשוב גם לשים לב לסקריפטים של צד שלישי, שיכולים גם להכיל משימות ארוכות שגורמות לתוכן הראשי להפוך לאינטראקטיבי.
צריך לפצל את כל העבודה למקטעים שפועלים בפחות מ-50 אלפיות השנייה, ולהריץ את המקטעים האלה במקום ובזמן הנכונים. יכול להיות שהמקום המתאים לחלק מהם יהיה מחוץ ל-thread הראשי, ב-Service Worker. למידע נוסף על חלוקה למשימות ארוכות, כדאי לקרוא את המאמר אופטימיזציה של משימות ארוכות ואת המאמר Idle With Urgent של פיל וולטון.
חשוב להקפיד שהדפים יהיו רספונסיביים. כדי למזער את כמות המשימות הארוכות, המשתמשים יוכלו ליהנות מחוויית שימוש מהנה באתר. מידע נוסף על משימות ארוכות זמין במאמר מדדי ביצועים שמתמקדים במשתמש.