סה"כ זמן חסימה (TBT) הוא אחד מהמדדים שאחריהם מתבצע מעקב בקטע ביצועים בדוח Lighthouse. כל מדד מתעד היבט מסוים של מהירות הטעינה של דף.
בדוח Lighthouse מוצג TBT באלפיות השנייה:
מה נמדד TBT
השיטה TBT מודדת את משך הזמן הכולל שבו הדף חסום כך שלא יוכל להגיב לקלט של משתמשים, למשל לחיצות על העכבר, הקשות על מסך או לחיצות על המקלדת. הסכום מחושב על ידי הוספת הקטע החסום מכל המשימות הארוכות בין הצגת תוכן ראשוני (First Contentful Paint) ו-Time to Interactive. כל משימה שמופעלת במשך יותר מ-50 אלפיות השנייה היא משימה ארוכה. משך הזמן אחרי 50 אלפיות השנייה הוא החלק החוסם. לדוגמה, אם מערכת Lighthouse מזהה משימה באורך של 70 אלפיות השנייה, החלק החוסם יהיה 20 אלפיות השנייה.
איך מערכת Lighthouse קובעת את דירוג TBT
ציון ה-TBT הוא השוואה בין זמן ה-TBT של הדף לבין זמן ה-TBT במיליוני אתרים אמיתיים, כשהם נטענים במכשירים ניידים. ראו איך נקבעים ציוני המדדים כדי ללמוד איך מגדירים ערכי סף לציונים ב-Lighthouse.
בטבלה הבאה מוסבר איך לפרש את ציון ה-TBT:
| זמן TBT (באלפיות שנייה) |
קידוד צבעים |
|---|---|
| 0-200 | ירוק (מהיר) |
| 200-600 | כתום (בינוני) |
| יותר מ-600 | אדום (איטי) |
איך לשפר את דירוג TBT
בקטע מה גורם למשימות הארוכות שלי? מוסבר איך לאבחן את שורש הבעיה של משימות ארוכות בחלונית 'ביצועים' בכלי הפיתוח ל-Chrome.
באופן כללי, הסיבות הנפוצות ביותר למשימות ארוכות הן:
- טעינה, ניתוח או הפעלה מיותרים של JavaScript. כשמנתחים את הקוד בחלונית 'ביצועים', יכול להיות שתגלו שה-thread הראשי מבצע עבודה שלא באמת נחוצה לטעינת הדף. הפחתת מטענים ייעודיים (payloads) של JavaScript באמצעות פיצול קוד, הסרת קוד שלא נמצא בשימוש או טעינה יעילה של JavaScript של צד שלישי יכולות לשפר את ציון ה-TBT.
- הצהרות JavaScript לא יעילות. לדוגמה, לאחר ניתוח הקוד בחלונית Performance (ביצועים), נניח שמופיעה קריאה ל-
document.querySelectorAll('a')שמחזירה 2000 צמתים. ארגון מחדש של הקוד כך שישתמש בבורר ספציפי יותר שמחזיר רק 10 צמתים, אמור לשפר את דירוג ה-TBT.
איך לשפר את ציון הביצועים הכולל
אלא אם יש סיבה ספציפית להתמקד במדד מסוים, בדרך כלל עדיף להתמקד בשיפור של ציון הביצועים הכולל.
בקטע הזדמנויות בדוח Lighthouse אפשר לקבוע אילו שיפורים מניבים את הערך הגבוה ביותר לדף. ככל שההזדמנות גבוהה יותר, כך ההשפעה שלה על ציון הביצועים גדולה יותר. לדוגמה, בצילום המסך הבא של Lighthouse אפשר לראות שהסרת משאבים שחוסמים עיבוד תוביל לשיפור הגדול ביותר:
בדף הנחיתה של ביקורות הביצועים מוסבר איך לטפל בהזדמנויות שזוהו בדוח Lighthouse.
משאבים
- קוד המקור לביקורת של זמן חסימה כולל
- האם משימות ארוכות של JavaScript מעכבות את הזמן עד לפעילות מלאה?
- אופטימיזציה של השהיית הקלט הראשון
- הצגת תוכן ראשוני (FCP)
- הזמן עד לפעילות מלאה
- הפחתת מטענים ייעודיים (payloads) של JavaScript באמצעות פיצול קוד
- הסרת קוד שלא נמצא בשימוש
- טעינה יעילה של משאבים של צדדים שלישיים