이 페이지는 Cloud Translation API를 통해 번역되었습니다.

입력 지연 최적화

입력 지연을 알아보고 더 빠른 상호작용을 위해 이를 줄이는 기술을 알아봅니다.

Jeremy Wagner

웹에서의 상호작용은 복잡한 일이며, 상호작용을 유도하기 위해 브라우저에서 모든 종류의 활동이 발생합니다. 그러나 이들 모두의 공통점은 이벤트 콜백이 실행되기 전에 약간의 입력 지연이 발생한다는 것입니다. 이 가이드에서는 입력 지연의 정의와 입력 지연을 최소화하여 웹사이트 상호작용이 더 빠르게 실행되도록 하는 방법에 대해 알아봅니다.

입력 지연이란 무엇인가요?

입력 지연은 사용자가 화면 탭하기, 마우스로 클릭, 키 누르기 등 페이지와 처음 상호작용한 시점부터 상호작용의 이벤트 콜백이 실행되기 시작할 때까지의 시간입니다. 모든 상호작용은 일정한 입력 지연으로 시작됩니다.

입력 지연을 단순화한 시각화입니다. 왼쪽에는 상호작용의 시작을 나타내는 별 모양이 솟은 마우스 커서가 있는 라인 아트가 있습니다. 오른쪽에는 상호작용을 위한 이벤트 핸들러가 실행되기 시작하는 시점을 나타내는 톱니바퀴의 라인 아트가 있습니다. 그 사이의 공백은 중괄호와 함께 입력 지연으로 표시됩니다. — </ph> 입력 지연의 메커니즘 운영체제에서 입력을 수신하면 상호작용이 시작되기 전에 이 입력이 브라우저에 전달되어야 합니다. 이 작업에는 일정 시간이 소요되며 기존 기본 스레드 작업으로 늘릴 수 있습니다.

불가피한 입력 지연 중 일부는 운영체제가 입력 이벤트를 인식하고 이를 브라우저에 전달하는 데 항상 어느 정도 시간이 걸리기 때문입니다. 그러나 이러한 입력 지연 부분은 종종 눈에 띄지 않을 때가 있으며, 페이지 자체에서 문제가 발생할 만큼 입력 지연이 길어질 수 있는 다른 요인들이 있습니다.

입력 지연에 대해 생각해 보는 방법

일반적으로 웹사이트에서 다음 페인트에 대한 상호작용 (INP) 측정항목의 '양호'를 충족할 수 있도록 상호작용의 모든 부분을 최대한 짧게 유지하는 것이 좋습니다. 기준점에 도달할 수 있습니다. 입력 지연을 확인하는 것은 이러한 임곗값을 충족하는 일부일 뿐입니다.

따라서 INP의 'good' 임곗값입니다. 하지만 입력 지연을 완전히 없앨 수는 없을 것으로 예상됩니다. 사용자가 페이지와 상호작용하려고 하는 동안 과도한 기본 스레드 작업을 피한다면, 입력 지연은 문제를 방지할 만큼 충분히 짧아야 합니다.

입력 지연을 최소화하는 방법

앞서 언급했듯이 불가피한 입력 지연이 있을 수 있지만 일부 입력 지연은 피할 수 있습니다. 다음은 긴 입력 지연으로 어려움을 겪는 경우 고려해야 할 몇 가지 사항입니다.

과도한 기본 스레드 작업을 시작하는 반복 타이머를 피하세요.

JavaScript에서 입력 지연에 영향을 줄 수 있는 일반적으로 사용되는 타이머 함수 두 가지는 setTimeout 및 setInterval입니다. 두 방식의 차이점은 setTimeout는 지정된 시간 이후에 실행되도록 콜백을 예약한다는 것입니다. 반면 setInterval는 n밀리초마다 또는 clearInterval로 타이머가 중지될 때까지 콜백을 예약하여 실행합니다.

setTimeout 자체는 문제가 되지 않습니다. 실제로 장기 작업을 방지하는 데 도움이 될 수 있습니다. 하지만 시간 초과가 발생한 시점과 시간 제한 콜백이 실행될 때 사용자가 페이지와 상호작용하려고 하는지에 따라 다릅니다.

또한 setTimeout는 루프에서 또는 재귀적으로 실행할 수 있습니다. 이 경우 setInterval처럼 동작하지만 이전 실행이 완료될 때까지 다음 반복을 예약하지 않는 것이 좋습니다. 이는 setTimeout가 호출될 때마다 루프가 기본 스레드에 양보되지만 콜백이 과도한 작업을 실행하지 않도록 주의해야 합니다.

setInterval는 일정 간격으로 콜백을 실행하므로 상호작용을 방해할 가능성이 훨씬 더 높습니다. 이는 사용자 상호작용을 방해할 수 있는 일회성 콜백인 setTimeout 호출의 단일 인스턴스와 달리 setInterval의 반복되는 특성으로 인해 상호작용을 방해할 가능성이 훨씬 커져 상호작용의 입력 지연이 증가하기 때문입니다.

입력 지연을 보여주는 Chrome DevTools의 성능 프로파일러 스크린샷 타이머 함수에 의해 실행되는 작업은 사용자가 클릭 상호작용을 시작하기 직전에 발생합니다. 그러나 타이머가 입력 지연을 연장하여 상호작용의 이벤트 콜백이 그렇지 않은 경우보다 늦게 실행됩니다. — </ph> Chrome DevTools의 성능 패널에 표시된 입력 지연에 영향을 주는 이전 `setInterval` 호출로 등록된 타이머입니다. 입력 지연이 추가되면 상호작용의 이벤트 콜백이 다른 경우보다 늦게 실행됩니다.

퍼스트 파티 코드에서 타이머가 발생하는 경우 타이머를 제어할 수 있습니다. 필요한지 평가하거나 작업을 최소화하기 위해 최선을 다하세요. 그러나 서드 파티 스크립트의 타이머는 완전히 다릅니다. 서드 파티 스크립트의 기능을 제어할 수 없는 경우가 많으며, 서드 파티 코드의 성능 문제를 해결하려면 이해관계자와 협력하여 주어진 서드 파티 스크립트가 필요한지 결정하고, 필요한 경우 서드 파티 스크립트 공급업체에 문의하여 웹사이트에 발생할 수 있는 성능 문제를 해결하기 위해 취할 수 있는 조치를 확인해야 합니다.

긴 작업 피하기

긴 입력 지연을 완화하는 한 가지 방법은 장기 작업을 피하는 것입니다. 상호작용 중에 기본 스레드를 차단하는 과도한 기본 스레드 작업이 있으면 긴 작업이 완료되기 전에 기본 스레드의 입력 지연이 추가됩니다.

태스크가 입력 지연을 얼마나 연장하는지 시각화 맨 위에서는 하나의 긴 작업이 실행된 직후에 상호작용이 발생하며, 이로 인해 상당한 입력 지연이 발생하여 이벤트 콜백이 예상보다 훨씬 늦게 실행됩니다. 하단에서 상호작용이 거의 동시에 발생하지만 긴 작업은 양보를 통해 여러 개의 작은 작업으로 나뉘며, 상호작용의 이벤트 콜백이 훨씬 빨리 실행될 수 있습니다. — </ph> 작업이 너무 길고 브라우저가 상호작용에 충분히 빠르게 응답할 수 없을 때와 긴 작업이 더 작은 작업으로 나누어질 때 나타나는 상호작용을 시각화합니다.

작업에서 실행하는 작업의 양을 최소화하고 항상 기본 스레드에서 가능한 한 적은 작업을 실행해야 하는 것 외에도 장기 작업을 분할하여 사용자 입력에 대한 응답성을 개선할 수 있습니다.

상호작용 중복 고려

INP 최적화에서 특히 어려운 부분은 겹치는 상호작용이 있는 경우입니다. 상호작용 중복은 한 요소와 상호작용한 후 초기 상호작용이 다음 프레임을 렌더링하기 전에 페이지와 또 다른 상호작용을 하는 것을 의미합니다.

입력 시간이 길어질 수 있으므로 작업이 겹칠 수 있는 경우를 묘사합니다. 이 묘사에서는 클릭 상호작용이 키 다운 상호작용과 겹쳐서 키 다운 상호작용의 입력 지연을 늘립니다. — </ph> Chrome DevTools의 성능 프로파일러에서 동시 실행되는 두 가지 상호작용을 시각화한 이미지 초기 클릭 상호작용에서 렌더링 작업으로 인해 후속 키보드 상호작용에 입력 지연이 발생합니다.

상호작용이 중복되는 원인은 사용자가 짧은 시간에 많은 상호작용을 하는 것만큼 간단할 수 있습니다. 이 문제는 사용자가 양식 입력란에 입력할 때 발생할 수 있으며, 이 경우 많은 키보드 상호작용이 매우 짧은 시간 내에 발생할 수 있습니다. 키 이벤트 작업에 특히 비용이 많이 드는 경우(예: 네트워크 요청이 백엔드에 대해 수행되는 자동 완성 필드의 일반적인 경우) 다음과 같은 몇 가지 옵션이 있습니다.

입력을 디바운싱하여 지정된 기간에 이벤트 콜백이 실행되는 횟수를 제한하는 것이 좋습니다.
AbortController를 사용하여 발신 fetch 요청을 취소하여 기본 스레드가 fetch 콜백을 처리할 때 정체되지 않도록 합니다. 참고: AbortController 인스턴스의 signal 속성을 사용하여 이벤트를 취소할 수도 있습니다.

겹치는 상호작용으로 인해 입력 지연이 증가하는 또 다른 소스는 값비싼 애니메이션일 수 있습니다. 특히 JavaScript의 애니메이션은 requestAnimationFrame 호출을 여러 번 실행하여 사용자 상호작용을 방해할 수 있습니다. 이 문제를 해결하려면 가능하면 CSS 애니메이션을 사용하여 비용이 많이 드는 애니메이션 프레임이 대기열에 추가되는 것을 방지하세요. 하지만 이렇게 하는 경우 애니메이션이 기본 스레드가 아닌 GPU 및 컴포지터 스레드에서 주로 실행되도록 합성되지 않은 애니메이션을 방지해야 합니다.

결론

입력 지연이 상호작용이 실행되는 데 걸리는 대부분의 시간을 나타내지는 않을 수 있지만, 상호작용의 모든 부분에서 이 시간을 줄일 수 있다는 점을 이해하는 것이 중요합니다. 긴 입력 지연이 관찰되면 이를 줄일 기회가 있습니다. 반복되는 타이머 콜백을 피하고, 긴 작업을 분할하고, 잠재적인 상호작용 중복을 인지하는 것은 모두 입력 지연을 줄여 웹사이트 사용자의 상호작용 속도를 높이는 데 도움이 될 수 있습니다.

Unsplash의 히어로 이미지, 에릭 맥린 제공