목차
💡 긴 JavaScript 실행 시간은 페이지 성능에 어떤 영향을 줍니까?
💡 JavaScript 실행 시간을 줄이는 방법은 무엇입니까?
JavaScript는 웹 페이지에 동적 기능을 추가하는 데 중요한 역할을 합니다. 그러나 JavaScript 코드가 긴 실행 시간을 가지면 웹 페이지의로딩과 응답 속도에 영향을 미칠 수 있습니다. 따라서 JavaScript 실행 시간을 단축하는 것은 중요합니다.
일반적으로 JavaScript 실행 시간을 줄이는 것은 JavaScript 파일을 구문 분석, 컴파일 및 실행하는 데 소요되는 시간을 감소시키는 것을 의미합니다.
기본적으로 JavaScript는 메인 스레드에서 실행되며, 이 때 브라우저는 다른 작업을 실행할 수 없습니다.
JavaScript 실행 시간을 줄이는 것은 본질적으로 메인 스레드 차단 시간을 줄이는 것입니다.
💡 긴 JavaScript 실행 시간은 페이지 성능에 어떤 영향을 줍니까?
JavaScript 실행 시간이 길어지면 웹페이지의 로딩 속도가 느려지고 사용자들의 경험이 저하될 수 있습니다.
브라우저가 HTML의 초기 구문 분석 중에 <script> 태그를 찾으면, 이 과정을 일시 중단하고 해당 <script> 태그 내의 JavaScript 코드를 로드, 구문 분석 및 실행하기 시작합니다.
이는 JavaScript가 페이지의 렌더링/콘텐츠에 영향을 줄 수 있기 때문입니다.
JavaScript 실행 시간은 페이지의 성능에 중요한 역할을 합니다. 긴 JavaScript 실행 시간은 여러 가지 방식으로 사이트 성능을 저하 시킬 수 있습니다.
1. 로딩 시간 지연
긴 JavaScript 코드가 있으면 웹 페이지의 초기 로딩 시간이 길어집니다. 사용자가 페이지를 열 때 더 오래 기다려야 하므로 불편함을 느낄 수 있습니다.
2. 사용자 입력에 대한 응답이 없음
페이지에서 JavaScript 코드가 오랜 시간 동안 실행 중인 경우, 사용자의 상호 작용(클릭, 스크롤 등)에 대한 응답이 느려질 수 있습니다. 이는 웹 페이지가 느리게 반응하는 것처럼 느껴집니다.
3. 모바일 사용자 부담
모바일 장치에서 긴 JavaScript 실행 시간은 데이터 사용량을 늘릴 수 있습니다. 사용자는 느린 페이지 로딩과 추가 데이터 비용을 경험할 수 있습니다.
4. 검색 엔진 순위 하락
검색 엔진은 웹 페이지 로딩 속도를 고려하여 검색 결과의 순위를 매길 때 사용합니다. 긴 JavaScript 실행 시간은 검색 엔진 순위가 하락할 수 있습니다.
5. 상호 작용 가능한 시간(Time To Interactive, TTI) 지연
페이지가 실제로 필요하기 전에 많은 코드를 실행하면, 페이지가 완전히 상호 작용 가능한 지점이 늦춰져 사용자 입력에 대한 느린 또는 응답이 없는 경험을 초래합니다.
6. 이탈률 증가
웹 페이지가 느리게 로드되고 반응하지 않을 때, 사용자는 페이지를 떠날 가능성이 높아집니다. 이는 웹 페이지의 이탈률 증가로 이어질 수 있습니다.
7. 에너지 소비 증가
모바일 장치에서 긴 JavaScript 실행 시간은 배터리 소비를 증가시킬 수 있습니다. 에너지 효율적인 코드를 사용하지 않으면 배터리 수명에도 영향을 미칠 수 있습니다.
요약하면,
긴 JavaScript 실행 시간은 웹 페이지의 로딩 속도를 느리게 하고 사용자 경험을 저하시킬 수 있습니다. 또한 검색 엔진 순위 하락과 데이터 비용 증가와 같은 부수적인 영향도 있을 수 있습니다.
💡 JavaScript 실행 시간을 줄이는 방법은 무엇입니까?
다음과 같이 JavaScript 실행 시간을 줄이는 방법에는 여러 가지가 있습니다.
1) 코드 분할 구현하기
코드 분할은 JavaScript 번들을 작은 파일로 나누어 위의 폴드 콘텐츠 및 사용자 상호작용에 필요한 중요한 코드(예: 스크롤 없이 볼 수 있는 콘텐츠 및 사용자 상호 작용에 필요한 코드)만 초기 페이지 로드 중에 실행 되도록하는 방법입니다.
페이지 로드 프로세스의 시작 부분에서 실행되는 코드 줄 수를 줄이면 First Paint가 더 빨리 발생할 수 있습니다. 또한, 작은 코드 덩어리를 실행함으로써 메인 스레드 차단 시간을 줄이고 전체 JavaScript 파싱 및 실행 시간을 크게 줄일 수 있습니다.
여기를 클릭하여 코드 분할에 대해 더 알아보세요.
2) 사용하지 않는 코드 제거하기
사용하지 않는 코드는 종종 이전 버전의 사이트에서 상속되거나 더 이상 참조되지 않는 다른 모듈에서 가져올 수 있습니다. 또한, 테스트의 일부이지만 제작 웹 사이트에서 필요하지 않은 코드 덩어리가 있을 수 있습니다.
웹 페이지에서 죽은 코드를 찾아 제거하여 JavaScript 실행 시간을 줄이고 메인 스레드의 점유율을 낮추세요.
여기를 클릭하여 사용하지 않는 코드에 대해 더 알아보세요.
3) PRPL 패턴을 사용하여 코드 캐싱하기
PRPL 패턴은 JavaScript 실행 시간을 줄이는 데 도움이되는 4 가지 주요 방법의 조합을 의미하는 머리글자입니다.
● 중요한 JavaScript 파일 미리 로드
중요한 JavaScript 파일을 사전 로드하면 스크립트를 미리 다운로드하지만 나중에 실행할 수 있습니다. 이렇게하면 스크립트가 페이지 로드의 중요한 단계에서 메인 스레드를 차단하지 않고 사용자가 페이지와 더 빨리 상호 작용할 수 있습니다.
중요한 JavaScript 코드를 분할하여 미리 로드하도록 조합하세요.
여기를 클릭하여 핵심 스크립트를 사전로드하는 방법을 알아보세요.
● 가능한 한 빨리 첫 번째 페인트 렌더링
렌더링을 차단하는 리소스를 제거하여 First Paint을 가능한 빨리 렌더링하세요.
중요하지 않은 JavaScript를 지연로드하거나 비동기로 로드하는 등의 방법으로 렌더링을 차단하는 리소스를 제거할 수 있습니다.
● 자산 사전 캐싱하기
서비스 워커를 사용하여 자산을 서버에서 다시 다운로드하는 대신 캐시에서 직접 가져올 수 있습니다. 이로써 반복 방문에서 더 빠 른 다운로드와 실행이 가능해집니다.
여기를 클릭하여 자산 사전캐싱에 대해 더 알아보세요.
● JavaScript 파일 지연 로드하기
JavaScript 파일을 지연로드하면 스크립트가 필요할 때만 로드되므로 초기 페이지 로딩 시간을 줄일 수 있습니다. 중요한 파일은 미리 로드하고 다른 중요하지 않은 파일는 지연로드하는 방식으로 조합하세요.
이 글을 읽어 코드 분할과 지연로드에 대해 더 알아보세요.
4) 자바스크립트 코드 축소 및 압축
JavaScript 파일을 축소화하고 압축하면 주석, 중복 코드 및 공백을 제거하여 파일 크기를 줄일 수 있습니다. 이러한 요소들은 브라우저가 페이지를 로드하는 데 필요하지 않으며, 낮은 JavaScript 페이로드는 전체 파싱 시간을 줄입니다.
참고로, 축소화는 성능을 단독으로 향상시키는 것이 아니라 성능을 세밀하게 조정하는 방법으로 간주되어야 합니다. 축소화를 시도하기 전에 위의 최적화에 집중하세요.
JavaScript 파일을 축소화하는 방법에 대해 자세히 알아보려면 여기를 클릭하세요.
JavaScript 실행 시간을 줄이면 웹 페이지의 성능이 개선되고 사용자 경험이 향상됩니다. 웹 개발자는 이러한 최적화 기술을 적절하게 활용하여 웹 페이지를 빠르게 만들고 반응성을 높이기 위해 노력합니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] Third-party 코드의 영향 감소 (1) | 2024.10.26 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 중요 요청 미리 로드 (0) | 2024.10.25 |
| [온라인 쇼핑몰 속도 최적화] 필요한 원본에 미리 연결 (3) | 2024.10.23 |
| [온라인 쇼핑몰 속도 최적화] Facades를 사용하여 외부(Third-party) 리소스를 지연 로드 (2) | 2024.10.22 |
| [온라인 쇼핑몰 속도 최적화] 지금 프로덕션에 ES2015+ 코드 배포 (2) | 2024.10.21 |