[Korean FE Article] 크롬 개발자 도구로 INP를 개선하는 방법
글 링크 : https://emewjin.github.io/chrome-dev-tool-inp-performance/
소개
평소에 크롬 개발자 도구에 표시되는 내용을 어떻게 분석하고 인사이트를 얻을 수 있는지, 다른 사람들은 어떻게 활용하는지 궁금했던 분들 계실까요? 귀여운 광고가 섞인 짧은 글이지만, 크롬 개발자 도구의 성능(Performance) 탭을 이용해 INP(Interaction to Next Paint) 지표를 확인하고 개선 방향을 도출하는 과정을 예시와 함께 설명하는 글이 있어 소개해드립니다.
마침 이번 달부터 INP가 FID를 대체하여 크롬 코어 웹 바이탈 지표로 활용되니, 한 번 확인해보시는 것도 좋겠습니다 :)
목차
크롬 개발자 도구에서 페이지 인터랙션의 INP를 측정하는 방법
CPU 스로틀링을 활성화 해보세요
개발자 도구를 이용해 INP 분석하기
초기 페이지 로딩 중 입력 지연 개선하기
최적화를 위해 실제 사용자 데이터를 확보하세요