긴 작업은 장시간 기본 스레드를 독점하여 UI가 '정지'되는 JavaScript 코드입니다.
페이지가 로드되는 동안 긴 작업은 기본 스레드를 사용해 버리므로 페이지가 준비된 것처럼 보이지만 사용자 입력에 응답하지 않을 수 있습니다. 이벤트 리스너 및 클릭 핸들러와 같은 대화형 기능이 아직 UI 요소에 연결되지 않았기 때문에 클릭과 탭이 작동하지 않는 경우가 많습니다. 따라서 긴 작업으로 인해 상호작용 시작 시간이 크게 늘어날 수 있습니다.
이제 Chrome DevTools에서 긴 작업을 시각화할 수 있으므로 최적화가 필요한 작업을 더 쉽게 확인할 수 있습니다.
긴 작업으로 간주되는 작업은 무엇인가요?
CPU 사용량이 많은 긴 작업은 50밀리초(ms) 이상 걸리는 복잡한 작업으로 인해 발생합니다. RAIL 모델에 따르면 100밀리초(ms) 이내에 눈에 띄는 응답을 보장하고 작업과 반응 간의 연결을 유지하려면 50밀리초(ms) 이내에 사용자 입력 이벤트를 처리해야 합니다.
주요 사항: RAIL 모델은 100ms 이내에 사용자 입력에 시각적 응답을 제공할 것을 제안하지만 Interaction to Next Paint (다음 페인트와의 상호작용, INP) 측정항목의 임곗값은 특히 느린 기기의 경우 최대 200ms까지 허용하여 더 실현 가능한 기대치를 설정할 수 있습니다.
페이지에 상호작용을 지연시킬 수 있는 긴 작업이 있나요?
지금까지는 Chrome DevTools에서 길이가 50ms를 초과하는 스크립트의 '긴 노란색 블록'을 수동으로 찾거나 Long Tasks API를 사용하여 상호작용을 지연시키는 태스크를 파악해야 했습니다.
성능 감사 워크플로를 쉽게 처리할 수 있도록 이제 DevTools에서 긴 작업을 시각화합니다. 할 일 (회색으로 표시됨)이 긴 할 일인 경우 빨간색 플래그가 표시됩니다.
새 시각화 도구를 사용하려면 다음 단계를 따르세요.
- 웹페이지 로드의 성능 패널에 트레이스를 기록합니다.
- 기본 스레드 뷰에서 빨간색 플래그를 찾습니다. 이제 할 일이 회색으로 표시되고 할 일 라벨이 지정됩니다.
- 회색 막대 위에 포인터를 가져갑니다. 작업 시간과 긴 작업으로 간주되는지 여부를 보여주는 대화상자가 표시됩니다.
긴 작업이 발생하는 이유는 무엇인가요?
긴 작업의 원인을 찾으려면 회색 할 일 막대를 선택합니다. 하단의 창에서 하향식 및 활동별 그룹화를 선택합니다. 이렇게 하면 완료하는 데 시간이 오래 걸린 작업에 가장 많이 기여한 활동을 확인할 수 있습니다. 다음 예에서 지연의 원인은 비용이 많이 드는 DOM 쿼리 집합으로 보입니다.
긴 작업을 최적화하는 일반적인 방법은 무엇인가요?
대용량 스크립트는 종종 긴 작업의 주요 원인입니다. 분할을 고려해 보세요. 또한 기본 콘텐츠의 상호작용이 지연되는 긴 작업을 포함할 수 있는 서드 파티 스크립트도 주의 깊게 살펴보세요.
모든 작업을 50밀리초 미만으로 실행되는 청크로 나누고 적절한 위치와 시간에 이러한 청크를 실행합니다. 일부 작업의 경우 서비스 워커의 기본 스레드 외부에서 실행하는 것이 좋습니다. 긴 작업을 분할하는 방법에 관한 안내는 긴 작업 최적화 및 필 월튼의 긴급할 때까지 대기를 참고하세요.
페이지의 응답성을 유지합니다. 긴 작업을 최소화하면 사용자가 사이트를 방문할 때 만족스러운 경험을 할 수 있습니다. 긴 작업에 관한 자세한 내용은 사용자 중심 성능 측정항목을 참고하세요.