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