사용자 상호작용을 방해하는 비용이 많이 드는 작업을 진단하는 방법을 알아보세요.
장기 작업은 기본 스레드를 바쁜 상태로 유지하여 사용자 상호작용을 지연시킬 수 있습니다. 이제 Chrome DevTools에서 장기 작업을 시각화하여 최적화할 작업을 더 쉽게 확인할 수 있습니다.
Lighthouse를 사용하여 페이지를 감사하고 있다면 사용자가 페이지와 상호작용하여 응답을 받을 수 있는 시점을 나타내는 측정항목인 상호작용 시작 시간에 익숙할 것입니다. 하지만 긴 작업 (JavaScript) 작업이 TTI에 크게 기여할 수 있다는 사실을 알고 계셨나요?
긴 작업이란 무엇인가요?
Long Task는 기본 스레드를 장시간 독특하게 하여 UI가 '정지'되는 자바스크립트 코드입니다.
웹페이지가 로드되는 동안 장기 태스크는 기본 스레드를 연결하여 준비가 된 것처럼 보이더라도 페이지가 사용자 입력에 응답하지 않게 만들 수 있습니다. 이벤트 리스너, 클릭 핸들러 등이 아직 추가되지 않았기 때문에 클릭과 탭이 작동하지 않는 경우가 많습니다.
CPU를 많이 사용하는 긴 작업은 50ms 이상 걸리는 복잡한 작업으로 인해 발생합니다. 왜 50밀리초일까요? RAIL 모델에서는 사용자 입력 이벤트를 50ms 내에 처리하여 100ms 이내에 응답이 가시적으로 보장되도록 하는 것이 좋습니다. 그러지 않으면 동작과 반응 사이의 연결이 끊어집니다.
내 페이지에 상호작용을 지연시킬 수 있는 긴 작업이 있나요?
지금까지는 Chrome DevTools에서 50ms가 넘는 스크립트의 '긴 노란색 블록'을 직접 찾거나 Long Tasks API를 사용하여 상호작용을 지연시키는 작업이 무엇인지 알아내야 했습니다. 이 작업은 다소 번거로울 수 있습니다.
성능 감사 워크플로를 간소화하는 데 도움이 되도록 DevTools에서 이제 장기 작업을 시각화합니다. 작업 (회색으로 표시)은 장기 작업인 경우 위험 플래그가 있습니다.
- 웹페이지 로드 시 Performance(성능) 패널에 트레이스를 기록합니다.
- 기본 스레드 뷰에서 빨간색 플래그를 찾습니다. 이제 할 일이 회색으로 표시됩니다 ('할 일').
- 막대 위로 마우스를 가져가면 작업의 소요 시간 및 '긴 작업'으로 간주되었는지를 알 수 있습니다.
내 할 일이 긴 이유는 무엇인가요?
긴 작업의 원인을 알아보려면 회색 작업 표시줄을 선택하세요. 아래 창에서 Bottom-Up 및 Group by Activity를 선택합니다. 이를 통해 완료하는 데 너무 오래 걸리는 활동이 작업에 가장 많이 (전체) 기여한 활동을 확인할 수 있습니다. 아래는 비용이 많이 드는 DOM 쿼리 세트입니다.
장기 작업을 최적화하는 일반적인 방법은 무엇인가요?
큰 스크립트는 장기 작업의 주요 원인인 경우가 많으므로 분할하는 것이 좋습니다. 또한 서드 파티 스크립트를 주의 깊게 살펴보세요. 긴 작업으로 인해 주요 콘텐츠의 상호작용이 지연될 수 있습니다.
모든 작업을 50ms 미만으로 실행되는 작은 청크로 나누고 이러한 청크를 적절한 장소와 시간에 실행합니다. 적절한 장소가 worker에서 기본 스레드를 벗어나 있을 수도 있습니다. Phil Walton의 Idle Until Urgent가 이 주제에 관해 읽어보세요. 장기 작업의 관리 및 세분화를 위한 일반적인 전략은 장기 작업 최적화 도움말도 참고하세요.
페이지가 응답성을 유지하도록 합니다. 긴 작업을 최소화하는 것은 사용자가 사이트를 방문할 때 즐거운 경험을 할 수 있는 좋은 방법입니다. 긴 작업에 대한 자세한 내용은 사용자 중심 성능 측정항목을 참고하세요.