예상 입력 지연 시간은 Lighthouse 보고서의 성능 섹션에서 추적되는 6가지 측정항목 중 하나입니다. 각 측정항목은 페이지 로드 속도의 몇 가지 측면을 보여줍니다.
Lighthouse 보고서에는 예상 입력 지연 시간이 밀리초 단위로 표시됩니다.
예상 입력 지연 시간에서 측정하는 항목
예상 입력 지연 시간은 페이지 로드가 가장 많은 5초 동안 앱이 사용자 입력에 응답하는 데 걸리는 시간을 추정한 값입니다. 이 감사 시간은 첫 번째 의미 있는 페인트부터 트레이스 종료 시점까지이며, 상호작용 시작 시간으로부터 약 5초입니다. 지연 시간이 50ms를 초과하면 사용자가 앱이 느리다고 인식할 수 있습니다.
RAIL 성능 모델에서는 앱이 사용자 입력에 100ms 이내에 응답하는 것을 권장하지만 Lighthouse의 예상 입력 지연 시간 목표 점수는 50ms입니다. 그 이유는 무엇인가요? Lighthouse는 프록시 측정항목(기본 스레드 가용성)을 사용하여 앱이 사용자 입력에 얼마나 잘 반응하는지 측정합니다.
Lighthouse는 앱이 사용자 입력에 완전히 응답하려면 50밀리초가 필요하다고 가정합니다(자바스크립트 실행부터 화면에 새 픽셀을 물리적으로 색칠까지). 기본 스레드를 50ms 이상 사용할 수 없다면 앱이 응답을 완료할 시간이 충분하지 않습니다.
약 90% 의 사용자에게 Lighthouse에서 보고한 입력 지연 시간(또는 그 이하)이 발생합니다. 사용자의 10% 는 더 긴 지연 시간을 기대할 수 있습니다.
예상 입력 지연 시간 점수를 개선하는 방법
앱이 사용자 입력에 더 빠르게 응답하도록 하려면 브라우저에서 코드가 실행되는 방식을 최적화하세요. Google의 렌더링 성능 페이지에 설명된 일련의 기법을 확인해 보세요. 이러한 팁에는 컴퓨팅 오프로드에서 웹 작업자에 이르기까지 기본 스레드를 확보하는 방법, CSS 선택자를 리팩터링하여 계산 수를 줄이는 방법, 브라우저 집약적인 작업의 양을 최소화하는 CSS 속성 사용에 이르기까지 다양합니다.
예상 입력 지연 시간을 수동으로 측정하는 방법
예상 입력 지연 시간을 수동으로 측정하려면 Chrome DevTools 타임라인에 기록하세요. 워크플로의 예는 기본 스레드 작업 줄이기를 참고하세요. 기본 개념은 기록을 시작하고, 측정하려는 사용자 입력을 실행하고, 기록을 중지한 다음, Flame Chart를 분석하여 픽셀 파이프라인의 모든 단계가 50ms 이내에 완료되었는지 확인하는 것입니다.