타사 자바스크립트가 성능에 어떤 영향을 미칠 수 있는지, 그리고 이로 인해 사이트 속도가 느려지지 않도록 하는 방법을 알아보세요.
서드 파티 자바스크립트는 일반적으로 웹사이트에 삽입된 다음과 같은 스크립트를 말합니다.
- 내가 작성하지 않음
- 서드 파티 서버에서 제공
사이트에서는 다음과 같은 다양한 용도로 이러한 스크립트를 사용합니다.
- 소셜 공유 버튼
- 동영상 플레이어 삽입
- 채팅 서비스
- 광고 iframe
- 분석 및 측정항목 스크립트
- 실험용 A/B 테스트 스크립트
- 도우미 라이브러리 (예: 날짜 형식 지정, 애니메이션, 함수 라이브러리)
서드 파티 스크립트는 강력한 기능을 제공할 수 있지만 그것이 전부는 아닙니다. 또한 개인 정보 보호, 보안, 페이지 동작에 영향을 미치며, 특히 성능에 문제가 될 수 있습니다.
성능
JavaScript의 양이 많으면 성능이 저하될 수 있습니다. 하지만 서드 파티 자바스크립트는 일반적으로 제어할 수 없기 때문에 추가 문제가 발생할 수 있습니다.
네트워크
연결을 설정하는 데는 시간이 걸리며 여러 서버에 너무 많은 요청을 전송하면 속도가 느려집니다. DNS 조회, 리디렉션 및 사용자의 요청을 처리하는 최종 서버로의 수차례 왕복이 포함될 수 있는 보안 연결의 경우에는 이 시간이 훨씬 더 길 수 있습니다.
서드 파티 스크립트는 종종 다음과 같은 요소로 인해 네트워크 오버헤드에 추가됩니다.
- 추가 네트워크 요청 실행
- 최적화되지 않은 이미지 및 동영상 가져오기
- HTTP 캐싱 부족으로 인해 네트워크 리소스를 빈번하게 가져와야 함
- 리소스의 서버 압축이 충분하지 않습니다.
- 다양한 서드 파티 삽입에 의해 풀링된 프레임워크 및 라이브러리의 다중 인스턴스
렌더링
서드 파티 JavaScript가 로드되는 방식은 매우 중요합니다. 주요 렌더링 경로에서 동기식으로 수행되면 문서의 나머지 부분의 파싱이 지연됩니다.
타사에서 서버에 문제가 있고 리소스를 전송하지 못하면 요청이 타임아웃될 때까지(10~80초) 렌더링이 차단됩니다. 이 문제는 WebPageTest Single-Point-of-Failure 테스트를 사용하여 테스트하고 시뮬레이션할 수 있습니다.
해결 방법
서드 파티 자바스크립트를 사용하는 것은 피할 수 없는 경우가 많지만, 다음과 같이 부정적인 영향을 최소화할 수 있는 몇 가지 방법이 있습니다.
- 서드 파티 리소스를 선택할 때는 필요한 기능을 제공하면서도 최소한의 코드만 전송하는 리소스를 선택하세요.
- 서드 파티 콘텐츠에 대한 실적 예산을 사용하여 비용을 관리합니다.
- 서로 다른 두 공급업체의 동일한 기능을 사용하지 마세요. 태그 관리자나 분석 플랫폼 두 개는 필요하지 않을 수 있습니다.
- 중복된 서드 파티 스크립트를 정기적으로 감사하고 삭제합니다.
서드 파티 콘텐츠를 감사하고 효율적으로 로드하여 실적과 사용자 환경을 개선하는 방법을 알아보려면 서드 파티 리소스 최적화 섹션의 다른 게시물을 참고하세요.