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

การสนับสนุนเบราว์เซอร์

  • 43
  • 12
  • 31
  • 11

แหล่งที่มา

Time to First Byte (TTFB) เป็นเมตริกพื้นฐานในการวัดเวลาตั้งค่าการเชื่อมต่อและการตอบสนองของเว็บเซิร์ฟเวอร์ทั้งในห้องทดลองและภาคสนาม โดยวัดเวลาระหว่างคำขอทรัพยากรและเวลาที่ไบต์แรกของการตอบกลับเริ่มมาถึง วิธีนี้จะมีประโยชน์ในการระบุเมื่อเว็บเซิร์ฟเวอร์ตอบสนองคำขอช้าเกินไป ในกรณีของคำขอการนำทาง ซึ่งก็คือคำขอเอกสาร HTML จะแสดงก่อนหน้าเมตริกประสิทธิภาพการโหลดที่สำคัญอื่นๆ ทั้งหมด

แผนภาพเวลาของคำขอเครือข่าย ระยะจากซ้ายไปขวาคือการเปลี่ยนเส้นทาง (ซึ่งซ้อนทับกับพรอมต์สำหรับยกเลิกการโหลด), แคช, DNS, TCP, คำขอ, การตอบกลับ, การประมวลผล และการโหลด ช่วงเวลาที่เกี่ยวข้องได้แก่ redirectStart และ redirectEnd (ซึ่งทับซ้อนกับ Prompt for UnloadEventStart และ unloadEventEnd ของ Prompt for UnloadEventStart และ unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, ConnectStart, SecureConnectionStart, ConnectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete,loadEventStart และแก่เสียหน้า
แผนภาพของระยะคำขอเครือข่ายและเวลาที่เกี่ยวข้อง TTFB วัดเวลาที่ผ่านไประหว่าง startTime ถึง responseStart

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

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

การลดเวลาในการตอบสนองของเวลาในการตั้งค่าการเชื่อมต่อและแบ็กเอนด์จะช่วยลด TTB ของคุณ

คะแนน TTFB ที่ดีคืออะไร

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

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

ประเด็นสำคัญ: เนื่องจาก TTFB ไม่ใช่เมตริก Core Web Vitals จึงไม่จำเป็นอย่างยิ่งสำหรับเว็บไซต์ที่มี TTFB ที่ยอดเยี่ยม ตราบใดที่ TTFB ที่ยาวกว่าไม่ได้ทำให้เว็บไซต์ได้รับคะแนนในเมตริกที่สำคัญได้ยากขึ้น เมื่อเพิ่มประสิทธิภาพเวลาที่ใช้ในการโหลด ให้พิจารณาถึงวิธีการแสดงเนื้อหาของเว็บไซต์ของคุณ TTFB ที่ต่ำมีความสำคัญอย่างยิ่งหากเว็บไซต์ส่งมาร์กอัปเริ่มต้นอย่างรวดเร็ว จากนั้นต้องรอให้สคริปต์ใส่เนื้อหาที่มีความหมาย ดังเช่นกรณีปกติที่มีกับแอปพลิเคชันหน้าเว็บเดียว (SPA) ในทางกลับกัน เว็บไซต์ที่แสดงผลจากเซิร์ฟเวอร์ซึ่งไม่ต้องใช้งานฝั่งไคลเอ็นต์มากนักอาจมีค่า FCP และ LCP ดีกว่าเว็บไซต์ที่แสดงผลโดยไคลเอ็นต์ แม้จะเป็น TTFB ที่สูงกว่าก็ตาม

วิธีวัด TTFB

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

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

เครื่องมือสำหรับห้องทดลอง

วัด 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 ยังสามารถวัด 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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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