המדד 'זמן עד בייט ראשון' (TTFB) הוא מדד בסיסי למדידת זמן הגדרת החיבור ומהירות התגובה של שרת האינטרנט, גם בשיעור ה-Lab וגם בשדה. היא מודדת את הזמן בין הבקשה למשאב לבין המועד שבו הבייט הראשון של התגובה מתחיל להגיע. כך אפשר לזהות מקרים שבהם שרת האינטרנט מגיב לאט מדי לבקשות. במקרה של בקשות ניווט, כלומר בקשות למסמך HTML, הן קדימות על פני כל מדד משמעותי אחר של ביצועי הטעינה.
startTime ל-responseStart.
TTFB הוא הסכום של שלבי הבקשות הבאים:
- זמן הפניה אוטומטית
- זמן ההפעלה של קובץ השירות (אם רלוונטי)
- חיפוש DNS
- חיבור ומשא ומתן TLS
- הבקשה, עד שהבייט הראשון של התגובה יגיע
קיצור זמן האחזור בזמן הגדרת החיבור ובקצה העורפי עוזר לקצר את זמן האחזור של ה-TTFB.
מהו דירוג TTFB טוב?
מכיוון ש-TtFB מתרחש לפני מדדים שמתמקדים במשתמש, כמו First Contentful Paint (FCP) ו-Largest Contentful Paint (LCP), מומלץ שהשרת יגיב לבקשות ניווט מהר מספיק כדי שהאחוזון ה-75 של המשתמשים יחווה FCP בסף "טוב". ככלל, רוב האתרים צריכים לשאוף לכך שערך TTFB יהיה באורך של 0.8 שניות או פחות.
נקודה חשובה: מאחר ש-TTDFB הוא לא מדד של מדדי ליבה לבדיקת חוויית המשתמש באתר, הוא לא בהכרח הכרחי כדי שלאתרים יהיה TTFB מצוין, כל עוד פונקציית TTFB ארוכה יותר לא מקשה על האתר לקבל ציון טוב במדדים החשובים. אם אתם משפרים את זמני הטעינה, חשוב להביא בחשבון את האופן שבו האתר שלכם מציג תוכן. ערך TTFB נמוך חשוב במיוחד אם אתר מספק את תגי העיצוב הראשוניים שלו במהירות, ולאחר מכן צריך להמתין שסקריפטים יאכלסו בו תוכן משמעותי, כמו לעיתים קרובות במקרה של אפליקציות דף יחיד (SPA). מצד שני, לאתר שעבר עיבוד שרת שלא מצריכה עבודה רבה בצד הלקוח, ערכי ה-FCP ו-LCP יכולים להיות טובים יותר מאשר באתר שעובד על ידי לקוח, גם אם ה-TTFB שלו גבוה יותר.
איך מודדים TTFB
ניתן למדוד את TTFB במעבדה או בשדה בדרכים הבאות.
כלי שדה
כלי מעבדה
- בחלונית הרשת בכלי הפיתוח של Chrome
- WebPageTest
מדידת TTFB ב-JavaScript
אפשר למדוד את ה-TTDFB של בקשות ניווט בדפדפן באמצעות Navigation Timing API.
הדוגמה הבאה מציגה איך ליצור PerformanceObserver שמאזין לרשומה navigation ורושם אותה במסוף:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
ספריית ה-JavaScript web-vitals יכולה גם למדוד את TTFB בדפדפן בצורה פחות מורכבת:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
מדידת בקשות למשאבים
TTFB חל על כל הבקשות, לא רק בקשות ניווט. באופן ספציפי, משאבים שמתארחים בשרתים מכמה מקורות יכולים לגרום לזמן אחזור במהלך הגדרת החיבורים לשרתים האלה. כדי למדוד את TTFB עבור משאבים בשדה, השתמשו ב-Resource Timing API ב-PerformanceObserver:
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is served without a
// Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
קטע הקוד הקודם דומה לקטע הקוד המשמש למדידת ה-TTDFB בבקשת ניווט, אלא שבמקום להריץ שאילתות על רשומות 'navigation', צריך להריץ שאילתות על רשומות 'resource'. הוא גם מביא בחשבון את העובדה שחלק מהמשאבים שנטענים מהמקור הראשי יחזירו את הערך 0 אם החיבור כבר פתוח, או אם המשאב מאוחזר באופן מיידי ממטמון.
איך לשפר את TTFB
לקבלת הדרכה על שיפור TTFB של האתר שלך, עיין במדריך המעמיק שלנו לאופטימיזציה של TTFB.