למדו לאבחן פעולות יקרות שמונעות אינטראקציה של משתמשים.
משימות ארוכות יכולות להעסיק את ה-thread הראשי ולעכב את האינטראקציה של המשתמשים. כלי הפיתוח ל-Chrome יכולים עכשיו להמחיש משימות ארוכות, וכך לראות בקלות משימות לביצוע אופטימיזציה.
אם אתם משתמשים ב-Lighthouse כדי לבדוק את הדפים, יכול להיות שאתם מכירים את הזמן עד לביצוע אינטראקציה, מדד שמייצג מתי משתמשים יכולים לנהל אינטראקציה עם הדף ולקבל תגובה. אבל, ידעתם ש-משימות ארוכות (JavaScript) יכולות לתרום רבות ל-TTI לא טוב?
מהן משימות ארוכות?
משימה ארוכה היא קוד JavaScript שמשתלט על ה-thread הראשי למשך פרקי זמן ארוכים, וגורם ל'קפיא' של ממשק המשתמש.
בזמן שדף האינטרנט נטען, התכונה 'משימות ארוכות' עשויה לקשר את ה-thread הראשי ולגרום לדף שלא להגיב לקלט של משתמשים גם אם הוא נראה מוכן. קליקים והקשות לא פועלים בדרך כלל כי עדיין לא צורפו פונקציות event listener, רכיבי handler של קליקים וכו'.
משימות ארוכות במעבד (CPU) מתרחשות עקב עבודה מורכבות שנמשכת יותר מ-50 אלפיות השנייה. למה 50 אלפיות השנייה? מודל RAIL מציע לעבד אירועי קלט של משתמשים ב50 אלפיות השנייה כדי להבטיח תגובה גלויה תוך 100 אלפיות השנייה. אם לא תעשו זאת, הקשר בין הפעולה לתגובה מנותק.
האם יש בדף משימות ארוכות שעלולות לעכב את האינטראקטיביות?
עד עכשיו, הייתם צריכים לחפש באופן ידני "בלוקים צהובים ארוכים" של סקריפט באורך של יותר מ-50 אלפיות השנייה בכלים למפתחים ב-Chrome או להשתמש ב-Long Tasks API כדי להבין אילו משימות מעכבות את האינטראקטיביות. זה יכול להיות קצת מסורבל.
כדי להקל על תהליך העבודה של בקרת הביצועים, כלי הפיתוח מציג עכשיו משימות ארוכות באופן חזותי. אם מדובר במשימות ארוכות (באפור), סימן שהן מוצגות עם דגלים אדומים.
- מתעדים מעקב בחלונית הביצועים של טעינת דף אינטרנט.
- בתצוגת השרשור הראשי מופיע דגל אדום. המשימות אמורות להופיע באפור ("משימה").
- אם תעבירו את העכבר מעל סרגל, תוכלו לראות את משך המשימה ואם היא נחשבה 'ארוכה'.
מה גורם למשימות הארוכות?
כדי לבדוק מה גורם למשימה ארוכה, בוחרים בסרגל האפור משימה. בחלונית ההזזה שמתחת, בוחרים באפשרות למטה וקיבוץ לפי פעילות. כך אפשר לראות אילו פעילויות תרמו הכי הרבה (בסך הכול) למשימה שלקח הרבה זמן להשלים. נראה שזוהי קבוצה יקרה של שאילתות DOM.
מהן הדרכים הנפוצות לבצע אופטימיזציה של משימות ארוכות?
סקריפטים גדולים הם בדרך כלל אחד מהגורמים העיקריים למשימות ארוכות, לכן כדאי לפצל אותם. חשוב גם לשים לב לסקריפטים של צד שלישי, כי המשימות הארוכות שלהם עשויות לעכב את היכולת של התוכן הראשי להפוך לאינטראקטיבי.
צריך לפצל את כל העבודה למקטעים קטנים (שנמשכים פחות מ-50 אלפיות השנייה) ולהפעיל את המקטעים האלה במקום ובזמן הנכונים. יכול להיות שהמקום הנכון נמצא גם מחוץ ל-thread הראשי, ב-worker. מומלץ לקרוא בנושא זה את הספר Idle until Urgent של פיל וולטון. כדאי לקרוא גם את המאמר בנושא אופטימיזציה למשימות ארוכות, שכולל אסטרטגיות כלליות לניהול וחלוקה של משימות ארוכות.
חשוב להקפיד שהדפים יהיו רספונסיביים. כדי למזער את כמות המשימות הארוכות, המשתמשים שלך יוכלו ליהנות מחוויית שימוש מהנה באתר שלך. מידע נוסף על משימות ארוכות זמין במאמר מדדי ביצועים שמתמקדים במשתמש.