FID란 무엇인가요? 첫 번째 입력 지연(FID)

좋은 첫인상을 남기는 것이 얼마나 중요한지 우리 모두 잘 알고 있습니다. 이는 새로운 사람을 만날 때뿐만 아니라 온라인에서 어떤 경험을 할 때에도 중요합니다.

온라인에서 좋은 첫인상은 충성도 높은 사용자가 될지, 아니면 다시는 돌아오지 않을지를 가르는 중요한 요소입니다. 문제는 무엇이 좋은 경험을 만들고, 그 인상을 어떻게 측정할 수 있느냐는 것입니다.

인터넷에서 첫인상은 다양한 형태로 형성될 수 있습니다. 우리는 사이트의 디자인과 시각적 매력뿐만 아니라, 속도와 반응성으로도 첫인상을 형성합니다.

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

사용자가 귀하의 웹사이트 로딩 속도에 대해 처음 받는 인상은 다음과 같습니다.첫 번째 콘텐츠 페인트(FCP)측정해 보세요. 하지만 사이트가 화면에 픽셀을 얼마나 빨리 그릴 수 있는지는 전체 이야기의 일부일 뿐입니다. 사용자가 픽셀과 상호 작용하려고 할 때 사이트의 반응 속도도 마찬가지로 중요합니다!

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

FID란 무엇인가요?

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

좋은 FID 점수는 얼마입니까?

좋은 사용자 경험을 제공하기 위해 웹사이트는 첫 번째 입력 지연을 다음과 같이 설정해야 합니다.100밀리초또는 그 이하입니다. 대부분의 사용자 방문에 대해 권장 목표를 달성하고 있는지 확인하려면 적절한 측정 임계값이 필요합니다.75번째 백분위수이 임계값은 모바일 및 데스크톱 기기 모두에 적용됩니다.

FID 세부 정보

이벤트에 응답하는 코드를 작성하는 개발자로서, 우리는 이벤트가 발생하는 즉시 코드가 실행될 것이라고 생각하는 경우가 많습니다. 하지만 사용자로서 우리는 정반대의 상황을 자주 겪어 왔습니다. 휴대폰에서 웹 페이지를 열고 상호작용을 시도했지만 페이지가 전혀 응답하지 않아 답답함을 느끼는 것입니다.

일반적으로 입력 지연(입력 래그라고도 함)은 브라우저의 메인 스레드가 다른 작업을 하느라 사용자에게 응답할 수 없을 때 발생합니다. 이러한 현상이 발생하는 일반적인 이유 중 하나는 브라우저가 애플리케이션에서 로드한 대용량 JavaScript 파일을 구문 분석하고 실행하는 데 바쁘기 때문입니다. 이 과정에서는 로드되는 JavaScript로 인해 브라우저가 다른 작업을 하느라 바쁠 수 있으므로 이벤트 리스너를 실행할 수 없습니다.

일반적인 웹 페이지 로딩 타임라인을 살펴보세요.

위의 시각화는 리소스(주로 CSS와 JS 파일)를 가져오기 위해 여러 네트워크 요청을 하는 페이지를 보여줍니다. 리소스는 다운로드 후 메인 스레드에서 처리됩니다.

이로 인해 메인 스레드가 주기적으로 바빠집니다(그림에서 베이지색으로 표시).일조각).

긴 첫 번째 입력 지연은 일반적으로 다음과 같은 경우 발생합니다.첫 번째 콘텐츠 페인트(FCP)그리고대화형 시간(TTI)이 기간 동안 페이지가 일부 콘텐츠를 렌더링했지만, 상호작용이 아직 안정적이지 않았기 때문입니다. 이러한 현상이 발생하는 이유를 설명하기 위해 타임라인에 FCP와 TTI를 추가했습니다.

당신은 꽤 긴 기간(3개 포함)이 있다는 것을 알아차렸을 것입니다.긴 작업), 사용자가 이 시간 동안 페이지와 상호 작용(예: 링크 클릭)을 시도하면 브라우저가 클릭을 받은 시점부터 메인 스레드가 응답할 수 있을 때까지 지연이 발생합니다.

가장 긴 작업의 맨 처음에 사용자가 페이지와 상호 작용을 시도하면 어떤 일이 일어나는지 살펴보세요.

브라우저가 작업 도중에 입력이 발생하기 때문에, 브라우저는 입력에 응답하기 전에 작업이 완료될 때까지 기다려야 합니다. 브라우저가 기다려야 하는 시간은 사용자가 페이지에서 경험하는 FID 값입니다.

이 예에서 사용자는 메인 스레드가 가장 바쁜 시기에 접어들었을 때 페이지와 상호작용했습니다. 사용자가 조금 더 일찍(유휴 시간 동안) 페이지와 상호작용했다면 브라우저는 즉시 응답했을 것입니다. 이러한 입력 지연 시간의 차이는 지표를 보고할 때 FID 값의 분포를 살펴보는 것의 중요성을 강조합니다. 자세한 내용은 아래 FID 데이터 분석 및 보고 섹션에서 확인할 수 있습니다.

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

FID는 입력 이벤트가 수신된 시간과 메인 스레드가 유휴 상태가 되는 다음 시간 사이의 차이를 측정합니다. 즉, 이벤트 리스너가 등록되지 않은 경우에도 FID가 측정됩니다. 많은 사용자 상호작용이 이벤트 리스너 없이도 실행되기 때문입니다.~ 해야 하다메인 스레드는 유휴 상태여야 합니다.

예를 들어, 다음의 모든 HTML 요소는 사용자 상호작용에 응답하기 전에 메인 스레드에서 진행 중인 작업이 완료될 때까지 기다려야 합니다.

텍스트 필드, 체크박스 및 라디오 버튼(input, textarea)
드롭다운 선택 목록(선택)
링크(a)

왜 첫 번째 입력만 고려되나요?

입력 지연은 사용자 경험을 저하시킬 수 있지만, 주로 다음과 같은 이유로 첫 번째 입력 지연을 측정하는 것이 좋습니다.

첫 번째 입력 지연은 사이트의 반응성에 대한 사용자의 첫인상이며, 첫인상은 사이트의 품질과 안정성에 대한 전반적인 인상을 형성하는 데 중요한 역할을 합니다.
오늘날 웹에서 발생하는 가장 큰 상호작용 문제는 페이지 로딩 중에 발생합니다. 따라서 사이트와의 첫 번째 사용자 상호작용을 개선하는 데 먼저 집중하는 것이 웹의 전반적인 상호작용을 개선하는 데 가장 큰 영향을 미칠 것이라고 생각합니다.
첫 번째 입력 지연이 높은 경우 사이트에 권장하는 솔루션(코드 분할, 사전 로드된 JavaScript 용량 줄이기 등)은 페이지 로드 후 느린 입력 지연을 해결하는 솔루션과 반드시 동일하지는 않습니다. 이러한 지표를 분리함으로써 웹 개발자에게 더욱 정확한 성능 지침을 제공할 수 있습니다.

첫 번째 입력으로 간주되는 것은 무엇입니까?

FID는 페이지 로드 시 반응성을 측정하는 지표입니다. 따라서 FID는 클릭, 탭, 키 입력과 같은 개별 동작에 해당하는 입력 이벤트에만 초점을 맞춥니다.

스크롤 및 확대/축소와 같은 다른 상호작용은 완전히 다른 성능 제약이 있는 순차적 작업입니다(그리고 브라우저는 종종 이러한 작업을 별도의 스레드에서 수행하여 지연 시간을 숨길 수 있습니다).

즉, FID는 다음에 초점을 맞춥니다.RAIL 성능 모델성능 평가에서 스크롤링과 확대/축소는 A(애니메이션)와 더 관련이 있으므로 이러한 작업의 성능 품질은 별도로 평가해야 합니다.

사용자가 귀하의 웹사이트와 전혀 상호 작용하지 않는다면 어떻게 될까요?

모든 사용자가 사이트를 방문할 때마다 사이트와 상호 작용하는 것은 아닙니다. 또한 모든 상호 작용이 FID(Full ID)와 상관관계가 있는 것도 아닙니다(이전 섹션에서 설명했듯이). 또한, 일부 사용자의 첫 상호 작용은 불리한 시간대(메인 스레드가 오랫동안 바쁜 경우)에 발생하는 반면, 다른 사용자의 첫 상호 작용은 유리한 시간대(메인 스레드가 완전히 유휴 상태일 때)에 발생합니다.

즉, 일부 사용자는 FID 값이 없고, 일부는 FID 값이 낮고, 일부는 FID 값이 높을 수 있습니다.

FID를 추적, 보고 및 분석하는 방식은 기존에 사용하던 다른 지표와 매우 다를 수 있습니다. 다음 섹션에서는 모범 사례를 설명합니다.

왜 입력 지연만 고려하나요?

위에서 언급했듯이 FID는 이벤트 처리 프로세스 내의 "지연 시간"만 측정합니다. FID는 이벤트 처리 자체에 걸리는 시간을 측정하지 않으며, 이벤트 핸들러 실행 후 브라우저가 사용자 인터페이스를 업데이트하는 데 걸리는 시간도 측정하지 않습니다.

이 시간은 사용자에게 매우 중요하지만,정말이는 사용자 경험에 영향을 미치지만, 이러한 관행으로 인해 개발자가 해결 방법을 추가하게 되어 사용자 경험이 악화될 수 있으므로 이 지표에는 이러한 시간이 포함되지 않습니다. 즉, 개발자는 이벤트 핸들러 로직을 비동기 콜백(setTimeout() 또는 requestAnimationFrame() 사용)에 캡슐화하여 이벤트 관련 작업과 로직을 분리할 수 있습니다. 최종적으로 지표 점수는 향상될 수 있지만, 사용자는 응답 속도가 느려지는 것을 느낄 수 있습니다.

그러나 FID는 이벤트 대기 시간의 "대기 시간" 부분만 측정하는 반면, 이벤트 수명 주기를 더 많이 추적하려는 개발자는 다음을 사용할 수 있습니다.이벤트 타이밍 API자세한 내용은 다음을 참조하세요.사용자 정의 지표관련 지침.

FID 측정 방법

FID는실제FID는 실제 사용자가 페이지와 상호작용해야 하는 지표입니다. 다음 도구를 사용하여 FID를 측정할 수 있습니다.

측정 도구

JavaScript에서 FID 측정

JavaScript에서 FID를 측정하려면 다음을 사용할 수 있습니다.이벤트 타이밍 API다음 예제에서는 다음을 만드는 방법을 보여줍니다.퍼포먼스 옵저버와서 들어보세요첫 번째 입력항목 및 콘솔에 로그인:

새로운 퍼포먼스 옵저버((항목 목록) => { ~을 위한 (상수 기입 ~의 항목 목록.getEntries()) { 상수 지연 = 기입.처리시작 - 기입.시작시간; 콘솔.통나무('FID 후보:', 지연, 기입); } }).관찰하다({유형: '첫 번째 입력', 버퍼링됨: 진실});

위 예에서 첫 번째 입력 항목의 지연 시간은 해당 항목의 startTime과 processingStart 타임스탬프의 차이를 측정하여 측정합니다. 대부분의 경우 이 차이는 FID 값이지만, 모든 첫 번째 입력 항목을 FID 측정에 사용할 수 있는 것은 아닙니다.

다음 섹션에서는 API가 보고하는 내용과 측정항목을 계산하는 방법의 차이점을 나열합니다.

지표와 API의 차이점

API는 백그라운드 탭에 로드된 페이지에 대한 첫 번째 입력 항목을 전송하지만, FID를 계산할 때 이러한 페이지는 무시되어야 합니다.
첫 번째 입력이 발생하기 전에 페이지가 백그라운드로 이동하는 경우 API는 첫 번째 입력 항목도 전달하지만 이러한 페이지는 FID를 계산할 때 여전히 무시되어야 합니다(페이지가 항상 포그라운드에 있는 경우에만 입력이 고려됩니다).
페이지가 지나갈 때왕복 캐시재개 시 API는 첫 번째 입력 항목을 보고하지 않지만, 이는 사용자의 여러 페이지 방문이기 때문에 이러한 경우 FID를 측정해야 합니다.
API는 iframe의 입력을 보고하지 않지만, FID를 정확하게 측정하려면 입력을 고려해야 합니다. 자식 프레임은 이 API를 사용하여 이러한 입력의 첫 번째 입력 항목을 부모 프레임에 보고하여 집계할 수 있습니다.

개발자는 이러한 모든 뉘앙스를 기억하는 대신 다음을 사용할 수 있습니다.웹 바이탈스 JavaScript 라이브러리FID를 측정하기 위해 라이브러리는 가능한 경우 다음과 같은 차이점을 직접 처리합니다.

수입 {getFID} ~에서 '웹 바이탈'; // FID가 사용 가능해지면 즉시 측정하고 기록합니다. getFID(콘솔.통나무);

JavaScript에서 FID를 측정하는 방법에 대한 전체 예는 getFID의 소스 코드를 참조하세요.

FID 데이터 분석 및 보고

FID 값의 예상되는 변화로 인해 FID를 보고할 때 값의 분포를 살펴보고 상위 백분위수에 집중하는 것이 중요합니다.

모든 핵심 웹 메트릭 임계값선호 백분위수75번째 백분위수이지만, 특히 FID의 경우 임계값을 95~99번째 백분위수로 설정하는 것을 강력히 권장합니다. 이 백분위수는 사용자가 사이트에서 처음 경험하는 특히 나쁜 경험에 해당하므로 가장 개선이 필요한 부분을 알려줍니다.

보고서를 기기 범주 또는 유형별로 분류하더라도 이 작업을 수행해야 합니다. 예를 들어 데스크톱과 모바일에 대해 별도로 보고하는 경우, 가장 주의해야 할 데스크톱 FID 값은 데스크톱 사용자의 95~99번째 백분위수이고, 가장 주의해야 할 모바일 FID 값은 모바일 사용자의 95~99번째 백분위수입니다.

FID를 개선하는 방법

특정 사이트의 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 권장하는 구체적인 옵션을 살펴보세요.가능성.

FID는 실용적인 지표이고 Lighthouse는 실험실 지표 도구이지만 FID 개선을 위한 지침은 다음과 유사합니다.총 차단 시간(TBT)이 실험실 표시기는 동일한 안내 방향을 갖습니다.

FID 개선 방법에 대한 자세한 내용은 다음을 참조하세요.FID 최적화LCP를 개선할 수 있는 다른 개별 성과 기술에 대한 자세한 지침은 다음을 참조하세요.

1/5 - (1 투표)