Time to First Byte (TTFB)

ג'רמי וגנר

בארי פולארד

מהו TTFB?

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

TTFB הוא הסכום של שלבי הבקשות הבאים:

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

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

מהו דירוג TTFB טוב?

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

איך מודדים TTFB

ניתן למדוד את ה-TFCB בשיעור ה-Lab או בשדה בדרכים הבאות.

כלי שדה

• הדוח לגבי חוויית המשתמש ב-Chrome
• ספריית JavaScript ב-web-vitals

כלי מעבדה

• בחלונית הרשת בכלי הפיתוח של 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 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
});

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

איך לשפר את TTFB

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