First Input Delay (FID)

Philip Walton

첫인상이 얼마나 중요한지 모두 알고 있습니다. 새로운 사람을 만날 때도 중요하고 웹에서 경험을 구축할 때도 중요합니다.

웹에서는 좋은 첫인상이 충성도 높은 사용자가 되는 것과 떠나 다시 돌아오지 않는 것의 차이를 만들 수 있습니다. 문제는 좋은 인상을 주는 요소가 무엇이며, 사용자에게 어떤 인상을 주고 있는지 어떻게 측정하느냐입니다.

웹에서 첫인상은 다양한 형태로 나타날 수 있습니다. 사이트의 디자인과 시각적 매력에 대한 첫인상뿐만 아니라 속도와 반응성에 대한 첫인상도 있습니다.

웹 API를 사용하면 사용자가 사이트 디자인을 얼마나 좋아하는지 측정하기는 어렵지만 속도와 반응성은 측정할 수 있습니다.

사용자가 사이트가 얼마나 빠르게 로드되는지에 대해 갖는 첫인상은 콘텐츠가 포함된 첫 페인트 (FCP)로 측정할 수 있습니다. 하지만 사이트가 화면에 픽셀을 얼마나 빠르게 페인트할 수 있는지는 일부에 불과합니다. 사용자가 이러한 픽셀과 상호작용하려고 할 때 사이트의 응답성도 마찬가지로 중요합니다.

첫 입력 지연 (FID) 측정항목은 사이트의 상호작용 및 반응성에 대한 사용자의 첫인상을 측정하는 데 도움이 됩니다.

FID란 무엇인가요?

FID는 사용자가 페이지와 처음 상호작용했을 때부터 (링크를 클릭하거나, 버튼을 탭하거나, JavaScript로 작동하는 맞춤 컨트롤을 사용하는 경우 등) 브라우저가 실제로 해당 상호작용에 대한 이벤트 핸들러 처리를 시작할 수 있을 때까지의 시간을 측정합니다.

좋은 FID 점수란 무엇인가요?

우수한 사용자 환경을 제공하기 위해 사이트의 첫 입력 지연 시간이 100밀리초 이하가 되도록 노력해야 합니다. 대부분의 사용자를 대상으로 이 목표를 달성하려면 모바일 및 데스크톱 기기별로 구분하여 페이지 로드 횟수의 75번째 백분위수를 측정 기준으로 삼는 것이 좋습니다.

FID 세부정보

이벤트에 응답하는 코드를 작성하는 개발자는 이벤트가 발생하면 코드가 즉시 실행된다고 가정하는 경우가 많습니다. 하지만 사용자로서 우리는 모두 반대의 상황을 자주 경험했습니다. 휴대전화에서 웹페이지를 로드하고 상호작용하려고 했지만 아무 일도 일어나지 않아 답답했던 적이 있을 것입니다.

일반적으로 입력 지연(입력 지연 시간)은 브라우저의 기본 스레드가 다른 작업을 수행하느라 바빠서 아직 사용자에게 응답할 수 없기 때문에 발생합니다. 이러한 문제가 발생하는 일반적인 이유 중 하나는 브라우저가 앱에서 로드한 대규모 JavaScript 파일을 파싱하고 실행하는 데 집중하고 있기 때문입니다. 이 과정에서 로드되는 JavaScript가 다른 작업을 지시할 수 있으므로 이벤트 리스너를 실행할 수 없습니다.

일반적인 웹페이지 로드의 타임라인을 고려해 보세요.

위 시각화는 리소스 (CSS 및 JS 파일일 가능성이 높음)에 대한 네트워크 요청을 몇 개 수행하는 페이지를 보여줍니다. 이러한 리소스의 다운로드가 완료되면 기본 스레드에서 처리됩니다.

이로 인해 기본 스레드가 일시적으로 사용량이 많은 기간이 발생하며, 이는 베이지색 작업 블록으로 표시됩니다.

긴 첫 입력 지연은 일반적으로 첫 콘텐츠 페인트(FCP)와 상호작용까지의 시간 (TTI) 사이에 발생합니다. 페이지가 일부 콘텐츠를 렌더링했지만 아직 안정적으로 상호작용할 수 없기 때문입니다. 이러한 상황이 어떻게 발생하는지 설명하기 위해 타임라인에 FCP와 TTI가 추가되었습니다.

FCP와 TTI 사이에 상당한 시간 (긴 작업 3개 포함)이 있는 것을 알 수 있습니다. 사용자가 이 시간 동안 페이지와 상호작용하려고 하면 (예: 링크 클릭) 클릭이 수신된 시점과 기본 스레드가 응답할 수 있는 시점 사이에 지연이 발생합니다.

사용자가 가장 긴 작업의 시작 부분 근처에서 페이지와 상호작용하려고 하면 어떻게 될지 생각해 보세요.

브라우저가 작업을 실행하는 중에 입력이 발생하므로 입력에 응답하려면 작업이 완료될 때까지 기다려야 합니다. 기다려야 하는 시간은 이 페이지에서 이 사용자의 FID 값입니다.

상호작용에 이벤트 리스너가 없으면 어떻게 되나요?

FID는 입력 이벤트가 수신된 시점과 다음 번에 기본 스레드가 유휴 상태가 되는 시점 사이의 델타를 측정합니다. 즉,