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