바로가기

TTFB(Time to First Byte)

TTFB는 '첫 번째 바이트까지의 시간', 즉 브라우저가 요청한 후 웹 서버에서 첫 번째 정보를 수신하기까지 브라우저가 대기하는 시간입니다.

TTFB 단축 팁

  • TTFB가 길어지는 가장 보편적인 이유는 동적 콘텐츠의 생성입니다. 브라우저가 정적 파일을 요구하면 서버는 파일에 즉시 응답할 수 있지만, 동적 파일을 요구하면 서버는 브라우저에 응답하기 전에 파일을 빌드해야 합니다. 따라서 이를 해결하는 좋은 방법은 캐싱을 사용하는 것입니다. 캐싱은 브라우저가 호출되지 않더라도 페이지를 미리 빌드하고 HTML을 브라우저에 준비시킵니다.
  • 웹 서버 구성을 변경함으로써 TTFB 시간을 단축할 수 있습니다.
  • 광케이블 속도를 향상시키면 개선될 수 있습니다.
  • 웹사이트 트래픽이 증가하는 경우 속도가 느려질 수 있으며, 웹 서버를 늘려 트래픽을 분산하는 방법 등을 검토해볼 수 있습니다.

서버 응답 시간(Server Response Time)

서버 응답 시간은 웹 서버가 브라우저의 요청에 응답하는 데 걸리는 시간입니다. 웹페이지가 최적화되어 있어도 서버 응답 시간이 느린 경우 페이지가 느리게 표시됩니다.

일반적으로 이상적으로 생각하는 Server Response Time은 200ms 미만입니다.

서버 응답 시간 단축 팁

  • 웹페이지별로 CSS, JavaScript 등의 자원을 요청하는 수를 줄이는 방법을 고려해 보세요.
    • 자원의 Merge: CSS 또는 JavaScript를 여러 개의 다른 파일로 분리하지 않고 하나의 파일에 합치면 성능이 향상될 수 있습니다.
    • Image LazyLoading: 당장 필요하지 않은 이미지는 나중에 요청하여 화면 표시를 지연시키는 방법으로 성능을 향상시킬 수 있습니다.
    • 경우에 따라 CSS와 JavaScript를 외부 파일에 두지않고 HTML 파일 자체에 인라인으로 넣으면 추가 호출이 필요 없습니다.
    • keep alive활성화되어 있지 않으면 자원 다운로드에 시간이 걸릴 수 있습니다.
  • 자원의 파일 크기를 줄이는 방법을 고려해 보세요.
    • 불필요하게 큰 이미지의 사이즈를 축소하면 자원의 용량이 현저하게 줄어들어 다운로드 시간을 줄일 수 있습니다.
    • 실제 이미지 표현과는 관련이 없는 메타 정보가 존재하는 경우 메타 정보를 제거합니다.
    • HTTP Gzip 압축 기술을 사용하여, 모든 요청에 대해 Content-Encoding:gzip 헤더를 추가하여 크기를 줄일 수 있습니다.
    • HTTP 페이지의 주석과 공백을 제거하는 것도 자원의 크기를 줄일 수 있습니다.
  • 웹 서버 소프트웨어를 변경하거나 더 잘 구성하여 서버 응답 시간을 단축할 수 있습니다.

DOM 프로세싱

브라우저가 HTML을 파싱하고 해석하는 데 걸리는 시간, 즉 DOM Loading 시작에서 준비가 완료되는 데까지 걸리는 시간입니다.

속도 향상 팁

  • 거대한 페이지는 파싱하는 데 시간이 오래 걸립니다. HTML 페이지에서 최적화할 곳이 있는지 확인해봐야 합니다.

페이지 렌더링(Page Rendering)

브라우저가 HTML을 표현하고 JavaScript를 실행하면서 페이지를 구성하는 하위 이미지를 로딩하는 데 걸리는 시간입니다. 대규모 자원을 다운로드하고 JavaScript를 실행하면 웹에서 상당한 시간이 걸릴 수 있습니다.

속도 향상 팁

  • 자원이 HTML 페이지 내 어디에 위치하느냐에 따라서도 렌더링 성능은 달라질 수 있습니다.
    • head에는 꼭 레이아웃 구성에 필요한 CSS 파일만 넣습니다. head가 하는 일이 많으면 사용자는 빈 웹페이지 상태에서 오래 기다려야 합니다.
    • JavaScript는 body 태그를 닫기 직전에 넣습니다. body 태그 안에서 script를 중간에 넣으면 전체 렌더링이 잠시 중단됩니다.

연관 정보 바로가기

아래 가이드에서 연관 정보를 확인할 수 있습니다.

""에 대한 건이 검색되었습니다.

    ""에 대한 검색 결과가 없습니다.

    처리중...