새롭게 코어 웹 바이탈 측정 기준이 된 INP는 무엇이고 왜 FID를 대체하게 되었나.
목차 펼치기
머리말
머리말
2024년 3월 12일, 공식적으로 코어 웹 바이탈 측정 항목 중 하나인 FID를 INP가 대체한다. 이제 코어 웹 바이탈 측정 항목은 LCP, CLS, INP가 되었는데 INP가 무엇이고 왜 변경되었는지 공식 문서를 통해 알아보았다.
![원본 이미지 : 만화 원피스 중](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F9c24e014-2151-4203-b795-366eff6e292e%2FGroup_1.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123110Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D8ce3d3dccb8771214bafb4d20156461bdad2066b0263e11a5d0e183a620dde4b%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=2fa6e796-65da-4c54-8a5f-d559980373c2&cache=v2)
원본 이미지 : 만화 원피스 중
코어 웹 바이탈이란
코어 웹 바이탈이란
코어 웹 바이탈(Core Web Vital)은 웹 페이지에 대한 사용자 경험을 평가하기 위해 구글이 제시한 항목들 중 핵심 지표를 말한다. 로드, 상호작용, 시각적 안정성 부분을 평가하고 그 결과는 SEO에도 중요한 영향을 미친다. 이 항목에는 실제로 큰 영향을 미치고, 대부분 사이트와 관련이 있으며, 개발자가 현실적으로 구현 가능한 권장사항을 담고자 하는 것이 목표라고 한다.
![출처 : web.dev](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F08dfba1c-33b0-441b-951f-ec3d38e675f7%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123110Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D0c6a9c1fa91efd96dc96e513a4892a9adebbbfddc182b92f1a42e88a15197f34%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=8cd60139-f819-488f-b49b-d98ce2d33a54&cache=v2)
출처 : web.dev
사용자 경험을 위해 필수적인 최신의 코어 웹 바이탈 집합을 Stable Metrics라고 한다. 이외에도 테스트 결과와 커뮤니티의 의견에 따라 언제든 코어 웹 바이탈의 하나로 포함될 수 있는 실험 중이거나(Experimental) 대기 중인(Pending) 측정 항목들도 존재한다.
, Search Console 등을 통해 측정할 수도 있고, 크롬 브라우저의 확장 프로그램(
web-vitals-extension)을 통해 측정할 수도 있다.
무엇이 변경되나?
무엇이 변경되나?
![출처 : web.dev](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fad26b62f-6caa-43ad-9a80-b29df0881024%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123110Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D04bded367f816a2f79c86964cd649f374aa898da62b484ae1ca3a74d599eff90%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=bdf0097f-389a-4951-8902-38d77816af13&cache=v2)
출처 : web.dev
위 사진은 INP가 코어 웹 바이탈이 되기까지의 여정이다. 2022년부터 테스트를 시작해 2023년 대기 상태로 전환되고, 2024년 3월 12일 공식적으로 기존의 코어 웹 바이탈 항목 중 하나인 FID를 대체하게 되었다. 이제 이후의 구글 Search Console 보고서에는 FID 항목이 사라지고 INP 항목이 추가된다.
아래 그림은 크롬 브라우저에서 사용자 이벤트를 처리하는 과정에 대한 그림인데, 이를 통해 FID와 INP의 차이를 더 명확히 구분하여 측정 기준이 왜, 어떻게 변경되는 지를 이해할 수 있다.
![출처 : web.dev](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Faf546e37-e0a9-413a-9c69-4f365dfe4896%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123110Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D12802838887dc95b268aa079d0ebd08202911c74ccde3d8f74aa703256d68ea5%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=2b18b5ad-2de3-4181-b7e6-4205aae2a813&cache=v2)
출처 : web.dev
사용자 입력 발생(이벤트
timestamp
)
브라우저가 이벤트가 속한 HTML 프레임을 찾은 후 적절한 렌더 프로세스로 이벤트 전송
렌더기가 이벤트 수신 후 큐에 추가
렌더러가 핸들러를 실행하여 이벤트의 동기적 작업 처리
비동기 작업은 대기열에 추가
이벤트 핸들러 결과가 반영된 프레임이 화면에 페인트
여기서
FID는 1~3단계 사이의 시간을
이벤트 지연 시간으로해서 측정하고,
INP는 1~5단계 사이의 시간을
이벤트 소요 시간으로해서 측정한다.
FID는 왜 물러나게 되었나?
FID는 왜 물러나게 되었나?
FID는 페이지의 첫 번째 사용자 상호작용에 대한 반응까지의 시간을 측정한다. 즉,
메인 스레드가 다른 작업으로 인해 점유되어 사용자 상호작용 처리가 지연되는 시간을 측정하는 것이다. 이는 아래의 두 가지 한계를 가지기 때문에 INP 지표로 대체되었다.
첫 번째 상호작용만 측정하기 때문에 페이지 전체에 걸친 모든 상호작용을 나타낼 수 없다.
지연 시간만 측정하기 때문에 실제 이벤트가 처리되고 사용자한테 반영되기까지의 시간을 측정할 수 없다.
INP(Interaction to Next Paint)란?
INP(Interaction to Next Paint)란?
사용자 응답성을 포괄적으로 측정할 수 있는 지표로 등장했다.
모든 상호작용을 고려해 페이지의 전체 수명 주기 중 가장 느린 상호작용중 하나를 보고하며, 지연 부분이 아닌 상호작용 후 이벤트 핸들러를 통해
다음 프레임을 그릴 때까지 소요된 전체 시간을 측정한다.
각 상호작용 유형의 DOM 이벤트는 여기서 확인할 수 있다.
기존의 FID 개선은 INP 개선과도 이어지기 때문에 FID를 고려해 진행한 작업은 이 지표에서도 좋은 효과를 보일 것이다. 하지만 텍스트 편집기나 게임이 있는 사이트의 경우 매우 많은 상호작용이 발생할 수 있으므로 이 수치를 개선하는 게 쉽지 않을 수도 있겠다.
입력 지연 시간 : 사용자가 페이지와 상호작용을 시작하고, 이벤트 콜백이 시작되기 전까지의 시간
처리 시간 : 이벤트 콜백이 완료되기까지 걸리는 시간
프레젠테이션 지연 시간 : 브라우저에서 다음 프레임을 표시하는 데 걸리는 시간
구글에서는 INP 지표 값으로 200ms 이하가 되는 것을 권장하고 있다. 따라서 상호작용 시간을 줄여 지표를 향상하기 위해서는 각 부분의 최적화가 필요 하다. 더욱 자세한 내용은
Optimize Interaction to Next Paint문서를 참고할 수 있다.
추가. 코어 웹 바이탈 측정 지표 정리
추가. 코어 웹 바이탈 측정 지표 정리
INP(Interaction to Next Paint)
INP(Interaction to Next Paint)
을 측정하는 기준으로, 모든 상호작용 중 다음 프레임이 그려질 때까지 걸린 가장 느린 상호작용 하나를 측정한다. 200ms 이하를 권장한다.
FID(First Input Delay)
FID(First Input Delay)
을 측정하는 기준으로, 사용자가 처음 상호작용한 시점부터 브라우저가 실제로 이벤트 핸들러 처리를 시작할 수 있기까지의 시간을 측정한다. 100ms 이하를 권장한다.
CLS(Cumulative Layout Shift)
CLS(Cumulative Layout Shift)
을 측정하는 기준으로, DOM 요소의 위치가 변경될 때마다 발생하며 움직인 정도를 측정한다. 구글의 계산에 따라 점수로 환산하며 0.1 이하를 권장한다.
LCP(Largest Contentful Paint)
LCP(Largest Contentful Paint)
성능을 측정하는 기준으로, 페이지 로드가 시작된 후 가장 큰 콘텐츠가 그려지기까지의 시간을 측정한다. 2.5s 이하를 권장한다.