항목을 펼쳐 상세 정보를 확인하면 1.chunk.js라는 파일에서 1,491밀리초동안 자바스크립트가 실행되었음을 알 수 있음
오랫동안 자바스크립트가 실행되었고 그 때문에 서비스가 느려졌다는 것은 이해했는데, 이게 무엇인지는 도통 알 수가 없음
따라서 메인 스레드의 작업을 상세하게 살펴보고 느린 작업이 무엇인지 확인하기 위해 Performance 패널을 활용할 것임
Performance 패널을 사용하는 방법은 두 가지임.
첫 번째는 Lighthouse 결과 페이지에 ‘View Original Trace’라는 버튼을 눌러 Performance 패널로 이동하는 방법임. 이 버튼을 통해 Lighthouse를 통해 분석한 내용을 Performance 패널로 가져가서 보여줌.
두 번째 방법은 직접 Performance 패널에 들어간 뒤, 녹화 버튼 옆의 새로 고침 버튼을 누르는 것임. 그러면 페이지가 다시 로드되면서 그 과정에서의 여러 작업(네트워크, 메인 스레드 등)을 기록함. 서비스의 상태를 조금 더 상세히 보려면, 오른쪽 설정버튼을 눌러 네트워크 설정을 ‘Fast 3G’로 설정하여 제한된 환경을 구성할 수 있음
Performance 패널을 이용한 분석이 완료되면 아래와 같은 화면을 볼 수 있음
