Time to First Byte (TTFB)

Jeremy Wagner
Barry Pollard

תמיכה בדפדפנים

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

מקור

מהו 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

ההגדרה הקודמת היא ההגדרה המקובלת, אבל עם ההשקה של רמזים מוקדמים, יש מחלוקת לגבי מה שנחשב ל'בייט הראשון'. השדה firstInterimResponseStart הוא רשומת תזמון נוספת חדשה ל-responseStart כדי להבדיל בין אירועים כאלה, אבל התכונה הזו נתמכת רק ב-Chrome ובדפדפנים המבוססים על Chromium. לכן, חלק מהדפדפנים והכלים (כולל CrUX) מודדים עד לקבלת הבייטים הראשונים, כולל הטיפים המוקדמים.

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

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

בדרך כלל, זמן אחזור ה-TTFB נחשב גם כמדד של זמן התגובה של השרת או המארח. עם זאת, הוא יושפע מגורמים שאינם בשליטה ישירה, כמו זמן ההפניה האוטומטית, אם הוא יוצג מהמטמון שפגע ב-CDN או אם הוא יצטרך לעבור דרך ארוכה יותר בחזרה לשרת המקור. הדבר בולט במיוחד בנתונים מהשדה – בדרך כלל, בדיקות במעבדה מושפעות פחות מהגורמים האלה כי בדרך כלל בודקים את כתובת ה-URL הסופית, ולעיתים קרובות מבצעים ביטול חוזר של שינויים ששמורים במטמון. כדי להבהיר את הנושא, מערכת Lighthouse מדווחת על זמן תגובה של שרת במקום על זמן אחזור דף ראשוני, אבל יכול להיות שכלי אחרים של Labs לא מדווחים על כך.

מהו ציון 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

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