เวลาถึงไบต์แรก (TTFB)

Jeremy Wagner
Barry Pollard

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 35.
  • Safari: 11.

แหล่งที่มา

TTFB คืออะไร

TTFB เป็นเมตริกที่วัดเวลาระหว่างคำขอทรัพยากรจนถึงเวลาที่ไบต์แรกของคำตอบเริ่มมาถึง

วันที่ ภาพแสดงเวลาของคำขอเครือข่าย ระยะเวลาจากซ้ายไปขวาคือ Redirect, Service Worker Init, Service Worker Fetch , HTTP Cache, DNS, TCP, Request, Early Hints (103), Response (ซึ่งซ้อนทับกับ Prompt for Unload), การประมวลผล และ Load ช่วงเวลาที่เกี่ยวข้องได้แก่ redirectStart และ redirectEnd,referrerStart, domainLookupStart, domainLookupEnd, ConnectStart,secureConnectionStart, ConnectEnd, requestStart, interimResponseStart,responseStart, unloadEventStart, unloadEventEnd,responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart และ loadEventEnd
แผนภาพเฟสคำขอเครือข่ายและเวลาที่เกี่ยวข้อง TTFB วัดเวลาที่ผ่านไประหว่าง startTime ถึง responseStart

TTFB คือผลรวมของขั้นตอนคำขอต่อไปนี้

  • เวลาในการเปลี่ยนเส้นทาง
  • เวลาเริ่มต้นของโปรแกรมทำงานของบริการ (หากมี)
  • การค้นหา DNS
  • การเชื่อมต่อและการเจรจา TLS
  • คำขอจนถึงจุดที่ไบต์แรกของคำตอบได้รับ

การลดเวลาในการตอบสนองในเวลาตั้งค่าการเชื่อมต่อและในแบ็กเอนด์สามารถลด TTFB ได้

คำจำกัดความอื่นๆ ของ TTFB

คำจำกัดความก่อนหน้านี้เป็นคำจำกัดความแบบทั่วไป แต่มีการใช้ Early Hints ซึ่งมีถือว่าเป็น "ไบต์แรก" พร้อมสำหรับการโต้วาทีแล้ว firstInterimResponseStart เป็นรายการเวลาเพิ่มเติมแบบใหม่ใน responseStart เพื่อแยกความแตกต่างระหว่างเวลาเหล่านี้ แต่การตั้งค่านี้รองรับเฉพาะในเบราว์เซอร์ Chrome และ Chromium เท่านั้น ดังนั้นเบราว์เซอร์และเครื่องมือบางอย่าง (รวมถึง CrUX) จะวัดจนกว่าจะได้รับไบต์แรกพร้อมคำแนะนำเบื้องต้น

คำแนะนำเบื้องต้นเป็นเพียงตัวอย่างที่ใหม่กว่าของการตอบกลับตั้งแต่เนิ่นๆ บางเซิร์ฟเวอร์อนุญาตให้ล้างการตอบกลับเอกสารได้ก่อนที่เนื้อหาหลักจะพร้อมใช้งาน ไม่ว่าจะมีส่วนหัว HTTP เท่านั้น หรือมีองค์ประกอบ <head> ซึ่งทั้ง 2 อย่างนี้จะถือว่าเหมือนกันกับคำแนะนำเบื้องต้น และให้ระบบคลาวด์แก่คำจำกัดความของสิ่งที่ TTFB วัดด้วย

เพื่อวัดว่า "ไบต์แรก" เมื่อใด ของข้อมูลที่ดำเนินการได้สำหรับเอกสาร คำจำกัดความทั้งหมดเหล่านี้ถือว่าถูกต้อง การส่งข้อมูลกลับก่อนเวลาข้างต้นจะต้องคุ้มค่ามากกว่านี้หากการตอบสนองทั้งหมดต้องใช้เวลานานขึ้น สิ่งสำคัญที่สุดคือต้องเข้าใจว่าเครื่องมือที่ใช้วัดผลคืออะไรและส่งผลกระทบต่ออะไรจากแพลตฟอร์มที่กำลังวัดผล ซึ่งทำให้เปรียบเทียบ TTFB ในแพลตฟอร์มหรือเทคโนโลยีต่างๆ ได้ยากขึ้น โดยขึ้นอยู่กับฟีเจอร์ที่ใช้และผลกระทบที่มีต่อการวัดผลของ TTFB ที่ใช้อยู่

TTFB มักถือเป็นตัวบ่งชี้เวลาการตอบสนองของเซิร์ฟเวอร์หรือโฮสต์ แต่จะได้รับผลกระทบจากปัจจัยที่อยู่นอกเหนือการควบคุมโดยตรงดังกล่าว เช่น เวลาในการเปลี่ยนเส้นทาง ไม่ว่าเวลาดังกล่าวจะเป็นการแสดงผลจากแคชที่ CDN ตรวจพบ หรือต้องมีเส้นทางกลับไปยังเซิร์ฟเวอร์ต้นทางที่นานขึ้น กรณีนี้เห็นได้ชัดเจนในข้อมูลภาคสนาม โดยการทดสอบในห้องทดลองมักจะได้รับผลกระทบจากปัจจัยเหล่านี้น้อยกว่า เนื่องจาก URL สุดท้ายจะได้รับการทดสอบและมักปฏิเสธการเปลี่ยนแปลงการแคชซ้ำๆ Lighthouse จะรายงานเวลาในการตอบกลับของเซิร์ฟเวอร์แทน TTFB เพื่อความชัดเจนยิ่งขึ้น แต่เครื่องมืออื่นๆ ของ Lab อาจไม่เห็น

คะแนน TTFB ที่ดีคือเท่าใด

เนื่องจาก TTFB อยู่ก่อนเมตริกที่เน้นผู้ใช้เป็นหลัก เช่น First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) จึงขอแนะนำให้เซิร์ฟเวอร์ของคุณตอบสนองต่อคำขอการนำทางอย่างรวดเร็วมากพอเพื่อให้เปอร์เซ็นไทล์ที่ 75 ของผู้ใช้ได้รับประสบการณ์ FCP ใน "ดี" เกณฑ์ เพื่อเป็นแนวทางคร่าวๆ ให้เว็บไซต์ส่วนใหญ่พยายามให้มี TTFB 0.8 วินาทีหรือน้อยกว่านั้น

ค่า TTFB ที่ดีคือไม่เกิน 0.8 วินาที ค่าที่ไม่ดีควรมากกว่า 1.8 วินาที และค่าที่อยู่ระหว่างต้องปรับปรุง
ค่า TTFB ที่ดีคือ 0.8 วินาทีหรือน้อยกว่า และค่าที่ไม่ดีมากกว่า 1.8 วินาที

วิธีวัด TTFB

คุณสามารถวัด TTFB ได้ในห้องทดลองหรือในภาคสนามด้วยวิธีต่อไปนี้

เครื่องมือภาคสนาม

เครื่องมือในห้องทดลอง

วัด TTFB ใน JavaScript

คุณสามารถวัด TTFB ของคำขอการนำทางในเบราว์เซอร์ได้ด้วย Accessibility 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
});

ข้อมูลโค้ดก่อนหน้านี้คล้ายกับข้อมูลโค้ดที่ใช้วัด TTFB สำหรับคำขอการนำทาง ยกเว้นแทนที่จะค้นหารายการ 'navigation' คุณจะค้นหารายการ 'resource' แทน นอกจากนี้ยังอธิบายข้อเท็จจริงที่ว่าทรัพยากรบางรายการที่โหลดจากต้นทางหลักอาจแสดงผลค่า 0 เนื่องจากการเชื่อมต่อเปิดอยู่แล้ว หรือมีการเรียกแหล่งข้อมูลจากแคชโดยทันที

วิธีปรับปรุง TTFB

สำหรับคำแนะนำในการปรับปรุง TTFB ของเว็บไซต์ โปรดดูคู่มือเชิงลึกเกี่ยวกับการเพิ่มประสิทธิภาพ TTFB