프론트엔드 개발자가 알아야 할 지연 시간들

안녕하세요, 소플입니다.

이번 매거진에서는 프론트엔드 개발자가 알아야 할 지연 시간들에 대해서 알아보도록 하겠습니다.

영어로 된 원문은 아래 링크에서 보실 수 있습니다.

Latency numbers every frontend developer should know
https://vercel.com/blog/latency-numbers-every-web-developer-should-know

지연 시간(Latency)이란?

지연 시간은 말 그대로 요청에 대한 응답이 오기까지 얼마나 지연되었는지 그 시간을 나타냅니다.

웹 페이지에 접속했을 때 웹사이트가 늦게 뜨거나 어떤 동작에 대한 반응이 느리다면, 당연히 사용자 입장에서는 만족도가 떨어질 수밖에 없겠죠.

그리고 이러한 것들은 모두 네트워크 지연 시간에 의해 좌우되는 경우가 많습니다.

지연 시간은 사용자가 인터넷에 연결하는 방식(Wi-Fi, LTE, 5G), 사용자가 연결 중인 서버의 거리, 그 사이의 네트워크 품질에 따라 달라집니다.

지연 시간은 그 수치 자체만으로는 낮아 보일 수 있지만, 여러 지연시간이 겹치게 되면 굉장히 크게 증가할 수 있습니다.

Core Web Vitals

Core Web Vitals는 구글과 Web Performance Working Group에서 정의한 웹 애플리케이션의 로딩 속도, 응답성 및 시각적 안정성을 평가하는 주요 지표입니다.

사용자 경험(UX)에 큰 영향을 미치고 검색엔진 최적화(SEO)에도 반영되므로 굉장히 중요하다고 할 수 있습니다.

Core Web Vitals는 아래와 같은 세 가지 항목으로 나뉩니다.

• Loading (로딩 속도)
• Interactivity (응답성)
• Visual Stability (시각적 안정성)

다시 말하면, 웹사이트가 얼마나 빠르게 로딩되는지, 얼마나 빠르게 응답하는지, 얼마나 시각적으로 안정적인지 등을 수치화하여 나타낸 것이라고 보면 됩니다.

그리고 앞으로 살펴볼 지연 시간(Latency)들은 Core Web Vitals의 각 지표에 영향을 미치게 됩니다.

아래는 Core Web Vitals의 가장 대표적인 지표들을 나타낸 것입니다.

• FCP (First Contentful Paint)
  • 페이지 로딩 시점부터 웹페이지의 첫 콘텐츠가 화면에 표시될 때까지의 시간
• LCP (Largest Contentful Paint)
  • 페이지 로딩 시점부터 가장 큰 콘텐츠가 화면에 표시될 때까지의 시간
• INP (Interaction to Next Paint)
  • 사용자가 페이지와 처음 상호작용한 시점부터, 브라우저가 해당 상호작용에 대한 응답으로 다음 프레임을 렌더링하는 시점까지의 시간
• TTFB (Time to First Byte)
  • 리소스 요청과 응답의 첫 번째 바이트가 도착하기 시작하는 시점 사이의 시간

이번 매거진에서는 Core Web Vitals에 대해 자세히 다루지는 않겠습니다.

대신 Core Web Vitals와 관련한 자세한 내용을 아래에 슬라이드로 정리해두었으니 참고하시기 바랍니다😀

🔗 Core Web Vitals 슬라이드 링크

지연 시간들

그렇다면 프론트엔드 개발자가 알아야 할 지연 시간들에는 어떤 것들이 있을까요?

아래 표는 지연 시간들을 정리해놓은 것입니다.

각각의 항목을 하나씩 살펴보면서 어떤 지표에 영향을 미치게 되는지 파악해보시기 바랍니다.

항목	추정 지연 시간	영향을 끼치는 지표
인터넷에 대한 Wi-Fi 지연 시간 Wi-Fi는 연결에 최소한의 지연 시간을 추가합니다. 이는 신호가 약하거나 오래된 하드웨어로 인해 증가할 수 있습니다.	1-4ms	TTFB, FCP, LCP
인터넷에 대한 5G 고대역(밀리미터파) 지연 시간 밀리미터파는 가장 빠르게 배포된 모바일 기술입니다. 그러나 전파탑이 보이는 밀집된 도시 지역에서만 사용하는 것이 실용적입니다.	1-5ms	TTFB, FCP, LCP
초당 60프레임에 대한 프레임 당 사용자 공간 예산 60fps 장치에서는 16ms마다 프레임이 그려집니다. 그러나 장치가 실제 프레임을 처리하는 데는 약간의 시간이 필요합니다. 여기의 시간은 코드에서 무엇을 그려야 할지 계산하는 데 사용할 수 있는 시간입니다.	5-10ms	부드러운 프레임 속도
인터넷에 대한 5G 중간 대역 지연 시간 일반적인 5G 지연 시간입니다. 신호가 좋지 않거나 타워에 과부하가 걸린 경우 달라질 수 있습니다.	10-30ms	TTFB, FCP, LCP
동일한 클라우드 리전의 서비스 또는 데이터베이스에 대한 왕복 시간 가까운 곳에 배포된 다른 서비스에 대한 지연 시간입니다.	10ms	TTFB, FCP, LCP
인터넷에 대한 LTE 지연 시간 LTE(4G 셀룰러 네트워크)의 일반적인 지연 시간입니다.	15-50ms	TTFB, FCP, LCP
초당 60프레임의 프레임 지속 시간 초당 60프레임은 디스플레이 장치에 가장 많이 사용되는 프레임 속도입니다. 그러나 일부 최신 장치는 90 또는 120fps와 같은 더 높은 프레임 속도를 지원합니다.	16ms	부드러운 프레임 속도
같은 대륙의 다른 도시로의 왕복 지연 시간 사용자와 동일한 대륙의 지역에 배포하는 경우 예상할 수 있는 지연 시간입니다. 5000km의 거리를 기준으로 계산되었으므로 실제 지연 시간은 약간 높거나 낮을 수 있습니다.	33ms	TTFB, FCP, LCP
사람이 시간이 지났다고 인식하는 가장 짧은 시간 이 지연 시간 미만으로 사용자 입력에 응답하면 사용자가 응답을 즉각적인 것으로 인식한다는 것을 의미합니다.	40-80ms	INP
1MB의 CSS를 파싱하는 데 걸리는 시간 CSS 파싱은 브라우저가 웹 페이지를 렌더링하기 위해 수행해야 하는 작업의 일부입니다.	100ms	FCP, LCP
1MB의 HTML을 파싱하는 데 걸리는 시간 HTML 파싱은 브라우저가 웹 페이지를 렌더링하기 위해 수행해야 하는 작업의 일부입니다. 짧은 웹 페이지에서는 무시할 수 있는 경우가 많지만, 매우 긴 웹 페이지에서는 주요 요인이 될 수 있습니다.	120ms	FCP, LCP
인터넷에 대한 3G 지연 시간 3G는 오늘날 일반적으로 사용되는 가장 느린 셀룰러 표준입니다.	150ms	TTFB, FCP, LCP
고품질 네트워크를 통해 지구 반대편으로의 왕복 지연 시간 (cold potato routing) 단일 지역에 서비스를 배포하는 경우 표시되는 최악의 지연 시간입니다.	150ms	TTFB, FCP, LCP
1MB의 JS를 파싱하는 데 걸리는 시간 자바스크립트 파싱은 페이지 로드 시간에 큰 영향을 미칠 수 있는데, 이는 자바스크립트 코드의 양이 CSS나 HTML보다 더 빠르게 증가하는 경우가 많기 때문입니다. 코드 분할(Code Splitting)은 JS 크기를 최소화하는 주요 기술입니다.	150ms	FCP, LCP, INP
사람이 느리게 인식하는 시간 사용자 입력에 반응할 때 이 값보다 느린 응답은 기다려야 하는 것으로 인식됩니다. 200ms는 INP의 개선 필요에 대한 임계값이기도 합니다.	200ms	INP
임대 광섬유 없이 지구 반대편으로의 왕복 지연 시간 (hot potato routing) 사용자가 멀리 있는 서버에 직접 연결하거나 저렴한 CDN을 사용하는 경우, 가능한 가장 저렴한 경로를 통해 bytes를 전달하므로 사용자의 지연 시간이 두 배로 늘어날 수 있습니다.	300ms	TTFB, FCP, LCP

이번 매거진에서는 프론트엔드 개발자가 알아야 할 지연 시간들에 대해 살펴보았습니다.

지연 시간을 일일이 다 외울 필요는 없지만,

어떤 항목이 어떤 부분에 영향을 끼치는지 정도는 알고 있으면 도움이 될 거라고 생각합니다.

그럼 저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀