사용하지 않는 자바스크립트 삭제하기

사용하지 않는 JavaScript를 사용하면 페이지 로드 속도가 느려질 수 있습니다.

  • 자바스크립트가 렌더링 차단인 경우 브라우저에서 페이지를 렌더링하는 데 필요한 다른 모든 작업을 진행하기 전에 스크립트를 다운로드, 파싱, 컴파일, 평가해야 합니다.
  • JavaScript가 비동기식 (렌더링 차단이 아님)인 경우에도 코드는 다운로드하는 동안 다른 리소스와 대역폭을 두고 경쟁하므로 성능에 상당한 영향을 미칩니다. 네트워크를 통해 사용되지 않는 코드를 전송하는 것은 무제한 데이터 요금제를 사용하지 않는 모바일 사용자에게도 낭비입니다.

사용되지 않은 JavaScript 감사 실패

Lighthouse는 20KB 이상의 미사용 코드가 있는 모든 JavaScript 파일에 플래그를 지정합니다.

감사 스크린샷
URL 열의 값을 클릭하여 새 탭에서 스크립트의 소스 코드를 엽니다.

사용하지 않는 JavaScript를 삭제하는 방법

사용하지 않는 자바스크립트 감지

Chrome DevTools의 범위 탭에서 사용되지 않는 코드를 한 줄씩 확인할 수 있습니다.

Puppeteer의 Coverage 클래스를 사용하면 사용하지 않는 코드를 감지하고 사용된 코드를 추출하는 프로세스를 자동화할 수 있습니다.

사용하지 않는 코드 삭제를 지원하는 빌드 도구

다음 Tooling.Report 테스트를 확인하여 번들러가 사용하지 않는 코드를 더 쉽게 피하거나 삭제할 수 있는 기능을 지원하는지 확인하세요.

스택별 안내

Angular

Angular CLI를 사용하는 경우 프로덕션 빌드에 소스 맵을 포함하여 번들을 검사하세요.

Drupal

사용하지 않는 JavaScript 애셋을 삭제하고 필요한 Drupal 라이브러리만 페이지의 관련 페이지 또는 구성요소에 연결합니다. 자세한 내용은 라이브러리 정의를 참고하세요.

Joomla

페이지에서 사용되지 않는 자바스크립트를 로드하는 Joomla 확장 프로그램 수를 줄이거나 전환하는 것이 좋습니다.

Magento

Magento의 기본 제공 JavaScript 번들링을 사용 중지합니다.

React

서버 측 렌더링이 아닌 경우 React.lazy()로 자바스크립트 번들을 분할하세요. 또는 로드 가능한 구성요소와 같은 서드 파티 라이브러리를 사용하여 코드를 분할합니다.

뷰

서버 측 렌더링을 사용하지 않고 Vue 라우터를 사용하는 경우 지연 로드 경로로 번들을 분할합니다.

WordPress

페이지에서 사용되지 않는 자바스크립트를 로드하는 WordPress 플러그인 수를 줄이거나 전환하는 것이 좋습니다.

자료