כשמדברים על ביצועי אתרים, המהירות אינה מתייחסת רק לזמן טעינת הדף. היא מתייחסת גם לכמה מהר משתמשים יכולים להתחיל לתקשר עם הדף. אחד המדדים המרכזיים שמסייעים למדוד זאת הוא Total Blocking Time (TBT).
אז TBT מודד את הזמן שבו הדף 'חסום' מלהגיב לאינטראקציות משתמשים, כמו לחיצה על כפתור או הקלדה בטופס, בזמן הטעינה. במאמר זה נסביר מהו TBT, מדוע הוא חשוב וכיצד להפחית אותו כדי ליצור אתר מהיר ותגובתי יותר.
Total Blocking Time (TBT) מודד את הזמן שבו דף אינטרנט חסום מלהגיב לאינטראקציות משתמשים בזמן הטעינה. TBT מתמקד במשימות שלוקחות יותר מ-50 מילישניות לביצוע. כאשר משימה לוקחת זמן רב מדי, היא חוסמת את ה-Thread הראשי של הדפדפן, כך שהדף לא מגיב ללחיצות, הקלדות או אינטראקציות אחרות בזמן זה.
TBT נמדד מהרגע שבו מתרחש ה-First Contentful Paint (FCP) ועד שהדף הופך אינטראקטיבי במלואו. ערכי TBT נמוכים משמעותם שמשתמשים יכולים לתקשר עם הדף מהר יותר ובאופן חלק.
TBT נמוך משמעותו שהדף תגובתי ומוכן לאינטראקציה מהר יותר, מה שמשאיר את המשתמשים מרוצים ומעורבים. דפים עם TBT גבוה עשויים להרגיש 'קפואים' או 'לא מגיבים', מה שיכול לתסכל מבקרים.
גוגל כוללת את TBT כחלק ממדדי Core Web Vitals שלה, שהם מדדים להערכת חוויית משתמש. שיפור TBT יכול לתרום לדירוגי SEO טובים יותר, מאחר שמנועי חיפוש נותנים עדיפות לאתרים מהירים וידידותיים למשתמש.
מבקרים נוטים יותר לעזוב אתר שמרגיש איטי או לא תגובתי. על ידי אופטימיזציה של TBT, ניתן להפחית שיעורי נטישה ולהגדיל את הסיכוי להמרות, הרשמות או כל פעולה רצויה אחרת.
סקריפטים כבדים לוקחים זמן רב לביצוע, מה שיכול לחסום את ה-Thread הראשי ולהפוך את הדף ללא תגובתי.
כל משימה שלוקחת יותר מ-50 מילישניות להשלמה נחשבת 'משימה ארוכה'. משימות ארוכות רבות יכולות להצטבר וליצור TBT גבוה.
כאשר דף נשען רבות על JavaScript כדי לרנדר תוכן, הדבר יכול לעכב אינטראקטיביות ולהגדיל את TBT.
אם JavaScript נטען בצורה סינכרונית (באופן שחוסם משימות אחרות), הדבר יכול לעכב חלקים אחרים של הדף ולעכב אינטראקציות משתמשים.
צמצמו את גודל קבצי JavaScript על ידי מיזעורם. פצלו קבצי JavaScript גדולים וטענו רק את הדרוש בכל עמוד. השתמשו ב-code splitting כדי לחלק את JavaScript לחלקים קטנים יותר.
השתמשו בתכונות async או defer עבור סקריפטים שאינם חיוניים לתוכן הראשוני, כדי למנוע מהם לחסום את ה-Thread הראשי. בנוסף, תעדפו טעינת סקריפטים קריטיים ודחו סקריפטים לא חיוניים עד לאחר טעינת התוכן הראשי.
סקריפטים של צד שלישי, כמו פרסומות, עוקבים או ווידג'טים של רשתות חברתיות, יכולים להגדיל משמעותית את ה-TBT. הסירו סקריפטים של צד שלישי שאינם נחוצים ושקלו חלופות קלות או מותאמות יותר.
השתמשו ב-requestIdleCallback כדי לתזמן משימות בזמן מנוחה, ולמנוע מהן לחסום את ה-Thread הראשי. בנוסף, שקלו לפרק משימות ארוכות לחלקים קטנים יותר, כך שהדפדפן יוכל לעבד אותן מבלי לחסום אינטראקציות.
Web Workers יכולים להריץ משימות JavaScript כבדות ברקע, הרחק מה-Thread הראשי. זה מאפשר ל-Thread הראשי לטפל באינטראקציות משתמשים ביעילות רבה יותר, ולהפחית את ה-TBT.
על ידי טעינת תמונות וסרטונים רק כשהם נדרשים (כלומר, כאשר הם נכנסים לתצוגה), ניתן להפחית את העומס על ה-Thread הראשי, ולאפשר לדף להפוך לאינטראקטיבי מהר יותר.
בעוד ש-TBT חשוב למדידת אינטראקטיביות, כדאי להעריך אותו לצד First Input Delay (FID) ו-Largest Contentful Paint (LCP). FID מודד את הזמן שלוקח לדף להגיב לאינטראקציה הראשונה של המשתמש, בעוד LCP מודד מתי האלמנט התוכני הגדול ביותר הופך גלוי. יחד, מדדים אלו מספקים תמונה רחבה יותר של ביצועי הדף וחוויית המשתמש.
Total Blocking Time (TBT) הוא מדד קריטי להבטחת תחושת תגובתיות וחלקות באתר שלכם. על ידי צמצום JavaScript, דחיית סקריפטים לא חיוניים ואופטימיזציית משימות, תוכלו להפחית את ה-TBT וליצור חוויה ידידותית יותר למשתמש. TBT נמוך לא רק מסייע ל-SEO, אלא גם גורם למבקרים להישאר, להשתתף ולהמיר. התמקדות ב-TBT כחלק מאסטרטגיית אופטימיזציית הביצועים שלכם תהפוך את האתר למהיר, תגובתי ומוצלח יותר.