입력 지연이 무엇인지 알아보고 상호작용을 더 빠르게 하기 위해 지연을 줄이는 방법을 배웁니다.
웹에서의 상호작용은 복잡한 일이며, 이를 이루기 위해 브라우저에서 모든 종류의 활동이 발생합니다. 하지만 이들 모두의 공통점은 이벤트 콜백이 실행되기 전에 약간의 입력 지연이 발생한다는 점입니다. 이 가이드에서는 입력 지연의 정의와 웹사이트에서의 상호작용이 더 빠르게 실행되도록 이를 최소화하는 방법을 알아봅니다.
입력 지연이란 무엇인가요?
입력 지연은 사용자가 페이지와 처음 상호작용(예: 화면 탭, 마우스 클릭, 키 누르기)한 시점부터 상호작용의 이벤트 콜백이 실행되기 시작할 때까지의 기간을 의미합니다. 모든 상호작용은 어느 정도의 입력 지연으로 시작됩니다.
어느 정도의 입력 지연이 피할 수 없습니다. 운영체제가 입력 이벤트를 인식하여 브라우저에 전달하는 데에는 항상 어느 정도의 시간이 걸립니다. 하지만 이 정도의 입력 지연이 눈에 띄지 않는 경우가 많으며, 페이지 자체에서 발생하는 다른 이유로 입력 지연이 문제를 일으킬 수 있습니다.
입력 지연을 고려하는 방법
일반적으로 사용자 기기에 관계없이 웹사이트에서 다음 페인트에 대한 상호작용 (INP) 측정항목의 '양호' 기준을 충족할 가능성이 가장 높을 수 있도록 상호작용의 모든 부분을 최대한 짧게 유지하는 것이 좋습니다. 입력 지연을 계속 점검하는 것은 이 임곗값을 달성하기 위한 여러 방법 중 하나에 불과합니다.
따라서 INP의 '양호' 기준점을 충족하기 위해 가능한 가장 짧은 입력 지연을 목표로 하는 것이 좋습니다. 하지만 입력 지연을 완전히 제거할 수는 없다는 점에 유의해야 합니다. 사용자가 페이지와 상호작용을 시도하는 동안 과도한 기본 스레드 작업을 피하는 한 입력 지연은 문제를 피할 수 있을 만큼 짧아야 합니다.
입력 지연을 최소화하는 방법
앞서 언급한 것처럼 일부 입력 지연은 피할 수 없지만, 다른 입력 지연은 피할 수 있습니다. 입력 지연이 길어지는 경우 고려해야 할 사항은 다음과 같습니다.
과도한 기본 스레드 작업을 시작하는 반복 타이머 피하기
JavaScript에서 입력 지연에 기여할 수 있는 두 가지 타이머 함수는 setTimeout 및 setInterval입니다. 이 둘의 차이점은 setTimeout가 지정된 시간 후에 실행할 콜백을 예약한다는 것입니다. 반면 setInterval는 영구적으로 n밀리초마다 또는 타이머가 clearInterval로 중지될 때까지 실행되도록 콜백을 예약합니다.
setTimeout는 그 자체로는 문제가 되지 않으며, 사실 장기 작업을 방지하는 데 도움이 될 수 있습니다. 하지만 시간이 초과되는 시점과 시간 제한 콜백이 실행될 때 사용자가 페이지와 상호작용하려고 하는지 여부에 따라 다릅니다.
또한 setTimeout는 루프에서 실행되거나 재귀적으로 실행될 수 있습니다. 이는 setInterval와 비슷한 방식으로 작동하지만, 이전 반복이 완료될 때까지 다음 반복을 예약하지 않는 것이 좋습니다. 즉, setTimeout가 호출될 때마다 루프가 기본 스레드에 양보되지만 콜백이 과도한 작업을 수행하지 않도록 주의해야 합니다.
setInterval는 간격으로 콜백을 실행하므로 상호작용을 방해할 가능성이 훨씬 높습니다. 이는 사용자 상호작용을 방해할 수 있는 일회성 콜백인 setTimeout 호출의 단일 인스턴스와 달리 setInterval의 반복적인 특성으로 인해 상호작용을 방해할 가능성이 훨씬 더 높기 때문에 상호작용의 입력 지연이 증가합니다.
setInterval 호출로 등록된 타이머입니다. 추가된 입력 지연으로 인해 상호작용의 이벤트 콜백이 그렇지 않은 경우보다 늦게 실행됩니다.
타이머가 퍼스트 파티 코드로 발생하는 경우 이를 제어할 수 있습니다. 그들이 필요한지 평가하거나 그들에 대한 작업을 가능한 한 줄이도록 최선을 다하십시오. 그러나 서드 파티 스크립트의 타이머는 다릅니다. 서드 파티 스크립트의 기능을 제어할 수 없는 경우가 많습니다. 서드 파티 코드의 성능 문제를 해결하려면 이해관계자와 협력하여 주어진 서드 파티 스크립트가 필요한지 여부를 결정하고, 필요한 경우 서드 파티 스크립트 공급업체에 문의하여 웹사이트에서 발생할 수 있는 성능 문제를 해결하기 위해 취할 수 있는 조치를 확인해야 합니다.
긴 작업 피하기
긴 입력 지연을 완화하는 한 가지 방법은 긴 작업을 피하는 것입니다. 상호작용 중에 기본 스레드를 차단하는 과도한 기본 스레드 작업이 있으면 장기 작업이 완료되기 전에 입력 지연이 늘어납니다.
작업에서 실행하는 작업의 양을 최소화하고 항상 기본 스레드에서 가능한 한 적은 작업을 실행하도록 노력해야 하는 것 외에도 장기 작업을 분할하여 사용자 입력에 대한 응답성을 개선할 수 있습니다.
상호작용 중복에 유의
INP 최적화에서 특히 어려운 부분은 상호작용이 겹치는 경우에 발생할 수 있습니다. 상호작용 중복이란 한 요소와 상호작용한 후 초기 상호작용에서 다음 프레임을 렌더링하기 전에 페이지와 다른 상호작용을 하는 것을 의미합니다.
상호작용 중복의 소스는 사용자가 단기간에 많은 상호작용을 하는 것만큼 간단할 수 있습니다. 이 문제는 사용자가 양식 입력란에 입력할 때 발생하여 매우 짧은 시간 내에 많은 키보드 상호작용이 발생할 때 발생할 수 있습니다. 백엔드에 네트워크 요청을 전송하는 자동 완성 필드의 일반적인 경우와 같이 키 이벤트에 대한 작업이 특히 많은 경우 다음과 같은 몇 가지 옵션이 있습니다.
- 입력 디바운싱을 통해 지정된 기간 동안 이벤트 콜백이 실행되는 횟수를 제한하는 것이 좋습니다.
AbortController을 사용하여 발신fetch요청을 취소하여 기본 스레드가fetch콜백을 처리하는 데 혼잡해지지 않도록 합니다. 참고:AbortController인스턴스의signal속성을 사용하여 이벤트를 취소할 수도 있습니다.
중복된 상호작용으로 인해 입력 지연이 증가하는 또 다른 원인은 비용이 많이 드는 애니메이션일 수 있습니다. 특히 JavaScript의 애니메이션은 많은 requestAnimationFrame 호출을 실행하여 사용자 상호작용을 방해할 수 있습니다. 이 문제를 해결하려면 비용이 많이 드는 애니메이션 프레임을 큐에 추가하지 않도록 가능한 한 CSS 애니메이션을 사용하세요. 하지만 이렇게 하는 경우 합성되지 않은 애니메이션은 피해야 합니다. 이렇게 하면 애니메이션이 기본 스레드가 아닌 GPU 및 컴포지터 스레드에서 주로 실행됩니다.
결론
입력 지연이 상호작용 실행에 걸리는 시간의 대부분을 나타내지는 않을 수 있지만 상호작용의 모든 부분이 소요되는 시간을 줄여줄 수 있다는 점을 이해해야 합니다. 긴 입력 지연이 관찰되는 경우 이를 줄일 수 있습니다. 반복적인 타이머 콜백을 피하고, 긴 작업을 분리하고, 잠재적인 상호작용 중복을 인지하면 입력 지연을 줄여 웹사이트 사용자가 더 빠르게 상호작용할 수 있습니다.