이제 다음 페인트에 대한 상호작용이 첫 입력 지연을 대체하는 안정적인 Core Web Vitals 측정항목입니다.
드디어 수년간의 작업을 통해 마침내 Interaction to Next Paint (INP)를 안정적인 Core Web Vitals 측정항목으로 만들 준비가 되었습니다. 이는 상호작용 응답성을 측정하는 방식에 있어 큰 진전을 이루고 첫 입력 지연 (FID)의 많은 단점을 해결할 수 있게 되었다는 의미입니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이 게시물에서는 현재 정확히 무엇이 변경되는지 간략하게 요약하고, Chrome 도구에서 FID 지원 중단 및 삭제에 관한 보다 구체적인 일정을 설정하며, INP 문제를 찾고 해결하는 데 도움이 되는 몇 가지 리소스를 공유할 예정입니다.
오늘 변경되는 사항
Chrome 측면에서는 이제 모든 Core Web Vitals 도구에 INP의 안정적인 상태가 반영됩니다(해당하는 경우). 예를 들어 PageSpeed Insights, CrUX Dashboard, Web Vitals 확장 프로그램과 같은 도구는 3개의 Core Web Vitals 측정항목에서 INP를 더욱 눈에 띄게 표시합니다. 특히 PageSpeed Insights에서는 Core Web Vitals 평가 로직이 FID 대신 INP 성능을 평가합니다. 해당하는 Search Console 변경사항에 관해 자세히 알아보려면 Search팀의 블로그 게시물을 참고하세요.
또한 오늘부터 일부 도구에는 측정항목이 더 이상 Core Web Vital이 아니며 삭제된다는 경고로 FID에 관한 지원 중단 알림이 표시될 수 있습니다. 다음 FID 지원 중단 일정 섹션에서는 FID에서 완전히 전환하기 위해 알아야 할 날짜를 설명합니다.
FID 지원 중단 타임라인
이제 Core Web Vitals 측정항목으로 FID가 INP로 대체되었으므로 Chrome에서는 공식적으로 FID 지원을 중단합니다. 즉, Chrome 도구에서 더 이상 FID 가용성을 보장하지 않으며 개발자는 2024년 9월 9일까지 INP로 전환해야 합니다.
이는 Chrome 사용자 환경 보고서 (CrUX) 또는 PageSpeed Insights API의 소비자에게 특히 중요합니다. 이러한 API 중 하나에서 FID 데이터를 처리하는 애플리케이션은 9월 9일까지 INP로 전환해야 서비스 중단이나 서비스 중단을 방지할 수 있습니다. 분명히 말하면, 이는 API 최신 버전의 브레이킹 체인지가 될 것이며 메이저 버전 번호에는 상승이 없습니다.
INP 최적화를 위한 리소스
INP를 처음 살펴보든 대응 전문가든 상관없이 INP 최적화 리소스 모음에서 원하는 정보를 찾을 수 있습니다. 이 상시 문서 컬렉션은 측정항목 자체의 정의, 지역 및 실제 사용자를 대상으로 이를 측정하는 기법, 다양한 사용 사례를 최적화하기 위한 실용적인 조언, 실행 중인 지침을 보여주는 실제 우수사례 목록 등 모든 것을 다룹니다.
다음은 이러한 문서를 사용해 사이트에서 INP 문제를 찾아 해결할 수 있는 일반적인 워크플로입니다.
표준 INP 문서에서 INP가 사용자 상호작용에 대한 반응성을 측정하는 방법을 숙지하세요.
실제 사용자 데이터를 확인하여 사이트의 INP 성능을 평가하세요. 양호하다고 간주되려면 INP 환경의 75% 이상이 200밀리초 이내에 사용자 입력에 반응해야 합니다. 사이트에 이미 양호한 INP가 있더라도 너무 신경 쓰지 마세요.
URL을 PageSpeed Insights에 연결하거나, 웹사이트가 CrUX 데이터 세트에 포함되어 있는 경우 Search Console에서 Core Web Vitals 보고서를 확인하세요.
INP 모니터링을 지원하는지 분석 서비스 제공업체에 문의하세요.
web-vitals.js를 사용하여 자체 INP 솔루션을 실행합니다.
필요한 경우 사이트를 계측하여 사용자 경험에 관한 진단 정보를 수집합니다. 여기에는 사용자가 상호작용한 페이지 요소, 속도가 느린 이유 등 중요한 메타데이터와 기타 유용한 데이터가 포함됩니다. 이러한 정보를 종합하면 개선할 수 있는 가장 큰 기회를 파악하는 데 도움이 됩니다.
Chrome DevTools를 사용하여 느린 상호작용을 로컬에서 재현합니다. 이렇게 하면 내부에서 어떤 일이 일어나고 있는지, 문제가 되는 코드가 무엇인지 정확히 확인할 수 있습니다.
코드를 최적화하여 사용자 상호작용을 처리하는 동안 작업을 최소화합니다.
변경사항을 로컬에서 측정하고 실제 사용자 환경을 모니터링하여 INP 성능이 향상되고 있는지 확인하세요.
이 가이드가 INP 최적화를 위한 올바른 길잡이가 되기를 바랍니다. 진행 중에 문제가 발생하면 언제든지 Stack Overflow에 interaction-to-next-paint 태그가 지정된 질문을 게시하여 도움을 받을 수 있습니다.
INP를 Core Web Vital로 출시하기까지 오랜 시간이 지났습니다. 2021년에 더 나은 응답성 측정항목을 구축하는 방법에 관한 첫 번째 게시물을 돌아보게 되었습니다. 그 이후로 Google은 모든 훌륭한 커뮤니티 의견을 고려했으며, 개발자가 소외된 사용자 경험을 개선하여 궁극적으로 더 나은 웹으로 이어질 수 있는 측정항목을 개발했습니다. 이 측정항목을 개선하는 데 도움을 주시고 응답 상태를 개선하기 위해 노력해 주셔서 감사합니다.