자바스크립트를 실행하는 데 시간이 오래 걸리면 여러 가지 방식으로 페이지 성능이 저하됩니다.
네트워크 비용
바이트가 많을수록 다운로드 시간이 길어집니다.
파싱 및 컴파일 비용
JavaScript는 기본 스레드에서 파싱되고 컴파일됩니다. 기본 스레드가 사용 중이면 페이지가 사용자 입력에 응답할 수 없습니다.
실행 비용
JavaScript는 기본 스레드에서도 실행됩니다. 페이지에서 실제로 필요하기 전에 많은 코드를 실행하면 사용자가 페이지 속도를 인식하는 방식과 관련된 주요 측정항목 중 하나인 상호작용 시작 시간도 지연됩니다.
메모리 비용
JavaScript가 많은 참조를 보유하면 많은 메모리를 소비할 수 있습니다. 페이지에서 메모리를 많이 사용하면 버벅거림이나 느려지는 현상이 나타납니다. 메모리 누수로 인해 페이지가 완전히 멈출 수 있습니다.
Lighthouse JavaScript 실행 시간 감사 실패 방법
JavaScript 실행이 2초 이상 걸릴 경우 Lighthouse에서 경고를 표시합니다. 실행 시간이 3.5초를 초과하면 감사가 실패합니다.
실행 시간에 가장 큰 영향을 주는 요인을 식별하는 데 도움이 되도록 Lighthouse는 페이지에서 로드되는 각 자바스크립트 파일을 실행, 평가, 파싱하는 데 소요된 시간을 보고합니다.
JavaScript 실행 속도를 높이는 방법
- 코드 분할을 구현하여 사용자에게 필요한 코드만 전송합니다.
- 코드를 축소하고 압축합니다.
- 사용하지 않는 코드를 삭제합니다.
- PRPL 패턴으로 코드를 캐시하여 네트워크 트립을 줄입니다.
페이지 로드를 개선하는 다른 방법은 실적 감사 방문 페이지를 참고하세요.