[온라인 쇼핑몰 속도 최적화] 사용하지 않는 Javascript 줄이기

 

목차

 

💡 사용하지 않는 자바스크립트 유형

💡 사용하지 않는 JavaScript는 페이지 성능에 어떤 영향을 줍니까?

💡  사용하지 않는 JavaScript를 줄이는 방법은 무엇입니까?

 

 

---

 

 

 

 

 

사용하지 않는 JavaScript 코드를 줄이면 웹 페이지의 로딩 속도가 향상되고 사용자의 페이지 경험을 향상시킬 수 있습니다. JavaScript 파일은 기본적으로 브라우저의 렌더링을 차단하므로, 브라우저가 다른 페이지 로드 작업을 처리하는 데 방해됩니다. 결과적으로, 페이지의 "First Paint"가 지연되며 사용자는 웹 페이지가 느리게 로딩되는 것을 경험하게 됩니다.
이러한 이유로 사용하지 않는 JavaScript를 로드하는 것은 측정 가능한 성능 및 사용자 경험에 부정적인 영향을 미칩니다. 따라서 사용하지 않는 JavaScript를 줄이고 최적화함으로써 웹 페이지의 성능을 향상시키고, 사용자에게 더 빠른 페이지 로딩과 더 나은 웹 사이트 경험을 제공할 수 있습니다.

 

 

---

💡 사용하지 않는 자바스크립트 유형

 

1. 중요하지 않은 JavaScript
이 유형의 JavaScript 코드는 페이지의 상위 영역 콘텐츠에 필요하지 않지만, 페이지의 다른 부분이나 다른 페이지에서 여전히 사용될 수 있는 코드입니다.
예를 들어, 웹 페이지의 헤더에 있는 JavaScript 코드가 상단 메뉴를 제어하는데 사용되는데, 이 메뉴는 페이지의 일부인데도 불구하고 헤더 이외의 영역에서만 사용된다면 이것은 중요하지 않은 JavaScript로 간주됩니다.

 

2. 사용되지 않는 JavaScript
사용되지 않는 JavaScript는 더 이상 전혀 사용되지 않는 코드를 의미합니다.
이 코드는 이전 버전의 웹 사이트에서 남아 있는 부분이거나, 더 이상 참조되지 않는 다른 모듈에서 가져온 부분이거나, 테스트 중에 사용되었다가 더 이상 필요하지 않은 부분이 될 수 있습니다.
예를 들어, 웹 개발자가 이전에 사용했던 JavaScript 함수가 현재 웹 사이트에서 필요 없는 경우, 해당 함수는 사용되지 않는 JavaScript로 간주됩니다.

이러한 유형의 JavaScript 코드를 정리하고 최적화함으로써 웹 페이지의 성능을 향상시키고, 코드의 가독성을 개선할 수 있습니다. 또한, 사용하지 않는 JavaScript 코드는 보안 취약점의 원인이 될 수 있으므로 정기적으로 검토하고 제거하는 것이 중요합니다.

 

 

---

 

💡 사용하지 않는 JavaScript는 페이지 성능에 어떤 영향을 줍니까?

사용하지 않는 JavaScript는 웹 페이지 성능에 다음과 같은 영향을 미칩니다.

● 로딩 시간 증가
사용하지 않는 JavaScript 파일이 웹 페이지에 포함되어 있으면, 브라우저는 이 파일을 다운로드하고 해석해야 합니다. 이로 인해 웹 페이지의 로딩 시간이 증가하며, 사용자는 페이지가 더 오래 로드되는 것을 경험할 수 있습니다. 예를 들어, 사용하지 않는 캐러셀 슬라이더 코드가 페이지에 포함된 경우, 해당 코드를 다운로드하는 데 시간이 소요되고 로딩 시간이 느려질 수 있습니다.

 

● 대역폭 소모
사용하지 않는 JavaScript 파일은 추가적인 대역폭을 소모합니다. 브라우저가 이 파일을 다운로드해야 하므로, 사용자의 인터넷 연결 속도에 따라 페이지 로딩이 더 느려질 수 있습니다. 예를 들어, 사용하지 않는 라이브 차트 라이브러리가 포함된 경우, 이 라이브러리 파일은 불필요한 대역폭을 차지하게 됩니다.

● 렌더링 지연
사용하지 않는 JavaScript 코드가 페이지에 있으면, 브라우저는 이 코드를 처리하는데 시간을 소비하게 됩니다. 이로 인해 웹 페이지의 렌더링이 지연되며, 사용자는 페이지 내용을 빠르게 볼 수 없게 됩니다. 예를 들어, 사용하지 않는 애니메이션 스크립트가 페이지에  있으면 페이지 로딩이 느려지고 사용자 경험이 저하될 수 있습니다.

 

● 코드 유지 관리 어려움
사용하지 않는 JavaScript 코드가 포함되면 코드베이스가 복잡해집니다. 이 코드를 관리하거나 수정하는데 어려움을 겪을 수 있습니다. 코드가 복잡해지면 오류를 찾고 수정하기 어려워질 수 있습니다.

 

매번 웹 페이지가 로드될 때, 브라우저는 페이지의 내용을 렌더링하기 전에 JavaScript 파일을 다운로드하고 구문 분석하여 실행해야 합니다. 이 과정은 JavaScript 파일이 페이지 콘텐츠에 어떤 영향을 미칠지 브라우저가 알 수 없기 때문에 완전히 실행될 때까지 기다리는 것입니다.

 

사용되지 않는 JavaScript는 페이지 로딩을 늦추는 데 영향을 미칩니다. 예를 들어, 웹 페이지에 불필요한 JavaScript 코드가 포함되어 있다면, 브라우저는 이 코드를 다운로드하고 실행해야 하므로 페이지의 로딩 속도가 느려집니다. 이로 인해 사용자는 페이지가 완전히 로드되기까지 더 오랜 시간을 기다려야 합니다.

더 구체적인 예를 들어보겠습니다. 웹 페이지가 뉴스 기사를 표시하는데 사용되며, 이 페이지에는 사용하지 않는 트래킹 스크립트가 포함되어 있다고 가정해 봅시다. 사용자가 이 페이지를 열면 브라우저는 기사 콘텐츠와 함께 트래킹 스크립트도 다운로드하고 실행해야 합니다. 그러나 사용자가 이 스크립트에 별 관심이 없고 페이지의 주요 내용에만 관심이 있다면, 사용하지 않는 스크립트 때문에 페이지 로딩이 지연되어 기사를 읽는 데 더 많은 시간이 걸릴 것입니다.　
당연히 페이지에 사용되지 않는 JavaScript가 더 많을수록 브라우저가 이를 다운로드하고 구문 분석하여 실행하는 데 더 오래 걸립니다.

< 사용되지 않는 JavaScript를 불필요하게 로드하면 대역폭 소비가 증가하고 페이지의 첫 번째 렌더링이 지연되어 전반적인 페이지 성능이 저하됩니다. >

불필요하게 큰 JavaScript 파일들은 여러 문제를 야기할 수 있습니다. 이로 인해 브라우저가 다른 중요한 작업을 처리하는 데 차단되어 페이지의 첫 번째 화면이 그려지는 시간이 지연될 수 있습니다. 사용자는 페이지에 무언가가 표시되기를 기다리는 시간이 더 길어지며, 페이지 로딩이 더 느려집니다.
게다가, 중요하지 않은 JavaScript 코드들은 지연이나 비동기적으로 로드되더라도 페이지의 성능에 영향을 미칠 수 있습니다. 이는 렌더링을 차단하지는 않지만 여전히 다운로드되어 다른 페이지 자원들과 대역폭을 경쟁합니다. 결과적으로 페이지의 로딩이 더 오래 걸릴 수 있습니다.
또한, 사용되지 않는 JavaScript 코드는 휴대기기에서 불필요하게 셀룰러 데이터 소비를 증가시킵니다. 이는 사용자에게 더 높은 데이터 비용을 지불하게 만들 수 있습니다.
따라서 사용되지 않는 JavaScript를 줄이면 브라우저 실행 시간이 줄어들고 대역폭을 아낄 수 있으므로 더 빠른 로딩 페이지와 더 나은 사용자 경험을 얻을 수 있습니다.이러한 최적화는 웹 페이지가 빠르게 로드되고 사용자가 페이지를 더 빨리 활용할 수 있도록 도와줍니다.

 

 

---

 

 

💡  사용하지 않는 JavaScript를 줄이는 방법은 무엇입니까?

사용하지 않는 JavaScript를 처리하는 다음 전략을 사용할 수 있습니다

1. 코드 분할(Code-splitting)
코드 분할을 통해 번들된 JavaScript를 중요한 부분과 중요하지 않은 부분으로 분리합니다.

이를 통해 렌더링 차단 동작을 줄이고, 우선 중요한 JavaScript만 로드됩니다. 페이지에서 필요하지 않은 중요하지 않은 JavaScript는 제거됩니다.
예를 들어, 온라인 쇼핑 웹 사이트를 고려해보겠습니다. 이 웹 사이트에는 상품 목록과 결제 관련 JavaScript가 있습니다. 코드 분할을 사용하면 사용자가 상품 목록을 볼 때 결제 관련 JavaScript를 미리 로드하지 않고 필요할 때만 로드할 수 있습니다. 이로써 페이지 로딩 시간이 단축되고 사용자 경험이 향상됩니다.
코드 분할에 대한 자세한 정보는 여기를 참조하세요.

 

2. 죽은 코드 제거(Dead code elimination)
죽은 코드 제거는 현재 페이지에서 사용되지 않는 JavaScript 코드를 제거하는 과정입니다. 이 코드는 이전 사이트 버전의 잔여물이거나 테스트 중 사용된 코드일 수 있습니다.
트리 쉐이킹(tree shaking)이라는 과정을 사용하여 죽은 JavaScript 코드를 제거할 수 있습니다.
예를 들어, 이전 버전의 웹 사이트에서 사용되었던 로그인 관련 코드가 현재 웹 사이트에서는 사용되지 않는다면, 죽은 코드 제거를 통해 해당 코드를 제거할 수 있습니다. 이렇게 하면 페이지의 용량이 줄어들고, 다운로드 시간과 실행 시간이 감소하여 사용자에게 더 빠른 페이지 로딩을 제공할 수 있습니다.
트리 쉐이킹에 대한 자세한 정보는 여기를 참조하세요.

 

3. 죽은 가져온 코드 제거(Dead imported code elimination)
많은 웹 애플리케이션은 외부 라이브러리나 모듈을 가져와 사용합니다. 그러나 이러한 라이브러리에서 사용되지 않는 코드를 쉽게 식별하고 제거하기 어렵습니다. 하지만 죽은 가져온 코드 제거 플러그인을 사용하면 이 문제를 해결할 수 있습니다. 예를 들어, 웹 애플리케이션이 특정 라이브러리를 가져오지만 해당 라이브러리에서 사용되지 않는 기능을 제거할 수 있습니다. 이를 통해 웹 페이지에서 불필요한 코드를 제거하고 페이지 성능을 최적화할 수 있습니다.
이 플러그인에 대한 자세한 정보는 여기를 참조하세요.

 

 

---

 

이러한 전략을 사용하면 사용하지 않는 JavaScript 코드를 효과적으로 처리하여 페이지의 성능을 향상시키고, 사용자에게 빠른 로딩 경험을 제공할 수 있습니다.