현장 데이터를 실험실로 가져와 수동 테스트를 통해 느린 상호작용의 원인을 재현하고 식별하는 방법을 알아보세요.
다음 페인트에 대한 상호작용 (INP)을 최적화하는 데 있어 까다로운 부분은 INP가 낮은 원인을 파악하는 것입니다. 기본 스레드에서 많은 작업을 예약하는 서드 파티 스크립트, 큰 DOM 크기, 비용이 많이 드는 이벤트 콜백 등 다양한 원인이 있을 수 있습니다.
INP를 개선하기는 어려울 수 있습니다. 먼저 페이지의 INP를 담당하는 경향이 있는 상호작용을 알아야 합니다. 실제 사용자의 관점에서 볼 때 웹사이트에서 어떤 상호작용이 가장 느린 경향이 있는지 모를 경우 현장에서 느린 상호작용 찾기를 읽어보세요. 지침이 될 필드 데이터가 있으면 실습 도구에서 이러한 특정 상호작용을 수동으로 테스트하여 상호작용이 느린 이유를 파악할 수 있습니다.
필드 데이터가 없는 경우에는 어떻게 해야 하나요?
현장 데이터를 확보하는 것은 어떤 상호작용을 최적화해야 하는지 파악하는 데 많은 시간을 절약할 수 있으므로 매우 중요합니다. 하지만 필드 데이터가 없는 위치에 있을 수도 있습니다. 해당 상황이 현재 상황을 설명하는 경우 조금 더 많은 노력과 다른 접근 방식이 필요하지만 개선을 위한 상호작용을 찾을 수 있습니다.
총 차단 시간 (TBT)은 로드 중 페이지 응답성을 평가하며 INP와 상관관계가 높은 실습 측정항목입니다. 페이지의 TBT가 높다면 페이지가 로드될 때 페이지가 사용자 상호작용에 잘 반응하지 않을 수 있다는 신호일 수 있습니다.
페이지의 TBT를 확인하려면 Lighthouse 중 하나를 사용하세요. 페이지의 TBT가 높으면 페이지 로드 중에 기본 스레드가 너무 많이 사용되어 페이지 수명 주기에서 중요한 기간 동안 페이지의 응답성에 영향을 줄 수 있습니다.
페이지가 로드된 후 느린 상호작용을 찾으려면 웹사이트의 분석에서 이미 파악된 일반적인 사용자 흐름과 같은 다른 유형의 데이터가 필요할 수 있습니다. 예를 들어 전자상거래 웹사이트에서 작업하는 경우 일반적인 사용자 플로우는 온라인 장바구니에 상품을 추가하고 결제할 때 사용자가 취하는 행동입니다.
필드 데이터가 있는지 여부에 관계없이 다음 단계는 느린 상호작용을 수동으로 테스트하고 재현하는 것입니다. 느린 상호작용을 재현할 수 있는 경우에만 이를 해결할 수 있기 때문입니다.
실습에서 느린 상호작용 재현
실습에서 수동 테스트를 통해 느린 상호작용을 재현하는 방법에는 여러 가지가 있지만 다음은 시도해 볼 수 있는 프레임워크입니다.
트레이스 기록
Chrome의 성능 프로파일러는 느린 상호작용을 진단하고 문제를 해결하는 데 권장되는 도구입니다. Chrome의 성능 프로파일러에서 상호작용을 프로파일링하려면 다음 단계를 따르세요.
- 테스트하려는 페이지를 엽니다.
- Chrome DevTools를 열고 Performance 패널로 이동합니다.
- 패널의 왼쪽 상단에 있는 Record 버튼을 클릭하여 추적을 시작합니다.
- 문제를 해결하려는 상호작용을 수행합니다.
- Record 버튼을 다시 클릭하여 추적을 중지합니다.
프로파일러가 채워지면 먼저 프로파일러 상단의 활동 요약을 확인해야 합니다. 활동 요약에는 기록에서 긴 작업이 발생한 위치에 빨간색 막대가 표시됩니다. 이를 통해 문제가 있는 영역을 빠르게 확대할 수 있습니다.
![Chrome DevTools의 성능 패널 상단에 표시되는 활동 요약입니다. 표시되는 활동은 대부분 긴 작업을 유발하는 JavaScript에서 비롯되며, Flame Chart 위에 빨간색으로 강조되어 있습니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/a-screenshot-the-activit-2f86d26e58372.png?authuser=2&hl=ko)
활동 요약에서 영역을 드래그하고 선택하여 문제 영역에 빠르게 집중할 수 있습니다. 프로파일러에서 탐색경로 기능을 선택적으로 사용하여 타임라인을 좁히고 관련 없는 활동을 무시할 수 있습니다.
상호작용이 발생한 위치에 초점을 맞추면 Interactions 트랙을 통해 상호작용과 그 아래의 기본 스레드 트랙에서 발생한 활동을 정렬할 수 있습니다.
![Chrome DevTools의 성능 패널에 시각화된 상호작용입니다. 기본 스레드 트랙 위의 상호작용 트랙은 상호작용 기간을 표시하며, 상호작용 기간은 그 아래의 기본 스레드 활동과 함께 정렬할 수 있습니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/devtools-interaction.png?authuser=2&hl=ko)
상호작용 트랙에서 반복 위에 마우스를 가져가면 상호작용의 어떤 부분이 가장 오래 진행되었는지에 관한 추가 세부정보를 확인할 수 있습니다.
![Chrome DevTools의 성능 패널에 표시된 상호작용에 대한 마우스 오버 도움말 도움말에는 상호작용의 입력 지연, 처리 기간, 프레젠테이션 지연 등 상호작용에 소요된 시간과 상호작용 시간이 표시됩니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/devtools-whiskers.png?authuser=2&hl=ko)
상호작용의 줄무늬 부분은 상호작용 시간이 200밀리초를 초과한 시간을 나타내며, 이는 '양호' 상태의 상한선입니다. INP에 대한 기준점을 설정합니다. 나열된 상호작용 부분은 다음과 같습니다.
여기서는 느린 상호작용을 유발하는 문제를 더 깊이 파헤치는 것이 중요한데, 이 내용은 이 가이드의 뒷부분에서 다룹니다.
Web Vitals Chrome 확장 프로그램
성능 프로파일러는 느린 것으로 알려진 상호작용을 진단하는 데 권장되는 접근 방식이지만, 어떤 상호작용이 문제가 되고 있는지 모르는 경우 느린 상호작용을 식별하는 데 시간이 걸릴 수 있습니다. 한 가지 접근 방식은 웹 바이탈 Chrome 확장 프로그램을 사용하는 것입니다. 이 확장 프로그램은 성능 프로파일러로 이동하기 전에 여러 상호작용을 빠르게 시도하여 문제가 있는 상호작용을 찾는 데 사용할 수 있습니다.
다음 단계를 따르면 Web Vitals 확장 프로그램을 설치하면 DevTools 콘솔에 상호작용 데이터가 표시됩니다.
- Chrome에서 주소 표시줄 오른쪽에 있는 확장 프로그램 아이콘을 클릭합니다.
- 드롭다운 메뉴에서 Web Vitals 확장 프로그램을 찾습니다.
- 오른쪽에 있는 아이콘을 클릭하여 확장 프로그램의 설정을 엽니다.
- 옵션을 클릭합니다.
- 표시되는 화면에서 콘솔 로깅 체크박스를 사용 설정한 다음 저장을 클릭합니다.
이 단계를 따른 후 Chrome DevTools에서 콘솔을 열고 페이지에서 의심스러운 상호작용을 테스트합니다. 상호작용하면 진단 데이터가 콘솔에 표시됩니다.
![Web Vitals 확장 프로그램의 INP 로그가 Chrome DevTools용 콘솔에 표시되는 방식입니다. 상호작용 중 가장 오래 걸린 부분을 포함한 자세한 로깅 및 다양한 Performance API의 세부 기여 분석 데이터를 사용할 수 있습니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/web-vitals-console.png?authuser=2&hl=ko)
Web Vitals 확장 프로그램은 느린 상호작용을 식별하는 데 도움이 되고 INP를 디버그하는 데 도움이 되는 세부정보를 제공하지만 느린 상호작용의 원인을 찾기 위해 웹사이트의 프로덕션 코드를 탐색하는 데 필요한 자세한 데이터를 제공하므로 성능 프로파일러를 사용하여 느린 상호작용을 진단해야 할 수 있습니다.
상호작용의 어떤 부분이 느린지 식별하는 방법
상호작용은 입력 지연, 처리 기간 및 프레젠테이션 지연의 세 부분으로 구성됩니다. 페이지의 INP를 낮추기 위해 상호작용을 최적화하는 방법은 페이지에서 가장 많은 시간이 걸리는 부분에 따라 다릅니다.
긴 입력 지연을 식별하는 방법
입력 지연으로 인해 상호작용 지연 시간이 길어질 수 있습니다. 입력 지연은 상호작용의 첫 번째 부분입니다. 운영체제에 사용자 작업이 처음 수신된 시점부터 브라우저가 해당 상호작용의 첫 번째 이벤트 핸들러 콜백 처리를 시작할 수 있는 시점까지의 기간입니다.
Chrome의 성능 프로파일러에서 입력 지연을 파악하려면 상호작용 트랙에서 상호작용을 찾으세요. 왼쪽 수염의 길이는 상호작용의 입력 지연 시간을 나타내며 정확한 값은 성능 프로파일러에서 상호작용 위로 마우스를 가져가면 도움말에서 확인할 수 있습니다.
입력 지연은 0일 수 없지만 입력 지연의 길이는 개발자가 제어할 수 있습니다. 핵심은 콜백이 최대한 빨리 실행되지 않도록 하는 작업이 기본 스레드에서 실행 중인지 파악하는 것입니다.
![Chrome의 성능 패널에 표시된 입력 지연입니다. 서드 파티 스크립트에서 실행되는 타이머로 인해 입력 지연이 증가하기 때문에 이벤트 콜백보다 상당히 앞서 상호작용이 시작됩니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/input-delay.png?authuser=2&hl=ko)
이전 그림에서는 사용자가 페이지와 상호작용하려고 할 때 서드 파티 스크립트의 작업이 실행되어 입력 지연이 연장됩니다. 입력 지연이 길어지면 상호작용 지연 시간에 영향을 미치므로 페이지의 INP에 영향을 미칠 수 있습니다.
긴 처리 기간을 식별하는 방법
이벤트 콜백은 입력 지연 직후에 실행되며, 완료되는 데 걸리는 시간을 처리 기간이라고 합니다. 이벤트 콜백이 너무 오래 실행되면 브라우저에서 다음 프레임을 표시하지 못하게 되어 상호작용의 총 지연 시간이 크게 늘어날 수 있습니다. 퍼스트 파티 또는 서드 파티 자바스크립트의 계산 비용이 비싸기 때문에 처리 시간이 길어질 수 있으며, 경우에 따라서는 둘 다일 수도 있습니다. 성능 프로파일러에서 이는 상호작용 트랙의 상호작용의 실선 부분으로 표현됩니다.
![Chrome 성능 패널의 이벤트 콜백 작업 묘사 타임라인의 상호작용 위에 마우스를 가져가면 긴 처리 시간이 표시됩니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/processing-duration.png?authuser=2&hl=ko)
특정 상호작용의 트레이스에서 다음을 관찰하면 비용이 많이 드는 이벤트 콜백을 찾을 수 있습니다.
- 이벤트 콜백과 관련된 작업이 장기 작업인지 확인합니다. 실습 설정에서 장기 작업을 보다 안정적으로 표시하려면 성능 패널에서 CPU 제한을 사용 설정하거나, 낮은 등급에서 중간 등급의 Android 기기를 연결하고 원격 디버깅을 사용해야 할 수 있습니다.
- 이벤트 콜백을 실행하는 작업이 긴 작업인 경우, 호출 스택에서 항목의 오른쪽 상단에 빨간색 삼각형이 있는 이벤트 핸들러 항목(예: Event: click과 같은 이름을 가진 항목)을 찾습니다.
상호작용 처리 시간을 줄이려면 다음 전략 중 하나를 사용해 보세요.
- 가능한 한 적은 작업을 수행합니다. 비용이 많이 드는 이벤트 콜백에서 발생하는 모든 작업이 반드시 필요한가요? 그렇지 않은 경우 가능하면 해당 코드를 완전히 삭제하거나 삭제할 수 없다면 실행을 나중 시점으로 연기하는 것이 좋습니다. 프레임워크 기능을 활용하면 도움이 됩니다. 예를 들어 React의 기억 기능은 props가 변경되지 않은 경우 구성요소에 관한 불필요한 렌더링 작업을 건너뛸 수 있습니다.
- 이벤트 콜백에서 렌더링되지 않은 작업을 이후 시점으로 연기합니다. 장기 작업은 기본 스레드에 제공하여 분할될 수 있습니다. 기본 스레드에 양보할 때마다 현재 작업의 실행을 종료하고 나머지 작업을 별도의 작업으로 나눕니다. 이렇게 하면 렌더러가 이벤트 콜백에서 이전에 수행된 사용자 인터페이스 업데이트를 처리할 수 있습니다. React를 사용하는 경우 React의 전환 기능을 사용하면 됩니다.
이러한 전략을 사용하면 이벤트 콜백을 최적화하여 실행에 걸리는 시간을 줄일 수 있습니다.
프레젠테이션이 지연되는 이유를 파악하는 방법
긴 입력 지연과 처리 기간이 INP 저하의 유일한 원인은 아닙니다. 간혹 소량의 이벤트 콜백 코드에 대한 응답으로 발생하는 렌더링 업데이트에는 많은 비용이 들 수 있습니다. 브라우저에서 상호작용 결과를 반영하기 위해 사용자 인터페이스에 시각적 업데이트를 렌더링하는 데 걸리는 시간을 프레젠테이션 지연이라고 합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.![Chrome DevTools의 성능 패널에 시각화된 렌더링 작업 렌더링 작업은 다음 프레임을 칠하기 위해 이벤트 콜백 후에 발생합니다.](https://web.dev/static/articles/manually-diagnose-slow-interactions-in-the-lab/image/presentation-delay.png?authuser=2&hl=ko)
렌더링 작업은 대부분 스타일 재계산, 레이아웃, 페인트, 합성과 같은 작업으로 구성되며 프로파일러의 플레임 차트에서 보라색과 녹색 블록으로 표현됩니다. 총 표시 지연은 상호작용 트랙에서 상호작용의 오른쪽 수염으로 표시됩니다.
높은 상호작용 지연 시간을 유발할 수 있는 모든 원인 중에서 프레젠테이션 지연은 문제를 해결하고 해결하기가 가장 까다로울 수 있습니다. 과도한 렌더링 작업의 원인은 다음과 같습니다.
- 큰 DOM 크기. 페이지의 표시를 업데이트하는 데 필요한 렌더링 작업은 종종 페이지의 DOM 크기와 함께 증가합니다. 자세한 내용은 큰 DOM 크기가 상호작용에 미치는 영향과 이와 관련하여 취할 수 있는 조치를 참고하세요.
- 강제 리플로우. JavaScript의 요소에 스타일 변경사항을 적용한 다음 즉시 해당 작업의 결과를 쿼리할 때 발생합니다. 결과적으로 브라우저는 다른 작업을 수행하기 전에 레이아웃 작업을 수행해야 하므로 브라우저가 업데이트된 스타일을 반환할 수 있습니다. 강제 리플로우 방지에 관한 자세한 내용과 도움말은 크고 복잡한 레이아웃 및 레이아웃 스래싱 피하기를 참고하세요.
requestAnimationFrame
콜백에서 과도하거나 불필요한 작업requestAnimationFrame()
콜백은 이벤트 루프의 렌더링 단계에서 실행되며 다음 프레임이 표시되기 전에 완료되어야 합니다. 사용자 인터페이스를 변경하지 않는 작업을 하는 데requestAnimationFrame()
를 사용하는 경우 다음 프레임이 지연될 수 있다는 점을 기억하세요.ResizeObserver
콜백을 참조하세요. 이러한 콜백은 렌더링 전에 실행되며, 콜백의 작업에 비용이 많이 드는 경우 다음 프레임의 표시를 지연시킬 수 있습니다. 이벤트 콜백과 마찬가지로 다음 프레임에 필요하지 않은 로직은 지연합니다.
느린 상호작용을 재현할 수 없다면 어떻게 해야 하나요?
현장 데이터에 따르면 특정 상호작용은 느리지만 실습에서 문제를 직접 재현할 수 없는 경우에는 어떻게 해야 할까요? 여기에는 몇 가지 이유가 있습니다.
첫째, 상호 작용을 테스트할 때의 상황은 하드웨어와 네트워크 연결에 따라 달라집니다. 인터넷 속도가 빠른 기기를 사용하고 있을 수도 있지만 그렇다고 해서 사용자가 그렇다고 할 수는 없습니다. 다음 세 가지 중 한 가지 방법을 시도해 볼 수 있습니다.
- 실제 Android 기기가 있다면 원격 디버깅을 사용하여 호스트 머신에서 Chrome DevTools 인스턴스를 열고 느린 상호작용을 재현해 봅니다. 휴대기기는 노트북이나 데스크톱 컴퓨터만큼 빠르지 않은 경우가 많으므로 이러한 기기에서는 느린 상호작용이 더 쉽게 관찰될 수 있습니다.
- 실제 기기가 없다면 Chrome DevTools에서 CPU 제한 기능을 사용 설정합니다.
또 다른 원인은 페이지와 상호작용하기 전에 페이지가 로드되기를 기다리고 있지만 사용자는 그러지 않기 때문일 수 있습니다. 빠른 네트워크를 사용한다면 네트워크 제한을 사용 설정하여 느린 네트워크 조건을 시뮬레이션하고 그다음 페인트가 완료되는 즉시 페이지와 상호작용하세요. 시작 시 기본 스레드가 가장 붐비는 경우가 많고 이 기간 동안 테스트하면 사용자가 경험하는 환경을 파악할 수 있으므로 이렇게 해야 합니다.
INP 문제 해결은 반복적인 프로세스임
긴 상호작용 지연 시간으로 인해 INP가 낮아지는 원인이 되는 원인을 파악하려면 많은 노력이 필요하지만, 원인을 찾아낼 수 있다면 이제 절반을 넘어섰습니다. 잘못된 INP 문제를 해결하기 위한 체계적인 접근 방식을 따르면 문제의 원인을 확실하게 파악하여 더 빠르게 올바른 해결책을 도출할 수 있습니다. 검토하려면 다음 단계를 따르세요.
- 필드 데이터를 사용하여 느린 상호작용을 찾습니다.
- 실험실에서 문제가 있는 필드 상호작용을 수동으로 테스트하여 재현 가능한지 확인합니다.
- 긴 입력 지연, 값비싼 이벤트 콜백 또는 값비싼 렌더링 작업 때문인지 확인합니다.
- 반복
이 중 마지막 항목이 가장 중요합니다. 페이지 성능을 개선하기 위해 수행하는 다른 대부분의 작업과 마찬가지로 INP 문제 해결 및 개선은 주기적인 과정입니다. 느린 상호 작용 하나를 고치면 다음 상호 작용으로 이동하고 결과가 나타날 때까지 반복합니다.