[온라인 쇼핑몰 속도 최적화] Third-party 코드의 영향 감소

 

목차

 

💡 Third-party 코드는 페이지 성능에 어떤 영향을 줍니까?

💡 Third-party  코드의 영향을 줄이는 방법은 무엇입니까?

---

 

 

Third-party 코드는 광고, 분석 서비스 및 기타 요소로 구성되어 있으며, 이들은 URL의 도메인과 다른 도메인에서 제공됩니다.
이러한 자원들은 종종 웹 성능 저하의 원인이 됩니다. 왜냐하면 이들은 메인 스레드를 차단하거나 다른 작업을 수행하는 것을 방해하는 스크립트를 포함할 수 있기 때문입니다.
또한, 느린 서버 응답 시간, 느린 DNS 조회, 서버 응답 오류 등 여러 가지 이유로 인해 페이지가 느려질 수 있으며, 이는 페이지 성능에 영향을 미칠 수 있습니다.
웹 성능을 위해 웹사이트 코드를 검토하여 Third-party 스크립트의 영향을 최소화하는 것이 매우 중요합니다.

 

Third-party 코드란?

웹 페이지에 추가되는 외부 서비스나 스크립트입니다. 예를 들어, 광고 트래킹, 소셜 미디어 위젯, 웹 분석 도구 등이 Third-party 코드의 일부입니다. 이러한 코드들은 웹 페이지의 성능에 영향을 미칠 수 있으며, 느린 로딩 시간과 레이아웃의 깨짐 등의 문제를 초래할수 있습니다.

 

 

---

 

💡 Third-party 코드는 페이지 성능에 어떤 영향을 줍니까?

Third-party 코드는 웹 페이지의 성능을 저하시킬 수 있습니다. 이는 주로 다음과 같은 이유로 발생합니다.

● Third-party 코드의 다운로드와 실행에 시간이 소요될 수 있습니다.
● Third-party 코드가 네트워크 요청을 생성하거나 다른 리소스를 로드할 수 있습니다.
● Third-party 코드가 CPU 리소스를 소비할 수 있습니다.

 

매번 페이지가 로드될 때마다, 브라우저는 HTML 코드를 한 줄씩 다운로드하고 파싱해야 합니다. 이 과정에서 메인 스레드를 차단할 가능성이 있는 Third-party 스크립트를 만날 수 있습니다.
기본적으로 JavaScript는 메인 스레드에서 실행되며 실행에는 오랜 시간이 걸릴 수 있습니다, 이로 인해 다른 모든 작업이 실행되지 못할 수 있습니다.

Third-party 코드는 웹 페이지 성능에 다양한 영향을 줄 수 있으며, 그 영향은 주로 다음과 같이 나타납니다.

 

1. 로딩 시간 지연
Third-party 코드가 많거나 큰 경우, 웹 페이지의 로딩 시간이 길어질 수 있습니다. 브라우저는 모든 스크립트와 리소스를 다운로드하고 해석하기 때문에, 추가된 third-party 코드가 많을수록 로딩 시간이 증가할 가능성이 있습니다.

2. 대역폭 소모
Third-party 코드는 추가적인 대역폭을 요구하므로, 사용자의 인터넷 연결 속도에 따라 페이지 로딩이 느려질 수 있습니다. 특히 모바일 사용자나 느린 인터넷 연결을 사용하는 사용자에게 영향을 미칠 수 있습니다.

3. 렌더링 차단
Third-party 코드가 페이지의 렌더링을 차단하는 경우가 있습니다. 이는 사용자가 페이지 내용을 빠르게 볼 수 없게 만들고 사용자 경험을 저하시킬 수 있습니다.

4. 보안 문제
신뢰할 수 없는 third-party 코드가 포함된 경우, 보안 문제가 발생할 수 있습니다. 이 코드가 사용자 데이터에 접근하거나 악의적인 활동을 수행할 수 있으므로 주의해야 합니다.

5. 크로스 브라우징 문제
다양한 브라우저에서 동작하는 것을 보장하기 위해 third-party 코드를 수정해야 할 수 있습니다. 이로 인해 코드의 유지 보수가 어려워질 수 있습니다.

6. 성능 모니터링 어려움
Third-party 코드는 웹 페이지의 성능을 모니터링하고 최적화하기 어렵게 만들 수 있습니다. 이 코드가 어떻게 동작하는지 완전히 이해하기 어려운 경우가 많아서 성능 문제를 식별하고 해결하기 어려울 수 있습니다.

위의 내용은 여러 개의 Third-party 요청이 있는 경우에는 페이지 성능을 더 악화시킬 수 있습니다.
Third-party 코드는 사이트 기능이나 비즈니스 목표에 필수적일 수 있지만, Third-party 콘텐츠를 검토하고 사이트에   가치를 추가하는지 확인하는 것이 좋습니다.

 

 

---

 

💡 Third-party  코드의 영향을 줄이는 방법은 무엇입니까?

Third-party 코드의 영향을 줄이기 위해 다음과 같은 방법을 고려해볼 수 있습니다.

● 필요한 Third-party 코드만 사용하도록 최소한으로 유지합니다.
● Third-party 코드를 비동기적으로 로드하거나 지연 로딩을 구현합니다.
● 캐싱을 통해 Third-party 코드의 다운로드를 최적화합니다.
● 코드를 최적화하고 불필요한 부하를 줄입니다.

Third-party 코드는 웹 사이트 또는 애플리케이션에 추가되는 외부 소스 코드를 의미합니다. 이러한 코드는 웹 성능을 저하시키거나 보안 문제를 발생시킬 수 있으므로 조심해야 합니다.

일반적으로, Third-party 코드의 영향을 줄이는 몇 가지 일반적인 방법이 있습니다.

1. 평가 및 정리
▶ 먼저 웹사이트 또는 애플리케이션에서 사용 중인 모든 third-party 코드를 검토합니다.
▶ 어떤 목적으로 사용되는지 이해하고, 실제로 필요한지 여부를 판단합니다.
▶ 사용하지 않는 코드나 중복된 코드를 식별하고 정리합니다.

2. 필요한 코드만 유지
필요한 third-party 코드만 유지하고 나머지는 삭제합니다. 불필요한 코드는 성능을 느리게 만들고 보안 문제를 초래할 수 있습니다.

 

3. 비동기로 로드
third-party 코드를 비동기적으로 로드하십시오. 이렇게 하면 웹 페이지의 로딩 속도에 영향을 덜 미칩니다.
비동기 스크립트 태그를 사용하여 코드를 로드하거나, JavaScript의 async 또는 defer 속성을 활용하여 비동기로 로딩합니다.

 

4. 코드 압축 및 최적화
third-party 코드를 압축하고 최적화하여 파일 크기를 줄입니다. 작은 파일 크기는 로딩 시간을 단축시키고 대역폭을 절약할 수 있습니다.
필요하다면 코드를 GZIP 또는 Brotli와 같은 압축 알고리즘을 사용하여 압축합니다.

 

5. 캐시 활용
third-party 코드를 브라우저 캐시에 저장하여 반복적인 로딩을 피하고 성능을 향상시킵니다.
Cache-Control 헤더를 설정하여 브라우저 캐시를 활용하도록 지시할 수 있습니다.

 

6. 보안 검토
third-party 코드를 사용할 때 보안 검토를 수행합니다. 신뢰할 수 있는 소스에서 가져온 코드인지 확인하고, 적절한 보안 조치를 취합니다.
CSP (Content Security Policy)를 구현하여 외부 소스의 실행을 제어합니다.

 

7. Third-party JavaScript를 효율적으로 로드

 

제안 사항 중 일부는 다음과 같습니다.
▶ 자바스크립트 로딩과 파싱 연기
third-party JavaScript의 구문 분석 또는 로드를 연기하여 초기 다운로드 크기를 줄여 다른 리소스를 병렬로 다운로드할 수 있습니다. 이렇게 하면 페이지의 실행 및 렌더링 시간이 빨라집니다.
렌더링 차단 리소스를 제거하는 방법 문서에서 이에 대해 다룹니다.

 

▶ 필요한 출처에 대한 초기 연결 설정
Preconnect 및 dns-prefetch를 사용하여 중요한 타사 출처에 대한 조기 연결을 설정합니다.
이에 대한 자세한 내용은 설명서를 참조하십시오.

 

▶ 제3자 리소스 지연 로드
내장된 third-party  리소스, 특히 페이지 로드 속도를 높이고 페이지의 인지된 성능을 개선하기 위해 스크롤 없이 볼 수 있는 부분이 아닌 리소스를 지연 로드합니다.

 

▶ Third-party 호스팅 최적화
third-party 호스팅을 최적화하는 방법은 여러 가지가 있습니다. 자체 호스팅 third-party 스크립트로 DNS 조회 및 왕복 시간을 줄이고 http 캐싱 헤더를 개선하며 HTTP/2 서버 푸시를 활용합니다.
이러한 방법에 대해 자세히 알아보려면 Google 설명서를 읽어보세요.

 

8. 성능 모니터링
third-party 코드의 성능을 지속적으로 모니터링하고 성능 이슈를 식별합니다.
로딩 시간이나 페이지 크기와 같은 성능 지표를 추적하고 이상적인 상태를 유지합니다.

 

 

---

 

third-party 코드를 관리하는 것은 웹 성능과 보안을 향상시키는 데 중요한 요소입니다. 필요한 코드만 유지하고 최적화, 보안, 캐싱을 활용하면 웹 페이지의 성능을 최적화할 수 있습니다.