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, pullStart, domainLookupStart, domainLookupEnd, connectStart, SecureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domLoadedEventStart, ו- loadEventEnd.
תרשים של שלבי הבקשה לרשת והזמנים המשויכים להם. המדד TTFB מודד את הזמן שחלף בין startTime ל-responseStart.

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

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

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

הגדרות אחרות של TTFB

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

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

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

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

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

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

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

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

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

כלים לשטח

כלים לשיעור Lab

מדידת 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);

מדידת בקשות למשאבים

טבלת ה-TTDFB חלה על כל הבקשות, לא רק על בקשות ניווט. באופן ספציפי, משאבים שמתארחים בשרתים ממקורות שונים עלולים לגרום לזמן אחזור ארוך יותר בגלל הצורך להגדיר חיבורים לשרתים האלה. כדי למדוד את זמן הטעינה של דף הבית (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).