실습에서 느린 상호작용 수동으로 진단

현장 데이터를 실험실로 가져와 수동 테스트를 통해 느린 상호작용의 원인을 재현하고 식별하는 방법을 알아보세요.

Jeremy Wagner

다음 페인트에 대한 상호작용 (INP)을 최적화하는 데 있어 까다로운 부분은 INP가 낮은 원인을 파악하는 것입니다. 기본 스레드에서 많은 작업을 예약하는 서드 파티 스크립트, 큰 DOM 크기, 비용이 많이 드는 이벤트 콜백 등 다양한 원인이 있을 수 있습니다.

INP를 개선하기는 어려울 수 있습니다. 먼저 페이지의 INP를 담당하는 경향이 있는 상호작용을 알아야 합니다. 실제 사용자의 관점에서 볼 때 웹사이트에서 어떤 상호작용이 가장 느린 경향이 있는지 모를 경우 현장에서 느린 상호작용 찾기를 읽어보세요. 지침이 될 필드 데이터가 있으면 실습 도구에서 이러한 특정 상호작용을 수동으로 테스트하여 상호작용이 느린 이유를 파악할 수 있습니다.

필드 데이터가 없는 경우에는 어떻게 해야 하나요?

현장 데이터를 확보하는 것은 어떤 상호작용을 최적화해야 하는지 파악하는 데 드는 시간을 절약해 주므로 매우 중요합니다. 하지만 필드 데이터가 없는 위치에 있을 수도 있습니다. 해당 상황이 현재 상황을 설명하는 경우 조금 더 많은 노력과 다른 접근 방식이 필요하지만 개선을 위한 상호작용을 찾을 수 있습니다.

총 차단 시간 (TBT)은 로드 중 페이지 응답성을 평가하고 INP와 상관관계가 높은 실습 측정항목입니다. 페이지의 TBT가 높으면 페이지가 로드될 때 페이지가 사용자 상호작용에 잘 반응하지 않을 수 있다는 신호일 수 있습니다.

페이지의 TBT를 확인하려면 Lighthouse 중 하나를 사용하세요. 페이지의 TBT가 높으면 페이지 로드 중에 기본 스레드가 너무 많이 사용되어 페이지 수명 주기에서 중요한 시간 동안 페이지의 응답성에 영향을 줄 수 있습니다.

페이지가 로드된 후 느린 상호작용을 찾으려면 웹사이트의 분석에서 이미 파악된 일반적인 사용자 흐름과 같은 다른 유형의 데이터가 필요할 수 있습니다. 예를 들어 전자상거래 웹사이트에서 일하는 경우 일반적인 사용자 플로우는 온라인 장바구니에 상품을 추가하고 결제할 때 사용자가 취하는 행동입니다.

필드 데이터가 있는지 여부에 관계없이 다음 단계는 느린 상호작용을 수동으로 테스트하고 재현하는 것입니다. 느린 상호작용을 재현할 수 있는 경우에만 이를 해결할 수 있기 때문입니다.

실습에서 느린 상호작용 재현

실습에서 수동 테스트를 통해 느린 상호작용을 재현하는 방법에는 여러 가지가 있지만 다음은 시도해 볼 수 있는 프레임워크입니다.

트레이스 기록

Chrome의 성능 프로파일러는 느린 상호작용을 진단하고 문제를 해결하는 데 권장되는 도구입니다. Chrome의 성능 프로파일러에서 상호작용을 프로파일링하려면 다음 단계를 따르세요.

1. 테스트하려는 페이지를 엽니다.
2. Chrome DevTools를 열고 Performance 패널로 이동합니다.
3. 패널의 왼쪽 상단에 있는 Record 버튼을 클릭하여 추적을 시작합니다.
4. 문제를 해결하려는 상호작용을 수행합니다.
5. Record 버튼을 다시 클릭하여 추적을 중지합니다.

프로파일러가 채워지면 먼저 프로파일러 상단의 활동 요약을 확인해야 합니다. 활동 요약에는 기록에서 긴 작업이 발생한 위치에 빨간색 막대가 표시됩니다. 이를 통해 문제가 있는 영역을 빠르게 확대할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome 성능 프로파일러 상단의 활동 요약 활동 플레임 차트 위에 긴 작업이 빨간색으로 강조표시됩니다. 이 경우 중요한 스크립팅 작업이 긴 작업에서 대부분의 작업을 담당했습니다.

활동 요약에서 영역을 드래그하고 선택하여 문제 영역에 빠르게 집중할 수 있습니다. 프로파일러에서 탐색경로 기능을 선택적으로 사용하여 타임라인을 좁히고 관련 없는 활동을 무시할 수 있습니다.

상호작용이 발생한 위치에 초점을 맞추면 Interactions 트랙을 통해 상호작용과 그 아래의 기본 스레드 트랙에서 발생한 활동을 정렬할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome DevTools의 성능 프로파일러에 프로파일링된 상호작용 상호작용 트랙에는 클릭 상호작용에 해당하는 일련의 이벤트가 표시됩니다. 상호작용 추적 항목에는 상호작용 유도를 담당하는 작업이 포함됩니다.

상호작용 트랙에서 반복 위에 마우스를 가져가면 상호작용의 어떤 부분이 가장 오래 진행되었는지에 관한 추가 세부정보를 확인할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 실적 패널의 상호작용 트랙에서 상호작용에 마우스를 가져가면 표시되는 도움말입니다. 도움말에는 상호작용의 각 부분에서 소요된 시간이 표시됩니다.

상호작용의 줄무늬 부분은 상호작용 시간이 200밀리초를 초과한 시간을 나타내며, 이는 '양호' 상태의 상한선입니다. INP에 대한 기준점을 설정합니다. 나열된 상호작용 부분은 다음과 같습니다.

1. 입력 지연: 왼쪽 수염으로 시각화됩니다.
2. 처리 시간: 왼쪽 수염과 오른쪽 수염 사이의 실선 블록으로 시각화됩니다.
3. 프레젠테이션 지연: 오른쪽 수염으로 시각화됩니다.

여기에서는 느린 상호작용을 유발하는 문제를 더 깊이 파헤치는 것이 중요한데, 이 내용은 이 가이드의 뒷부분에서 다룹니다.

Web Vitals Chrome 확장 프로그램

성능 프로파일러는 느린 것으로 알려진 상호작용을 진단하는 데 권장되는 접근 방식이지만, 어떤 상호작용이 문제가 되고 있는지 모르는 경우 느린 상호작용을 식별하는 데 시간이 걸릴 수 있습니다. 한 가지 접근 방식은 웹 바이탈 Chrome 확장 프로그램을 사용하는 것입니다. 이 확장 프로그램은 성능 프로파일러로 이동하기 전에 여러 상호작용을 빠르게 시도하여 문제가 있는 상호작용을 찾는 데 사용할 수 있습니다.

다음 단계를 따르면 Web Vitals 확장 프로그램을 설치하면 DevTools 콘솔에 상호작용 데이터가 표시됩니다.

1. Chrome에서 주소 표시줄 오른쪽에 있는 확장 프로그램 아이콘을 클릭합니다.
2. 드롭다운 메뉴에서 Web Vitals 확장 프로그램을 찾습니다.
3. 오른쪽에 있는 아이콘을 클릭하여 확장 프로그램의 설정을 엽니다.
4. 옵션을 클릭합니다.
5. 표시되는 화면에서 콘솔 로깅 체크박스를 사용 설정한 다음 저장을 클릭합니다.

이 단계를 따른 후 Chrome DevTools에서 콘솔을 열고 페이지에서 의심스러운 상호작용을 테스트합니다. 상호작용하면 진단 데이터가 콘솔에 표시됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Web Vitals 확장 프로그램은 페이지의 INP에 기여하는 상호작용의 자세한 데이터를 Chrome DevTools의 콘솔에 로깅할 수 있습니다.

Web Vitals 확장 프로그램은 느린 상호작용을 식별하는 데 도움이 되고 INP를 디버그하는 데 도움이 되는 세부정보를 제공하지만 느린 상호작용의 원인을 찾기 위해 웹사이트의 프로덕션 코드를 탐색하는 데 필요한 자세한 데이터를 제공하므로 성능 프로파일러를 사용하여 느린 상호작용을 진단해야 할 수 있습니다.

상호작용의 어떤 부분이 느린지 식별하는 방법

상호작용은 입력 지연, 처리 기간 및 프레젠테이션 지연의 세 부분으로 구성됩니다. 페이지의 INP를 낮추기 위해 상호작용을 최적화하는 방법은 페이지에서 가장 많은 시간이 걸리는 부분에 따라 다릅니다.

긴 입력 지연을 식별하는 방법

입력 지연으로 인해 상호작용 지연 시간이 길어질 수 있습니다. 입력 지연은 상호작용의 첫 번째 부분입니다. 운영체제에 사용자 작업이 처음 수신된 시점부터 브라우저가 해당 상호작용의 첫 번째 이벤트 핸들러 콜백 처리를 시작할 수 있는 시점까지의 기간입니다.

Chrome의 성능 프로파일러에서 입력 지연을 식별하는 작업은 상호작용 트랙에서 상호작용을 찾아 수행할 수 있습니다. 왼쪽 수염의 길이는 상호작용의 입력 지연 시간을 나타내며 정확한 값은 성능 프로파일러에서 상호작용 위로 마우스를 가져가면 도움말에서 확인할 수 있습니다.

입력 지연은 0일 수 없지만 입력 지연의 길이는 개발자가 제어할 수 있습니다. 핵심은 콜백이 최대한 빨리 실행되지 않도록 하는 작업이 기본 스레드에서 실행 중인지 파악하는 것입니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 서드 파티 스크립트의 타이머에 의해 실행된 작업으로 인해 입력 지연이 발생했습니다. 상호작용 트랙에 표시된 상호작용에서 수염의 왼쪽 부분은 입력 지연을 시각화합니다.

이전 그림에서는 사용자가 페이지와 상호작용하려고 할 때 서드 파티 스크립트의 작업이 실행되어 입력 지연이 연장됩니다. 입력 지연이 길어지면 상호작용 지연 시간에 영향을 미치므로 페이지의 INP에 영향을 미칠 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> 자세히 알아보기: 긴 입력 지연을 해결하는 방법에 관한 자세한 내용은 입력 지연을 식별하고 줄이는 방법을 참고하세요.

긴 처리 기간을 식별하는 방법

이벤트 콜백은 입력 지연 직후에 실행되며, 완료되는 데 걸리는 시간을 처리 기간이라고 합니다. 이벤트 콜백이 너무 오래 실행되면 브라우저에서 다음 프레임을 표시하지 못하게 되어 상호작용의 총 지연 시간이 크게 늘어날 수 있습니다. 퍼스트 파티 또는 서드 파티 자바스크립트의 계산 비용이 비싸기 때문에 처리 시간이 길어질 수 있으며, 경우에 따라서는 둘 다일 수도 있습니다. 성능 프로파일러에서 이는 상호작용 트랙의 상호작용의 실선 부분으로 표현됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome DevTools의 성능 프로파일러에 표시된 대로 클릭 상호작용에 대한 응답으로 실행되는 이벤트 콜백 높은 처리 시간에 유의하세요.

특정 상호작용의 트레이스에서 다음을 관찰하면 비용이 많이 드는 이벤트 콜백을 찾을 수 있습니다.

1. 이벤트 콜백과 관련된 작업이 장기 작업인지 확인합니다. 실습 설정에서 장기 작업을 더 안정적으로 표시하려면 성능 패널에서 CPU 제한을 사용 설정하거나, 낮은 등급에서 중간 등급의 Android 기기를 연결하고 원격 디버깅을 사용해야 할 수 있습니다.
2. 이벤트 콜백을 실행하는 작업이 긴 작업인 경우, 호출 스택에서 항목의 오른쪽 상단에 빨간색 삼각형이 있는 이벤트 핸들러 항목(예: Event: click과 같은 이름을 가진 항목)을 찾습니다.

상호작용 처리 시간을 줄이려면 다음 전략 중 하나를 사용해 보세요.

1. 가능한 한 적은 작업을 수행합니다. 비용이 많이 드는 이벤트 콜백에서 발생하는 모든 작업이 반드시 필요한가요? 그렇지 않은 경우 가능하면 해당 코드를 완전히 삭제하거나 삭제할 수 없다면 실행을 나중 시점으로 연기하는 것이 좋습니다. 프레임워크 기능을 활용하면 도움이 됩니다. 예를 들어 React의 기억 기능은 props가 변경되지 않은 경우 구성요소에 관한 불필요한 렌더링 작업을 건너뛸 수 있습니다.
2. 이벤트 콜백에서 렌더링되지 않는 작업을 이후 시점으로 연기합니다. 장기 작업은 기본 스레드에 제공하여 분할될 수 있습니다. 기본 스레드에 양보할 때마다 현재 작업의 실행을 종료하고 나머지 작업을 별도의 작업으로 나눕니다. 이렇게 하면 렌더러가 이벤트 콜백에서 이전에 수행된 사용자 인터페이스 업데이트를 처리할 수 있습니다. React를 사용하는 경우 React의 전환 기능을 사용하면 됩니다.

이러한 전략을 사용하면 이벤트 콜백을 최적화하여 실행에 걸리는 시간을 줄일 수 있습니다.

프레젠테이션이 지연되는 이유를 파악하는 방법

긴 입력 지연과 처리 기간이 INP 저하의 유일한 원인은 아닙니다. 간혹 소량의 이벤트 콜백 코드에 대한 응답으로 발생하는 렌더링 업데이트에는 많은 비용이 들 수 있습니다. 브라우저에서 상호작용 결과를 반영하기 위해 사용자 인터페이스에 시각적 업데이트를 렌더링하는 데 걸리는 시간을 프레젠테이션 지연이라고 합니다.

<ph type="x-smartling-placeholder">

</ph> 중요: 렌더링 성능 가이드는 브라우저가 페이지를 렌더링하는 방식을 이해하는 데 유용한 입문서입니다. 픽셀의 수명은 Chromium 기반 브라우저에서 렌더링이 작동하는 방식에 대해 더 자세히 다룹니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">

</ph> Chrome의 성능 프로파일러에 표시된 렌더링 작업 오른쪽 수염은 프레젠테이션 지연의 길이를 시각화합니다.

렌더링 작업은 대부분 스타일 재계산, 레이아웃, 페인트, 합성과 같은 작업으로 구성되며 프로파일러의 플레임 차트에서 보라색과 녹색 블록으로 표현됩니다. 총 표시 지연은 상호작용 트랙에서 상호작용의 오른쪽 수염으로 표시됩니다.

<ph type="x-smartling-placeholder">

</ph> 중요: 비용이 많이 드는 렌더링 작업으로 인해 느린 상호작용을 프로파일링할 때는 성능 프로파일러 상단에서 Screenshots 체크박스를 사용 설정해야 합니다. 이렇게 하면 사용자 인터페이스 업데이트를 기본 스레드의 상응하는 렌더링 작업과 함께 정렬할 수 있습니다.

높은 상호작용 지연 시간을 유발할 수 있는 모든 원인 중에서 프레젠테이션 지연은 문제를 해결하고 해결하기가 가장 까다로울 수 있습니다. 과도한 렌더링 작업의 원인은 다음과 같습니다.

• 큰 DOM 크기. 페이지의 표시를 업데이트하는 데 필요한 렌더링 작업은 종종 페이지의 DOM 크기와 함께 증가합니다. 자세한 내용은 큰 DOM 크기가 상호작용에 미치는 영향과 이와 관련하여 취할 수 있는 조치를 참고하세요.
• 강제 리플로우. 이는 JavaScript의 요소에 스타일 변경사항을 적용한 다음 즉시 해당 작업의 결과를 쿼리할 때 발생합니다. 결과적으로 브라우저는 다른 작업을 수행하기 전에 레이아웃 작업을 수행해야 하므로 브라우저가 업데이트된 스타일을 반환할 수 있습니다. 강제 리플로우 방지에 관한 자세한 내용과 도움말은 크고 복잡한 레이아웃 및 레이아웃 스래싱 피하기를 참고하세요.
• requestAnimationFrame 콜백에서 과도하거나 불필요한 작업 requestAnimationFrame() 콜백은 이벤트 루프의 렌더링 단계에서 실행되며 다음 프레임이 표시되기 전에 완료되어야 합니다. 사용자 인터페이스를 변경하지 않는 작업을 하는 데 requestAnimationFrame()를 사용하는 경우 다음 프레임이 지연될 수 있다는 점을 기억하세요.
• ResizeObserver 콜백을 참조하세요. 이러한 콜백은 렌더링 전에 실행되며, 콜백의 작업에 비용이 많이 드는 경우 다음 프레임의 표시를 지연시킬 수 있습니다. 이벤트 콜백과 마찬가지로 다음 프레임에 필요하지 않은 로직은 지연합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> 중요: Chrome DevTools에서 타임라인: 이벤트 시작자 실험을 사용 설정하면 문제를 더 쉽게 해결할 수 있습니다. 이 실험을 사용 설정하면 스타일 재계산 작업에서 시작한 자바스크립트 작업으로 화살표가 그려집니다. 이 실험을 사용 설정하려면 Chrome DevTools 설정으로 이동하여 왼쪽 메뉴에서 실험을 클릭한 다음 타임라인: 이벤트 시작자라고 표시된 체크박스를 클릭하고 DevTools를 다시 시작합니다.

느린 상호작용을 재현할 수 없다면 어떻게 해야 하나요?

현장 데이터에 따르면 특정 상호작용은 느리지만 실습에서 문제를 직접 재현할 수 없는 경우에는 어떻게 해야 할까요? 여기에는 몇 가지 이유가 있습니다.

첫째, 상호 작용을 테스트할 때의 상황은 하드웨어와 네트워크 연결에 따라 달라집니다. 인터넷 속도가 빠른 기기를 사용하고 있을 수도 있지만 그렇다고 해서 사용자가 그렇다고 할 수는 없습니다. 다음 세 가지 중 한 가지 방법을 시도해 볼 수 있습니다.

1. 실제 Android 기기가 있다면 원격 디버깅을 사용하여 호스트 머신에서 Chrome DevTools 인스턴스를 열고 느린 상호작용을 재현해 봅니다. 휴대기기는 노트북이나 데스크톱 컴퓨터만큼 빠르지 않은 경우가 많으므로 이러한 기기에서는 느린 상호작용이 더 쉽게 관찰될 수 있습니다.
2. 실제 기기가 없다면 Chrome DevTools에서 CPU 제한 기능을 사용 설정합니다.

또 다른 원인은 페이지와 상호작용하기 전에 페이지가 로드되기를 기다리고 있지만 사용자는 그러지 않기 때문일 수 있습니다. 빠른 네트워크를 사용한다면 네트워크 제한을 사용 설정하여 느린 네트워크 조건을 시뮬레이션한 다음, 페인트되는 즉시 페이지와 상호작용하세요. 시작 시 기본 스레드가 가장 붐비는 경우가 많고 이 기간 동안 테스트하면 사용자가 경험하는 환경을 파악할 수 있으므로 이렇게 해야 합니다.

INP 문제 해결은 반복적인 프로세스임

긴 상호작용 지연 시간 및 낮은 INP의 원인이 되는 원인을 찾아내려면 많은 노력이 필요하지만, 원인을 정확히 찾아낼 수 있다면 이제 절반 정도 남았을 것입니다. 잘못된 INP 문제를 해결하기 위한 체계적인 접근 방식을 따르면 문제의 원인을 확실하게 파악하여 더 빠르게 올바른 해결책을 도출할 수 있습니다. 검토 방법:

• 필드 데이터를 사용하여 느린 상호작용을 찾습니다.
• 실험실에서 문제가 있는 필드 상호작용을 수동으로 테스트하여 재현 가능한지 확인합니다.
• 긴 입력 지연, 값비싼 이벤트 콜백 또는 값비싼 렌더링 작업 때문인지 확인합니다.
• 반복

이 중 마지막 항목이 가장 중요합니다. 페이지 성능을 개선하기 위해 수행하는 다른 대부분의 작업과 마찬가지로 INP 문제 해결 및 개선은 주기적인 과정입니다. 느린 상호 작용 하나를 고치면 다음 상호 작용으로 이동하고 결과가 나타날 때까지 반복합니다.