javascript는 브라우저 렌더링 블락요소이므로 사용되지 않는 javascript를 줄여서 속도향상을 기대할 수 있다.
사용하지 않는 javscript
1) 중요하지 않은 javascript
above-the-fold 콘텐츠에는 필요하지 않지만 페이지나 다른 페이지에서 여전히 사용될 수 있는 javascript
2) dead javascript
더 이상 사용되지 않는 코드.
사용하지 않는 모듈이거나 테스트 코드 등
사용하지 않는 javascript는 페이지 성능에 어떤 영향을 미치는가?
페이지가 로드될 때마다 브라우저는 javascript를 다운로드, 구문 분석 및 실행해야 페이지를 렌더링 할 수 있다. (명시적으로 지연되거나 비동기 로드는 예외)
javascript파일이 페이지 내용에 어떻게 영향을 미치는지 알 수 없기 때문에 완전히 실행될때까지 브라우저가 대기하기 때문이다.
사용하지 않는 javascript를 로드하면 대역폭이 불필요하게 증가하고 페이지의 첫 번째 페인트(FCP)가 지연되어 전체페이지 성능이 느려진다.
- 지연되거나 비동기적으로 로드되더라도 페이지 성능에 영향을 미칠 수 있다.
- 다운로드가 필요한 다른페이지 리소스와 경쟁하기 때문.
- 모바일의 경우는 셀룰러데이터 불필요하게 증가.
사용하지 않는 javascript줄이는법
1) 코드 분할
코드분할을 통해 번들된 자바스크립트를 중요한 자바스크립트와 중요하지 않은 자바스크립트로 나눈다.
이렇게함으로써 중요한 자바스크립트만 먼저 로드되므로 렌더차단을 줄일 수 있다.
2) dead code 걷어내기
현재 페이지에서 사용하지 않는 자바스크립트 코드를 제거.
트리쉐이킹을 사용해보자.
3) dead imported code 걷어내기
대부분의 경우 dead code는 인기있는 라이브러리 또는 다른 자바스크립트 번들에서 가져오며 선택적으로 가져오기 어렵다. 그러나 import후 사용하지 않는 라이브러리를 제거하는 플러그인이 있다.
frontend developer