TTFB (Time to First Byte)는 랩과 필드 모두에서 연결 설정 시간과 웹 서버 응답성을 측정하기 위한 기본 측정항목입니다. 리소스 요청과 응답의 첫 번째 바이트가 도착하기 시작하는 시점 사이의 시간을 측정합니다. 따라서 웹 서버가 요청에 너무 느리게 응답하는 경우를 식별하는 데 도움이 됩니다. 탐색 요청(즉, HTML 문서 요청)의 경우 다른 모든 의미 있는 로드 성능 측정항목보다 우선합니다.
startTime에서 responseStart 사이의 경과 시간을 측정합니다.
TTFB는 다음 요청 단계의 합계입니다.
- 리디렉션 시간
- 서비스 워커 시작 시간 (해당하는 경우)
- DNS 조회
- 연결 및 TLS 협상
- 요청, 응답의 첫 번째 바이트가 도착할 때까지
연결 설정 시간 및 백엔드에서 지연 시간을 줄이면 TTFB를 줄일 수 있습니다.
좋은 TTFB 점수란 무엇인가요?
TTFB는 첫 콘텐츠 페인트 (FCP) 및 최대 콘텐츠 렌더링 시간 (LCP)과 같은 사용자 중심 측정항목보다 먼저 발생하므로, 사용자의 75번째 백분위수가 '양호' 기준점 내 FCP를 경험하도록 서버가 탐색 요청에 충분히 빠르게 응답하는 것이 좋습니다. 일반적으로 대부분의 사이트는 TTFB를 0.8초 이하로 유지하도록 노력해야 합니다.
핵심 사항: TTFB는 코어 웹 바이탈 측정항목이 아니므로 TTFB가 길다고 해서 사이트가 중요한 측정항목에서 좋은 점수를 얻는 데 방해가 되지 않는다면 사이트의 TTFB가 반드시 우수할 필요는 없습니다. 로드 시간을 최적화할 때 사이트에서 콘텐츠를 제공하는 방식을 고려해야 합니다. 단일 페이지 애플리케이션 (SPA)의 경우처럼 사이트에서 초기 마크업을 빠르게 제공한 다음 스크립트가 의미 있는 콘텐츠를 채울 때까지 기다려야 하는 경우 TTFB를 낮게 설정하는 것이 특히 중요합니다. 반면 클라이언트 측 작업이 많이 필요하지 않은 서버 렌더링 사이트는 TTFB가 높더라도 클라이언트가 렌더링한 사이트보다 FCP 및 LCP 값이 더 높을 수 있습니다.
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 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 최적화에 관한 심층 가이드를 참조하세요.