Time to First Byte (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

מהו TTFB?

TTFB הוא מדד שמודד את הזמן שחולף בין הבקשה למשאב לבין הזמן שבו הבייט הראשון של התגובה מתחיל להגיע.

תצוגה חזותית של תזמון הבקשות לרשת. התזמונים מימין לשמאל הם: הפניה אוטומטית, הפעלה של Service Worker, אירוע אחזור של Service Worker, מטמון HTTP, DNS, TCP, בקשה, רמזים מוקדמים (103), תגובה (חופפת להודעה על פריקת נתונים), עיבוד וטעינה. הזמנים המשויכים הם redirectStart ו-redirectEnd,‏ fetchStart,‏ domainLookupStart,‏ domainLookupEnd,‏ connectStart,‏ secureConnectionStart,‏ connectEnd,‏ requestStart,‏ interimResponseStart,‏ responseStart,‏ unloadEventStart,‏ unloadEventEnd,‏ responseEnd,‏ domInteractive,‏ domContentLoadedEventStart,‏ domContentLoadedEventEnd,‏ domComplete,‏ loadEventStart ו-loadEventEnd.
תרשים של שלבי בקשת הרשת והזמנים המשויכים להם. זמן אחזור הדף (TTFB) מודד את הזמן שחלף בין startTime ל-responseStart.

זמן אחזור הבקשה הוא הסכום של שלבי הבקשה הבאים:

  • זמן ההפניה
  • זמן ההפעלה של קובץ השירות (אם רלוונטי)
  • חיפוש DNS
  • חיבור ומשא ומתן ב-TLS
  • בקשה, עד לנקודה שבה הגיע הבייט הראשון בתגובה

הפחתת זמן האחזור בזמן הגדרת החיבור ובקצה העורפי יכולה להפחית את זמן אחזור הבקשה (TTFB).

זמן אחזור דף (TTFB) ורמזים מוקדמים

ההשקה של 103 Early Hints גורמת לבלבול מסוים לגבי מה ש-TTFB של 'בייט ראשון' מודד. 103 ההצעות המוקדמות נספרות כ'הבייטים הראשונים'. השדה finalResponseHeadersStart הוא רשומת תזמון נוספת ב-responseStart שמשמשת למדידת תחילת התגובה הסופית של המסמך (בדרך כלל תגובה מסוג HTTP 200) שרוצים למדוד.

הטיפים המוקדמים הם רק דוגמה חדשה יותר לתגובה מוקדמת. חלק מהשרתים מאפשרים לשטוף מוקדם את התשובה למסמך לפני שהגוף הראשי זמין – רק עם כותרות ה-HTTP או עם האלמנט <head>. שני המקרים האלה יכולים להיחשב כדומים בתוצאה שלהם ל-Early Hints. זו סיבה נוספת לכך שכל האירועים האלה נמדדים כ-reponseStart, וכך גם זמן אחזור ה-TTFB.

כדאי לשלוח נתונים בחזרה מוקדם אם התשובה המלאה תיקח עוד זמן מה. עם זאת, הדבר מקשה על השוואה של זמן אחזור ה-TTFB בפלטפורמות או בטכנולוגיות שונות, בהתאם לתכונות שבהן הן משתמשות ולאופן שבו הן משפיעות על המדידה של זמן ה-TTFB. הדבר החשוב ביותר הוא להבין מהו המדד שהכלי שבו אתם משתמשים מודד ואיך הוא מושפע מהפלטפורמה שנמדדת.

מהו ציון TTFB טוב?

מכיוון שזמן אחזור ה-First Byte מגיע לפני מדדים שמתמקדים במשתמש כמו הצגת תוכן ראשוני (FCP) והצגת התוכן הכי גדול (LCP), מומלץ שהשרת יגיב לבקשות ניווט במהירות מספקת כדי שב-75% מהמשתמשים הזמן להצגת תוכן ראשוני יהיה בטווח 'טוב'. ככלל אצבע, רוב האתרים צריכים לשאוף ל-TTFB של 0.8 שניות או פחות.

ערכים טובים של TTFB הם 0.8 שניות או פחות, ערכים גרועים הם יותר מ-1.8 שניות וכל ערך בטווח שביניהם צריך שיפור
ערכים טובים של TTFB הם 0.8 שניות או פחות, וערכים גרועים הם יותר מ-1.8 שניות.

איך מודדים את זמן אחזור ה-TTFB

אפשר למדוד את זמן אחזור ה-TTFB במעבדה או בשדה בדרכים הבאות.

כלים לשדה

כלי Labs

מדידת TTFB ב-JavaScript

אפשר למדוד את זמן אחזור הבקשה (TTFB) של בקשות ניווט בדפדפן באמצעות 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:

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 may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being served without a Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

קטע הקוד הקודם דומה לקטע הקוד שמשמש למדידת זמן אחזור ה-TTFB של בקשת ניווט, אלא שבמקום לשלוח שאילתה לגבי רשומות 'navigation', שולחים שאילתה לגבי רשומות 'resource'. הוא גם מתייחס לעובדה שחלק מהמשאבים שנטענים מהמקור הראשי עשויים להחזיר ערך של 0, כי החיבור כבר פתוח או שהמשאב מאוחזר באופן מיידי מהמטמון.

איך לשפר את זמן אחזור ה-TTFB

במדריך המקיף שלנו בנושא אופטימיזציה של זמן אחזור ה-TTFB מפורטות הנחיות לשיפור זמן אחזור ה-TTFB של האתר.