DEVOCEAN

시작하는 글

안녕하세요 웹 프론트엔드 개발자 Felix입니다.

지난번 글에서는 왜 웹 프론트엔드 성능 최적화를 해야하는지 말씀드렸고, 웹 성능 지표인 Web Core Vitals에 대해서 말씀드렸습니다. 성능 최적화 방법을 다루기 전에 Web Core Vitals에서 바뀔 성능 지표에 대해 먼저 포스팅하도록 하겠습니다.

(https://devocean.sk.com/blog/techBoardDetail.do?ID=164863)

웹 프론트엔드 성능 최적화 지표 활용시 구글에서 발표한 Web Core Vital이라는 지표를 사용하고 있습니다. Web Core Vitals 지표는 Lighthouse, Page Speed Insights 등 구글의 성능 측정도구의 지표로 사용되어지고 있고, 국내외 많은 웹 프론트엔드 개발자들이 Web Core Viitals가 기반이 되는 구글의 성능 측정도구를 활용하고 있습니다.

이 Web Core Vitals는 2020년 초에 구글에서 도입한 성능 지표입니다.

그러나, FID 지표에 대한 제한사항이 발견되었고,

구글은 2022년 5월부터 INP(Interaction to Next Paint)라는 지표를 만들어 테스트하였고, 2024년 3월에 FID를 INP라는 지표가 대체할 예정입니다.

FID란

FID란 웹 페이지 로드이후 사용자가 클릭, 키입력 등 인터렉션할 때 소요되는 시간(이벤트 입력 지연값)입니다.

위처럼 사이트 최초 입력 지연 값이 100ms이하면 Web Core Vitals 기준 Good(좋은 지표)으로 평가하고 있습니다.

구글에서 Web Core Vitals에 FID 지표를 넣은 이유는 FID가 웹사이트에 대한 사용자의 첫인상이기 때문이라고 말했습니다.

FID의 한계점

2020년 구글에서 Web Core Vitals 지표 발표 이후 Web Core Vitals의 3대 지표 중 하나인 FID 지표에는 한계점이 존재했습니다.

즉, 사용자는 첫번째 입력값 뿐만 아니라 사용자의 모든 입력 반응성을 반영하지 못했습니다.

이에 구글에서는 서두에 말씀드렸듯이 FID를 포괄하는 새로운 지표를 만들어 웹 성능 지표인 Web Core Vitals를 개선하고자 했습니다.

INP의 도입 (INP : Interaction to Next Paint)

위와 같은 FID의 한계점 때문에 구글은 2024년 3월에 FID라는 지표를 대체하여 INP라는 새로운 지표를 사용하려고 합니다.

INP란 사용자가 페이지를 방문하여 전체 기간동안 발생하는 모든 클릭, 탭, 키보드의 상호작용을 관찰하여 사용자 상호작용에 대한 페이지의 전반적인 응답성을 평가하는 측정지표입니다.

첫번째 입력뿐만 아니라 웹사이트 사용자의 입력 반응성을 고려하는게 필요했고, 이벤트 지연시간 뿐만 아니라 전체시간 확인이 필요했습니다.

그리고 이벤트 입력시간 뿐만 아니라 엔드투엔드로 사용자의 시간까지 확인하려고 합니다.

INP는 마우스 클릭 혹은 터치스크린의 경우 기기를 탭하는 경우, 키보드 입력 값의 경우의 유형만 관찰됩니다

INP는 200ms이내의 경우 측정대상인 웹사이트가 좋은 INP 수치를 가졌다고 볼 수 있습니다.

FID보다 폭넓은 범위를 측정하는 수치이기 때문에 개선 했을시 성능 개선에 좋은 영향을 줄 것이라고 기대됩니다.

마치는 글

이번에는 구글에서 제시하는 웹 프론트엔드 성능 지표인 Web Core Vitals에서 내년초 바뀌게 될 성능 지표에 대해서 이야기했습니다.

다음에는 웹 성능 측정 최적화에서 널리 사용하고 있고, 제가 현업에서 적용하였던 웹 성능 측정방법에 대해서 공유하도록 하겠습니다.

읽어주셔서 감사합니다.

Reference

https://web.dev/articles/fid

https://developers.google.com/search/blog/2023/05/introducing-inp

https://web.dev/articles/better-responsiveness-metric