TTFB란 무엇인가요?
TTFB는 리소스 요청과 응답의 첫 바이트가 도착하기 시작하는 시점 사이의 시간을 측정하는 측정항목입니다.
startTime에서 responseStart 사이의 경과 시간을 측정합니다.
TTFB는 다음 요청 단계의 합계입니다.
- 리디렉션 시간
- 서비스 워커 시작 시간 (해당하는 경우)
- DNS 조회
- 연결 및 TLS 협상
- 요청, 응답의 첫 번째 바이트가 도착할 때까지의 지점
연결 설정 시간 및 백엔드에서의 지연 시간을 줄이면 TTFB가 줄어듭니다.
좋은 TTFB 점수란 무엇인가요?
TTFB는 콘텐츠가 포함된 첫 페인트 (FCP) 및 최대 콘텐츠 페인트 (LCP)와 같은 사용자 중심 측정항목보다 우선하므로 사용자의 75번째 백분위수가 '양호' 기준 이내의 FCP를 경험하도록 서버가 탐색 요청에 충분히 빠르게 응답하는 것이 좋습니다. 개략적으로 대부분의 사이트는 첫 바이트까지의 소요 시간이 0.8초 이하가 되도록 노력해야 합니다.
TTFB 측정 방법
TTFB는 실험실 또는 현장에서 다음과 같은 방법으로 측정할 수 있습니다.
현장 도구
실습 도구
- Chrome DevTools의 네트워크 패널에서
- WebPageTest
자바스크립트에서 TTFB 측정
Navigation Timing API를 사용하여 브라우저에서 내비게이션 요청의 TTFB를 측정할 수 있습니다. 다음 예는 navigation 항목을 수신 대기하여 콘솔에 로깅하는 PerformanceObserver를 만드는 방법을 보여줍니다.
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
web-vitals JavaScript 라이브러리를 사용하면 브라우저에서 덜 복잡성으로 TTFB를 측정할 수도 있습니다.
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
리소스 요청 측정
TTFB는 내비게이션 요청뿐만 아니라 모든 요청에 적용됩니다. 특히 교차 출처 서버에서 호스팅되는 리소스는 이러한 서버에 대한 연결을 설정해야 하므로 지연 시간이 발생할 수 있습니다. 필드 내 리소스의 TTFB를 측정하려면 PerformanceObserver 내에서 Resource Timing API를 사용하세요.
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 최적화에 관한 상세 가이드가 게시되었습니다.